ReactJS 服务器端呈现与客户端呈现

我刚刚开始研究 ReactJS，发现它提供了两种呈现页面的方法: 服务器端和客户端。但是，我不明白如何一起使用它。构建应用程序是两种不同的方式，还是可以一起使用？

如果我们可以一起使用它，如何做到这一点-我们需要复制相同的元素在服务器端和客户端？或者，我们可以只在服务器上构建应用程序的静态部分，在客户端构建动态部分，而不与已经预先呈现的服务器端建立任何连接吗？

83217 次浏览
小开
最佳答案

对于给定的网站/web 应用程序，您可以使用反应 客户端、 服务器端或 都有。

客户端

在这里，您完全是在浏览器上运行 ReactJS。这是最简单的设置，包括大多数示例(包括 http://reactjs.org上的示例)。服务器呈现的初始 HTML 是一个占位符，一旦所有脚本加载完毕，整个 UI 就会在浏览器中呈现。

服务器端

在这里，可以将 ReactJS 看作一个服务器端模板引擎(如 Jade、把手等)。.).服务器呈现的 HTML 包含应该包含的 UI，并且不需要等待任何脚本加载。你的页面可以被搜索引擎索引(如果没有执行任何 javascript 的话)。

因为 UI 是在服务器上呈现的，所以没有任何事件处理程序可以工作，也没有交互性(您有一个静态页面)。

都有

这里，初始呈现在服务器上。因此，浏览器接收到的 HTML 具有应有的 UI。加载脚本之后，再次重新呈现虚拟 DOM，以设置组件的事件处理程序。

在这里，您需要确保使用在服务器上呈现的相同 props重新呈现完全相同的虚拟 DOM (根 ReactJS 组件)。否则，ReactJS 会抱怨服务器端和客户端虚拟 DOM 不匹配。

因为 ReactJS 区分了重新呈现之间的虚 DOM，所以真正的 DOM 不会发生变化。只有事件处理程序绑定到真正的 DOM 元素。

小开

实际上我对同样的研究很感兴趣，虽然你想要的答案已经在评论中给出了，但是我觉得它应该更加突出，因此我正在写这篇文章(一旦我找到一个更好的方法，我会更新它，因为我发现这个解决方案在架构上至少是有问题的)。

您需要使用 两边都要考虑编写组件，因此基本上到处放置 if开关，以确定您是在客户机上还是在服务器上，然后作为 DB 查询(或服务器上的任何合适的查询)或 REST 调用(在客户机上)执行。然后，您必须编写生成数据并将其公开给客户端的端点，这样就可以了。

同样，很高兴了解到一个更清洁的解决方案。

小开

图片来源: 沃尔玛实验室工程博客

SSR

CSR

注意: 战略科学军团(服务器端渲染) ，企业社会责任(客户端渲染)。

主要区别在于，使用 SSR 时，服务器对客户端浏览器的响应包括要呈现的页面的 HTML。 同样重要的是要注意，虽然使用 SSR 页面呈现速度更快。在 JS 文件被下载并且浏览器执行 React 之前，页面不会准备好进行用户交互。

一个缺点是 SSR TTFB (第一个字节的时间)可能稍微长一些。这是可以理解的，因为服务器需要一些时间来创建 HTML 文档，这反过来又增加了服务器响应的大小。

小开

构建应用程序是两种不同的方式，还是可以一起使用？

它们可以一起使用。

如果我们可以一起使用它，如何做到这一点-我们需要复制 服务器端和客户端的相同元素? 或者，我们可以只 在服务器上构建应用程序的静态部分，并且 动态部分在客户端，没有任何连接到服务器 已经被预先渲染的那一面？

最好是有相同的布局被呈现，以避免重新流动和重新绘制操作，较少的闪烁/闪烁，您的页面将更加平滑。然而，这不是一个限制。您可以很好地缓存 SSR html (电极为了减少响应时间所做的事情)/发送一个静态 html，它会被 CSR (客户端呈现)覆盖。

如果你刚刚开始使用 SSR，我建议你从简单的开始，SSR 可以很快变得非常复杂。在服务器上构建 html 意味着失去对窗口、文档(客户机上有这些)等对象的访问，失去合并异步操作(开箱即用)的能力，以及通常需要进行大量代码编辑才能使代码与 SSR 兼容(因为必须使用 webpack 来打包 bundle.js)。像 CSS 导入，需要与导入突然开始咬你(这不是默认的反应应用程序没有 webpack 的情况)。

SSR 的一般模式如下:

const app = Express();
const port = 8092;


// This is fired every time the server side receives a request
app.use(handleRender);
function handleRender(req, res) {
const fullUrl = req.protocol + '://' + req.get('host') + req.originalUrl;
console.log('fullUrl: ', fullUrl);
console.log('req.url: ', req.url);


// Create a new Redux store instance
const store = createStore(reducerFn);


const urlToRender = req.url;
// Render the component to a string
const html = renderToString(
<Provider store={store}>
<StaticRouter location={urlToRender} context=\{\{}}>
{routes}
</StaticRouter>
</Provider>
);
const helmet = Helmet.renderStatic();


// Grab the initial state from our Redux store
const preloadedState = store.getState();


// Send the rendered page back to the client
res.send(renderFullPage(helmet, html, preloadedState));
}

对于那些从 SSR 开始的人，我的建议是提供静态 html。您可以通过运行 CSR SPA 应用程序获得静态 html:

document.getElementById('root').innerHTML

别忘了，使用 SSR 的唯一理由应该是:

  1. SEO
  2. 更快的负载(我会打折这一点)

黑客: https://medium.com/@gagan_goku/react-and-server-side-rendering-ssr-444d8c48abfc


提交答案