使用服务器端和客户端渲染的单页 ReactJS 应用程序？
Posted
技术标签:
【中文标题】使用服务器端和客户端渲染的单页 ReactJS 应用程序？【英文标题】：Single-page ReactJS app using both server-side and client-side rendering? 【发布时间】：2018-07-10 03:27:50 【问题描述】：我了解在客户端，React 会重新渲染 DOM 中需要在任何时候状态更改时更新的部分，因此在初始页面加载后无需重新加载整个页面（因此它将是单页应用）。
使用服务器端渲染，我是否还有这个单页应用功能？
关于这个话题有一个similiar question，但我相信它不能回答我的问题。如果要实现单页应用，是不是必须同时使用服务端和客户端渲染？
【问题讨论】：
要实现单页应用，客户端渲染就够了。网站之所以做同构渲染（服务器端渲染，客户端渲染）是因为性能和SEO。 【参考方案1】：是的，您仍将拥有单页功能。服务器渲染是在发送到客户端之前填充渲染的初始 html 页面。在客户端渲染中，未填充的 html 文件被发送到客户端，在大多数情况下看起来像这样
<html>
<body>
<div id="app"/>
<body>
</html>
在加载 js 文件并查询服务器数据后，React 将填充此 html 页面的内容。这样做的问题是网络爬虫将无法爬过网页，因为爬虫只会看到上面没有内容的文件。因此，在服务器端渲染中，html 文件的内容在发送到客户端之前会被填充。在此之后，html 文件的其余填充将照常进行。
服务器端渲染和客户端渲染之间的唯一区别是网页的初始渲染发生在哪里。其余的渲染发生在客户端本身
【讨论】：
【参考方案2】：关于单页应用和服务器端与客户端渲染
如果您希望拥有一个带有 ReactJS 的单页应用程序，您必须让您的反应代码在客户端运行。就单页应用而言，服务器端呈现是可选的。
React 根据状态决定 HTML 应该是什么。单页应用程序意味着我们只加载一次页面，它会根据需要进行更新，而无需从服务器请求重新加载整个页面。为了拥有单页应用，我们必须将 React 加载到浏览器（客户端）中，以便 React 可以动态更新 HTML 的各个部分，而无需重新加载整个页面。
服务器是一台远程计算机，我们的本地计算机必须通过 Internet 联系它以从中获取数据。如果 react 在服务器（服务器端）上运行，它可以先渲染 HTML，然后通过 Internet 将其发送到我们的计算机。
客户端是我们自己的本地计算机。如果服务端没有将 ReactJS 发送给客户端加载，而只发送 HTML，那么客户端每次想要改变状态时，都必须联系服务端并要求它提供新的 HTML，必须做一个完整的-页面重新加载。但是，如果我们在客户端加载了 ReactJS 代码，那么它将知道如何根据状态更新 HTML 的各个部分，而无需联系服务器。
对于单页应用程序，您只需要在客户端运行反应代码，以便浏览器可以呈现和更新部分页面，而无需从服务器请求整个页面。进行服务器端渲染是可选的。
服务器端渲染的好处
如果没有服务器端渲染，服务器将首先将所有反应代码发送到浏览器。然后浏览器必须加载它。然后它必须运行它。然后它会渲染页面以显示给用户。
使用服务器端渲染，服务器已经加载了代码。一旦浏览器请求页面，服务器就会发送呈现的 HTML，因此浏览器无需等待代码加载并运行即可向用户显示某些内容。用户将立即看到呈现的应用程序。
服务器端渲染还有助于搜索引擎优化，因为它允许搜索引擎将您的应用程序作为静态页面进行抓取和索引，而无需运行客户端 javascript 代码来获取代表您的应用程序的 html。
【讨论】：
以上是关于使用服务器端和客户端渲染的单页 ReactJS 应用程序？的主要内容，如果未能解决你的问题，请参考以下文章
使用 AngularJS 和 Spring Security 的单页应用程序中需要 AntMatchers
App Engine + Polymer.dart 带有 hashbang 的单页 Web 应用路由