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

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

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

Simcha asked 2019-08-08T20:43:57Z
4个解决方案
90 votes

对于给定的网站/ Web应用程序,您可以使用客户端,服务器端或两者的响应。

客户端

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

服务器端

将ReactJS视为服务器端模板引擎(如玉器,车把等......)。 服务器呈现的HTML包含应该使用的UI,您不必等待加载任何脚本。 您的页面可以被搜索引擎编入索引(如果没有执行任何javascript)。

由于UI是在服务器上呈现的,因此您的事件处理程序都不起作用,并且没有交互性(您有一个静态页面)。

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

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

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

Gautham Badhrinathan answered 2019-08-08T20:44:59Z
29 votes

图片来源:Walmart Labs工程博客

SSR

CSR

注意:SSR(服务器端渲染),CSR(客户端渲染)。

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

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

JSON C11 answered 2019-08-08T20:45:46Z
3 votes

我实际上想知道同样的研究相当多,虽然你正在寻找的答案在评论中给出,但我觉得它应该更加突出,因此我写这篇文章(一旦我能够提出,我会更新 以更好的方式,因为我发现架构上的解决方案至少是有问题的)。

您需要以两种方式编写组件,因此基本上将if交换机放在任何地方,以确定您是在客户端还是服务器上,然后执行数据库查询(或服务器上的任何适当的)或REST调用(在 客户端)。 然后,您必须编写生成数据的端点并将其公开给客户端,然后就可以了。

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

SGD answered 2019-08-08T20:46:26Z
0 votes

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

它们可以一起使用。

如果我们可以一起使用它,怎么做 - 我们需要复制它   服务器端和客户端的相同元素? 或者,我们可以   在服务器上构建应用程序的静态部分,以及   客户端的动态部分,没有任何与服务器的连接   那边已经预渲染了?

最好渲染相同的布局以避免重排和重绘操作,减少闪烁/闪烁,您的页面将更加平滑。 但是,它不是限制。 你可以很好地缓存SSR html(Electrode会减少响应时间)/发送一个被CSR覆盖的静态html(客户端渲染)。

如果您刚开始使用SSR,我建议您从简单开始,SSR可以非常快速地变得非常复杂。 在服务器上构建html意味着失去对窗口,文档(你在客户端上有这些)的对象的访问权限,失去合并异步操作的能力(开箱即用),并且通常需要大量的代码编辑才能使你的代码与SSR兼容( 因为你必须使用webpack打包你的bundle.js)。 CSS导入,需要vs导入之类的东西突然开始咬你(在没有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. SEO
  2. 更快的负载(我会打折)

哈克:[https://medium.com/@gagan_goku/react-and-server-side-rendering-ssr-444d8c48abfc]

Kira answered 2019-08-08T20:47:58Z
translate from https://stackoverflow.com:/questions/27290354/reactjs-server-side-rendering-vs-client-side-rendering