为什么要使用React服务器端渲染 [英] Why use React server side rendering

问题描述

我刚刚学会了最近的反应，打算将其用于我的下一个项目.我已经遇到过几次反应服务器端渲染，但是想知道为什么在现代时代"我们仍然需要它.

I have just learned react recently and intend to use it for my next project. I have come across react server side rendering for a few times, but wonders why do we still need it in "modern age".

在此文章中，它认为在服务器端渲染中，用户不会必须等待从CDN或其他地方加载这些js才能看到初始静态页面，并且该页面将在js到达时恢复功能.

In this article, it argues that with server side rendering, user does not have to wait to load those js from CDN or somewhere to see the initial static page, and the page will resume functionality when js arrives.

但是在使用webpack生产配置和gzip构建之后，整个捆绑包(包括react，我的代码和许多其他东西)仅占用40kb，而且我有aws CDN.我不太了解在我的情况下使用服务器端渲染的原因.

But after building with webpack production configuration, and gzip, the whole bundle (with react, my code and a lot other stuff) only takes 40kb, and I have aws CDN for it. I don't quite see the reason to use server side rendering for my situation.

所以问题是，如果在gzip之后生成的javascript包如此之小，为什么人们仍然使用服务器端渲染?

So the question is why people still use server side rendering if the resulting javascript bundle is so tiny after gzip?

推荐答案

加载时间

可以在初始HTTP请求的响应中交付应用程序的呈现视图.在传统的单页Web应用程序中，第一个请求将返回，浏览器将解析HTML，然后对脚本进行后续请求-最终将呈现页面.这些请求仍然会发生，但是它们永远不会妨碍用户查看初始数据.

Load Times

A rendered view of the application can be delivered in the response of the initial HTTP request. In a traditional single page web app, the first request would come back, the browser would parse the HTML, then make subsequent requests for the scripts — which would eventually render the page. Those requests will still happen, but they won't ever get in the way of the user seeing the initial data.

这对快速互联网连接没有太大影响，但是对于网络覆盖率较低的移动设备上的用户而言，这种初始数据渲染可以使应用程序渲染速度提高20-30秒.

This doesn't make much difference on quick internet connections, but for users on mobiles in low network coverage areas, this initial rendering of data can make apps render 20-30 seconds faster.

具有静态数据的视图也可以在网络级别缓存，这意味着可以以很少的计算开销为React应用程序的渲染视图提供服务

Views with static data can also be cached at a network level, meaning that a rendered view of a React application can be served with very little computational overhead

当搜索引擎搜寻器到达网页时，将提供HTML，并检查静态内容并建立索引.在纯客户端Javascript应用程序中，没有静态内容.一旦加载并运行了适当的脚本，便会动态创建并注入所有文件.

When a search engine crawler arrives at a web page, the HTML is served and the static content is inspected and indexed. In a purely client side Javascript application, there is no static content. It is all created and injected dynamically once the appropriate scripts load and run.

与React不同，大多数框架无法将其组件图序列化为HTML，然后对其进行重新充气.他们必须使用更复杂的方法，该方法通常涉及在无头浏览器处呈现页面.服务器，然后在搜寻器请求时提供该版本.

Unlike React, most frameworks have no way of serialising their component graph to HTML and then reinflating it. They have to use a more convoluted approach, which often involves rendering their page in a headless browser at the server, then serving up that version whenever a crawler requests it.

React只能将组件树从服务器端JS环境(例如Node.js)呈现为HTML字符串，然后立即将其提供.无需无头浏览器或其他复杂功能.

React can just render the component tree to a HTML string from a server side JS environment such as Node.js, then serve that straight away. No need for headless browsers or extra complications.

它还允许您编写正常降级并最终可以用作精简版的应用程序客户.这意味着处理在服务器上进行，并且可以在禁用Javascript的浏览器中使用该应用程序.那是否是一个重要的市场需要再讨论一次.

It also allows you to write applications which gracefully degrade and ultimately, can be used as thin clients. This means that the processing goes on at the server and the application can be used in a browser with Javascript disabled. Whether or not that's an important market to consider is a debate for another time.

这篇关于为什么要使用React服务器端渲染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！