javascript - 使用服务器端和客户端渲染的单页 ReactJS 应用程序？

Question

据我了解，在客户端，React 会在状态发生变化时重新渲染需要更新的 DOM 部分，因此无需在初始页面加载后重新加载整个页面(因此将是单页应用程序)。

通过服务器端渲染，我仍然可以使用单页应用程序功能吗？

有一个similiar question关于这个话题，但我相信它没有回答我的问题。如果我想实现单页应用，是否必须同时使用服务器端和客户端渲染？

Answer 1

关于单页应用以及服务器端与客户端渲染

如果您希望使用 ReactJS 开发单页应用程序，您必须在客户端运行您的 React 代码。就单页应用程序而言，服务器端渲染是可选的。

React 根据状态确定 HTML 应该是什么。单页面应用程序意味着我们加载页面一次，它将根据需要进行更新，而无需从服务器请求整个页面重新加载。为了拥有一个单页面应用程序，我们必须将 React 加载到浏览器(客户端)中，以便 React 可以动态更新 HTML 部分，而无需重新加载整个页面。

服务器是一台远程计算机，我们的本地计算机必须通过互联网联系它才能从中获取数据。如果react运行在服务器(服务器端)上，它可以首先渲染HTML，然后通过互联网将其发送到我们的计算机。

客户端是我们自己的本地计算机。如果服务器不发送ReactJS给客户端加载，只发送HTML，那么每次客户端想要改变状态时，它都必须联系服务器并请求新的HTML，必须做一个完整的处理-页面重新加载。但是，如果我们在客户端加载 ReactJS 代码，那么它将知道如何根据状态更新 HTML 部分，而无需联系服务器。

对于单页面应用程序，您所需要的只是在客户端运行的 React 代码，以便浏览器可以渲染和更新页面的部分内容，而无需从服务器请求完整页面。可以选择进行服务器端渲染。

服务器端渲染的好处

如果没有服务器端渲染，服务器将首先将所有反应代码发送到浏览器。然后浏览器必须加载它。然后它必须运行它。然后它会渲染页面以向用户显示。

通过服务器端渲染，服务器已经加载了代码。一旦浏览器请求该页面，服务器就会发送呈现的 HTML，因此浏览器无需等待代码加载并运行即可向用户显示某些内容。用户将立即看到渲染的应用程序。

服务器端渲染还有助于搜索引擎优化，因为它允许搜索引擎将您的应用程序作为静态页面进行抓取和索引，而无需运行客户端 JavaScript 代码来获取代表您的应用程序的 html。