使用服务器端和客户端呈现的单页ReactJS应用程序?

时间:2018-01-31 05:30:57

标签: javascript reactjs react-router single-page-application serverside-rendering

据我所知,在客户端,React将重新呈现需要在状态更改时随时更新的DOM部分,因此在初始页面加载后无需重新加载整个页面(因此它将是单页应用程序)。

使用服务器端呈现,我仍然可以使用此单页应用功能吗?

关于此主题有一个similiar question,但我认为它没有回答我的问题。如果我想实现单页面应用程序,是否必须同时使用服务器端和客户端呈现?

2 个答案:

答案 0 :(得分:4)

是的,您仍然可以使用单页功能。服务器呈现是指在发送到客户端之前填充的初始html页面。在客户端渲染中,一个未填充的html文件被发送到客户端,在大多数情况下会看起来像这样

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

在加载js文件并查询服务器以获取数据后,React将填充此html页面的内容。这样做的问题是,网页抓取工具无法抓取网页,因为抓取工具将会看到的唯一内容是没有内容的上述文件。因此,在服务器端渲染中,html文件的内容在发送到客户端之前会被填充。在此之后,html文件的其余部分将像往常一样发生。

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

答案 1 :(得分:3)

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

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

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

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

客户端是我们自己的本地计算机。如果服务器没有将ReactJS发送到客户端加载,只发送HTML,那么每次客户端想要更改状态时,都必须联系服务器并要求它提供新的HTML,不得不这样做整页重新加载。但是,如果我们在客户端上加载了ReactJS代码,那么它将知道如何根据状态更新HTML的各个部分,而无需联系服务器。

对于单页应用程序,您只需要响应客户端上运行的代码,以便浏览器可以呈现和更新页面的各个部分,而无需从服务器请求完整页面。可以选择进行服务器端渲染。

服务器端呈现的好处

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

使用服务器端呈现,服务器已经加载了代码。一旦浏览器请求页面,服务器就会发送呈现的HTML,因此浏览器在向用户显示某些内容之前不需要等待代码加载和运行。用户将立即看到呈现的应用程序。

服务器端呈现也有助于搜索引擎优化,因为它允许搜索引擎将您的应用程序作为静态页面进行爬网和索引,而无需运行客户端javascript代码来获取代表您的应用程序的html。