Jua*_*tiz 1 javascript single-page-application reactjs react-router server-side-rendering
我知道在客户端,React 会重新渲染需要随时更新的 DOM 部分,因此在初始页面加载后无需重新加载整个页面(因此它将是一个页面应用程序)。
使用服务器端渲染,我仍然使用单页应用程序功能吗?
关于这个话题有一个类似的问题,但我相信它没有回答我的问题。如果要实现单页应用,是否必须同时使用服务器端和客户端渲染?
是的,您仍然可以使用单页功能。服务器渲染是指在发送到客户端之前填充渲染的初始 html 页面。在客户端渲染中,未填充的 html 文件会发送到客户端,在大多数情况下,该文件看起来像这样
<html>
<body>
<div id="app"/>
<body>
</html>
Run Code Online (Sandbox Code Playgroud)
React 将在加载 js 文件并向服务器查询数据后填充此 html 页面的内容。这样做的问题是网络爬虫将无法爬行网页,因为爬虫唯一能看到的是上面没有内容的文件。因此,在服务器端渲染中,html 文件的内容在发送到客户端之前就已填充。此后,html 文件的其余填充将照常进行。
服务器端呈现和客户端呈现之间的唯一区别在于网页的初始呈现发生的位置。其余的效果图发生在客户端本身
如果你希望有一个带有 ReactJS 的单页应用程序,你必须让你的代码在客户端运行。就单页应用程序而言,服务器端呈现是可选的。
React 根据状态确定 HTML 应该是什么。单页应用意味着我们只加载一次页面,它会根据需要进行更新,而无需从服务器请求重新加载整个页面。为了有一个单页应用程序,我们必须将 React 加载到浏览器(客户端),以便 React 可以动态更新 HTML 的部分,而无需重新加载整个页面。
服务器是一台远程计算机,我们的本地计算机必须通过互联网与它联系才能从中获取数据。如果 react 在服务器(服务器端)上运行,它可以先渲染 HTML,然后通过 Internet 将其发送到我们的计算机。
客户端是我们自己的本地计算机。如果服务端不把 ReactJS 发给客户端加载,只发送 HTML,那么每次客户端想要改变状态,就得联系服务端,要求它提供新的 HTML,必须做一个完整的-页面重新加载。但是,如果我们在客户端加载了我们的 ReactJS 代码,那么它就会知道如何根据状态更新 HTML 的部分,而无需联系服务器。
对于单页应用程序,您需要的只是在客户端运行的反应代码,以便浏览器可以呈现和更新页面的部分内容,而无需从服务器请求整个页面。进行服务器端渲染是可选的。
如果没有服务器端渲染,服务器会首先将所有反应代码发送到浏览器。然后浏览器必须加载它。然后它必须运行它。然后它会渲染页面以显示给用户。
使用服务器端渲染,服务器已经加载了代码。一旦浏览器请求页面,服务器就会发送呈现的 HTML,因此浏览器无需等待代码加载并运行即可向用户显示内容。用户将立即看到呈现的应用程序。
服务器端渲染还有助于搜索引擎优化,因为它允许搜索引擎将您的应用程序作为静态页面进行抓取和索引,而无需运行客户端 javascript 代码来获取代表您应用程序的 html。
| 归档时间: |
|
| 查看次数: |
2723 次 |
| 最近记录: |