reactjs - 具有代码分割功能的 React ssr 和现在的 React.Lazy 的优缺点

Question

我对 ssr 和代码分割以及仅在客户端上完成的代码分割的优点有点困惑。

我的想法是，服务器首先渲染页面将带来更好的体验，而无需解析所有 JavaScript，然后再进行服务器渲染。

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

React.Lazy 强调，react.client 全部在客户端完成。它与服务器上的代码分割有何不同。如果您转到特定路线，那么您会检索该 block 以进行第一次渲染吗？

我知道 React.Lazy 都是在客户端完成的，他们确实这么说。如果在服务器上完成会有什么不同。

代码分割对 ssr 有什么真正的好处吗？这不仅增加了复杂性吗？

Answer 1

tl;博士

根据您的用例，您可以仅使用 SSR、仅使用代码分割或根据需要组合两者。

SSR 的优点

1. 更好的 SEO，因为搜索机器人可以使用标记(不一定依赖于执行 JavaScript)来建立索引。

2. 更快的初始渲染由于标记是从服务器发送的，因此浏览器不必等待执行 JavaScript 来渲染它。 (尽管标记仍然缺乏交互性，直到客户端进行水合 react 为止)。

3. 首先交付关键 CSS。初始页面渲染的关键 CSS 可以内联，从而获得更好的用户体验，因为加载的标记已经准备好样式。

4. 更简单的路线分割。 SSR imo 使您可以更轻松地推理应用程序的路由拆分。例如，您可能有不同的 /about 和 /home 页面，您可以将其路由拆分以减少包大小(如果需要，还可以在客户端预加载其他路由)。

将代码拆分组件和 SSR 结合起来

可能不需要服务器渲染整个页面。例如，假设您的主页(您希望在服务器上呈现)包含一个 Chat 组件，以便用户可以直接向您提问。

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

当浏览器解析标记后，它会在主包之后加载您的 Chat 组件。这样您就可以识别并控制您的 bundle 大小。

仅使用代码分割

如果您对 SSR 的好处不感兴趣，那么在我看来，这是构建应用程序的完美方法。

例如，如果您的应用程序是经过身份验证的用户的用户仪表板，那么最好完全不用担心 SSR，而只需对应用程序进行代码拆分。另请注意，服务器渲染您的应用程序将花费更多时间在服务器上发送响应(而不是普通的 REST API)，因为必须生成标记。

回答您的问题:

I am confused how code splitting fits into the ssr model, is it that ssr renders the first hit and then code splitting is done thereafter on the client?

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

How would it differ from code splitting on the server. Is that if you go to a specific route then you retrieve that chunk for the first render?

lazy 只是一个更干净的 API，支持用于代码分割的 Suspense。理想情况下，当第一次加载路由时，您将在服务器上渲染初始标记，然后让客户端负责加载下一个位和路由。伊莫 Next.js这确实做得很好。

How would it differ if it was done on the server.

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

Is there any real benefit to ssr with code splitting. Does it not just add complexity?

在我看来，一切都有自己的权衡。正如我在仅使用代码拆分部分中提到的，如果您的用例不需要 SSR 的优点，那么仅使用代码拆分是完全可以的。

Note

Currently lazy (in React v16.6.1) doesn't support SSR completely. You might want to check out react-loadable to handle the cases where you wish to preload components server side.