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

Question

我了解到，在客户端，React会在状态更改时随时重新渲染需要更新的DOM部分，因此无需在初始页面加载后重新加载整个页面（因此它将是单个页面应用）。

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

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

Answer 1

是的，您仍将具有单页功能。 服务器渲染是指在将要渲染的初始html页面发送到客户端之前对其进行填充。 在客户端渲染中，未填充的html文件发送到客户端，在大多数情况下，该文件看起来像这样

<html>
 <body>
  <div id="app"/>
 <body>
</html>

在加载js文件并向服务器查询数据后，React将填充此html页面的内容。 问题在于网络爬虫将无法爬网网页，因为爬虫唯一会看到的就是上面没有内容的文件。 因此，在服务器端渲染中，在将html文件的内容发送到客户端之前，先对其进行填充。 此后，其余的html文件填充将照常进行。

服务器端渲染和客户端端渲染之间的唯一区别是网页的初始渲染发生的位置。 其余的渲染图发生在客户端本身中

Answer 2

关于单页面应用程序和服务器端与客户端渲染

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

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

该服务器是一台远程计算机，我们的本地计算机必须通过Internet与之联系才能从中获取数据。 如果react在服务器（服务器端）上运行，它可以先呈现HTML，然后通过Internet将其发送到我们的计算机。

客户端是我们自己的本地计算机。 如果服务器没有将ReactJS发送给客户端以进行加载，而仅发送HTML，那么每次客户端要更改状态时，它都必须与服务器联系并要求其提供新的HTML，这需要做一个完整的工作。页重新加载。 但是，如果我们在客户端上加载了ReactJS代码，那么它将知道如何根据状态更新HTML的各个部分而无需联系服务器。

对于单页应用程序，您需要做的是在客户端运行反应代码，以便浏览器可以呈现和更新部分页面，而无需从服务器请求整个页面。 服务器端渲染是可选的。

服务器端渲染的好处

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

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

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

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

问题描述

2 个解决方案

解决方案1
4 已采纳 2018-01-31 06:18:57

解决方案2
4 2018-01-31 06:31:08

关于单页面应用程序和服务器端与客户端渲染

服务器端渲染的好处

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

问题描述

2 个解决方案

解决方案1 4 已采纳 2018-01-31 06:18:57

解决方案2 4 2018-01-31 06:31:08

关于单页面应用程序和服务器端与客户端渲染

服务器端渲染的好处

解决方案1
4 已采纳 2018-01-31 06:18:57

解决方案2
4 2018-01-31 06:31:08