反应ssr与代码分裂的优点和常量,现在是React.Lazy

Question

我对ssr和代码拆分的优点以及仅在客户端上完成的代码拆分略感困惑.

我的想法是,首先渲染页面的服务器将导致更好的体验,而不必解析所有的javascript然后再渲染服务器.

我很困惑代码拆分如何适应ssr模型,是ssr渲染第一个命中,然后在客户端上完成代码拆分？

React.Lazy指出react.client是在客户端上完成的.它与服务器上的代码拆分有何不同？如果你去一个特定的路线然后你为第一次渲染检索那个块？

我理解React.Lazy都是在客户端完成的,他们已经明确表达了这一点.如果在服务器上完成它会有什么不同.

使用代码拆分对ssr有什么好处.它不只是增加了复杂性吗？

Answer 1

TL;博士

根据您的用例,您可以仅使用SSR,仅根据需要进行代码拆分或组合.

SSR的优点

1. 更好的SEO因为搜索机器人有标记可以使用(并且不一定依赖于执行javascript)进行索引.

2. 自从服务器发送标记以来,初始渲染速度更快,浏览器不必等待执行javascript来渲染它.(虽然标记仍然缺乏交互性,直到反应是水合客户端).

3. 首先提供关键的CSS.初始页面呈现的关键CSS可以是内联的,更好的用户体验,因为加载的标记已经准备好了样式.

4. 更简单的路由分裂.SSR imo使得分解应用程序的路由变得更加简单.例如,你可能有不同的页面/about和/home它们可以对路线分割以减小束尺寸(和如果需要的话在客户端预加载其他途径).

结合代码拆分组件和SSR

服务器可能没有必要呈现整个页面.例如,考虑您的主页(您希望服务器渲染)包含一个Chat组件,以便用户可以直接向您提问.

如果此组件很大,您可能决定不对服务器进行渲染,以便用户可以首先获取页面中最重要的部分.这将通过在主页组件中拆分此组件的代码来减少初始页面加载.

当浏览器解析了标记时,它会Chat在主包之后加载您的组件.通过这种方式,您可以识别并保持捆绑包的大小.

仅使用代码拆分

如果您对SSR的好处不感兴趣,这是构建应用程序的完美方式.

例如,如果您的应用程序是经过身份验证的用户的用户仪表板,那么最好不要担心SSR,只需将代码拆分为应用程序.另请注意,由于必须生成标记,因此呈现应用程序的服务器将花费更多时间在服务器上发送响应(而不是简单的REST API).

来你的问题:

我很困惑代码拆分如何适应ssr模型,是ssr渲染第一个命中,然后在客户端上完成代码拆分？

是的,有点.在客户端负责加载必要的位之后,浏览器从服务器接收初始加载.现在,您可以决定预加载组件服务器端并发送所有内容(请检查react-loadable我在本答复结尾处提到的内容).

它与服务器上的代码拆分有何不同？如果你去一个特定的路线然后你为第一次渲染检索那个块？

lazy只是一个更清晰的API,支持Suspense代码分割.理想情况下,在第一次加载路由时,您将服务器呈现初始标记,然后让客户端负责加载下一个位和路由.Imo Next.js做得非常好.

如果在服务器上完成它会有什么不同.

您可以预加载所有组件或仅预加载必要的位.请检查拆分组件和SSR部分的组合代码.

使用代码拆分对ssr有什么好处.它不只是增加了复杂性吗？

在这里,一切都有自己的权衡.正如我在" 仅使用代码分割"部分中提到的,如果您的用例不需要SSR的优点,那么完全可以使用代码分割.

注意

目前lazy(在React v16.6.1中)不完全支持SSR.您可能想要检查react-loadable以处理您希望预加载组件服务器端的情况.