ReactJS 服务器端渲染与客户端渲染

Question

我刚刚开始研究 ReactJS，发现它为您提供了两种渲染页面的方式：服务器端和客户端。 但是，我无法理解如何一起使用它。 是两种不同的方式来构建应用程序，还是可以一起使用？

如果我们可以一起使用它，怎么做 - 我们是否需要在服务器端和客户端复制相同的元素？ 或者，我们是否可以只在服务器上构建应用程序的静态部分，在客户端构建动态部分，而无需连接到已经预渲染的服务器端？

Answer 1

对于给定的网站/网络应用程序，您可以使用 react客户端、服务器端或两者。

客户端

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

服务器端

将 ReactJS 视为这里的服务器端模板引擎（如 jade、把手等......）。 服务器呈现的 HTML 包含应有的 UI，您无需等待任何脚本加载。 您的页面可以被搜索引擎编入索引（如果不执行任何 javascript）。

由于 UI 是在服务器上呈现的，因此您的任何事件处理程序都不会工作，并且没有交互性（您有一个静态页面）。

两个都

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

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

由于 ReactJS 在重新渲染之间区分虚拟 DOM，因此真实 DOM 不会发生变异。 只有事件处理程序绑定到真正的 DOM 元素。

Answer 2

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

注意： SSR （服务器端渲染）、 CSR （客户端渲染）。

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

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

Answer 3

我实际上很想知道同样的研究，虽然你正在寻找的答案在评论中给出，但我觉得它应该更加突出，因此我正在写这篇文章（一旦我能想出一个我会更新更好的方法，因为我发现解决方案在架构上至少是有问题的）。

您需要同时考虑两种方式来编写组件，因此基本上将if开关放在任何地方以确定您是在客户端还是服务器上，然后作为 DB 查询（或服务器上的任何适当内容）或 REST 调用（在客户端）。 然后，您必须编写生成数据并将其公开给客户端的端点，然后就可以了。

再次，很高兴了解更清洁的解决方案。

Answer 4

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

它们可以一起使用。

如果我们可以一起使用它，怎么做 - 我们是否需要在服务器端和客户端复制相同的元素？ 或者，我们是否可以只在服务器上构建应用程序的静态部分，在客户端构建动态部分，而无需连接到已经预渲染的服务器端？

最好呈现相同的布局以避免回流和重绘操作，减少闪烁/闪烁，您的页面会更流畅。 但是，这不是限制。 您可以很好地缓存 SSR html（ Electrode为缩短响应时间所做的事情）/发送静态 html，该 html 会被 CSR（客户端渲染）覆盖。

如果您刚开始使用 SSR，我建议从简单开始，SSR 会很快变得非常复杂。 在服务器上构建 html 意味着无法访问窗口、文档等对象（客户端上有这些），无法合并异步操作（开箱即用），并且通常需要进行大量代码编辑以使您的代码 SSR 兼容（因为你必须使用 webpack 来打包你的 bundle.js）。 像 CSS 导入、require 和 import 之类的东西突然开始让你感到厌烦（在没有 webpack 的默认 React 应用程序中，情况并非如此）。

SSR 的一般模式是这样的。 服务请求的 Express 服务器：

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. 搜索引擎优化
2. 更快的加载（我会打折扣）

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

Answer 5

服务器端渲染是您最初在服务器中渲染页面以及将完全渲染的页面发送回客户端的方式。

您将在此链接中获得更多详细信息。 点击这里