reactjs - 试图了解同构反应应用程序应该如何进行客户端路由

Question

请原谅我的英语，它是第二语言。与常规客户端 SPA 相比，同构应用程序的全部意义在于，客户端最初不必下载整个 JS 文件，这会导致初始加载时间非常慢。

我一直在尝试自学服务器端渲染的 React，在观看了无数关于这个概念的视频和无数关于实际实现的教程之后，我仍然无法理解这一点（至少我是这样理解的):

尽管服务器在 url 更改时有条件地渲染页面并向客户端发送 props，但客户端仍然使用包含应用程序所有入口点的路由器（通过要求所有入口点，然后根据 url 位置加载文件） . 这是否意味着所有文件都包含在主客户端 JS 文件中，因为客户端路由器已经需要它？这不会破坏服务器渲染的 React 的全部目的吗？还是我想错了？

简而言之，同构 React 应用程序如何真正与包含（通过要求）应用程序所有入口点的客户端路由器一起工作？

Answer 1

我不确定“同构应用程序的全部意义 [...] 是为了让客户端不必最初下载整个 JS 文件，这会导致初始加载时间非常慢”一定是正确的。我认为人们这样做的主要原因是出于搜索引擎优化的原因和改善感知加载时间。您仍然可以在用户必须加载所有 JavaScript 之前向他们显示页面（例如，是的，他们必须加载所有 JS，但没关系，因为他们已经拥有大部分/所有内容）。该应用程序透明地升级到 SPA，为用户提供无缝体验。

也就是说，您可以实现一个系统，您不必使用webpack 的代码拆分之类的东西一次加载所有 JS 。甚至还有一个简单的 React Router 示例可以做到这一点。