>首页> IT >

react的ssr项目是什么

时间:2022-04-19 11:16:33       来源:PHP中文网

本教程操作环境:Windows10系统、react17.0.1版、Dell G3电脑。

react的ssr项目是什么

SSR:Server Side Rendering

数据和 HTML 的拼接是在服务器端完成的,客户端向服务器端发送请求,服务器端返回拼接好的 HTML,客户端只需将其显示出来。

现在很多的前端项目都是单页应用,为了良好的用户体验和前后端分离,我们会单独创建独立的客户端程序。现在已经有了很多成熟的构建客户端应用程序的框架,我们可以直接拿来使用并加以修改成项目需要的,当然,我们也可以完全根据自己的需求去搭建。

默认情况下,可以在浏览器中输出组件,进行生成 DOM 和操作 DOM 来实现用户交互。然而,有时候也可以将同一个组件渲染为服务器端的 HTML 字符串,将它们直接发送到浏览器,最后将这些静态标记"激活"为客户端上完全可交互的应用程序,这就是服务器端渲染。

为什么使用 SSR

与传统 SPA (单页应用程序 (Single-Page Application)) 相比,服务器端渲染 (SSR) 的优势主要在于:

更好的 SEO,由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。

单页应用的页面都是通过 ajax 去请求数据,动态生成页面,而搜索引擎爬虫因为不能抓取JS生成后的内容,遇到单页应用项目,什么都抓取不到,不利于 SEO,而 SSR 会在服务器端生成页面发送到客户端,查看的是完整的页面,对于像 about 、contact 页等的页面更加方便 SEO。

解决首屏白屏问题。对于缓慢的网络情况或运行缓慢的设备,无需等待所有的 JavaScript 都完成下载并执行,才显示服务器渲染的标记,所以你的用户将会更快速地看到完整渲染的页面。通常可以产生更好的用户体验。

单页应用在第一次加载时,需要将一个打包好(requirejs 或 webpack 打包)的 js 发送到浏览器后,才能启动应用,这样会有些慢。如果在服务器端就预先完成渲染网页后,直接发送到浏览器,这样用户将会更快速地看到完整的渲染的页面,通常会产生更好的用户体验。

SSR 工作流程

由上图可以看到,服务端只生成 HTML 代码,而前端会生成一份 main.js 提供给服务端的 HTML 使用。这就是 React SSR 的工作流程。

推荐学习:《react视频教程》

以上就是react的ssr项目是什么的详细内容,更多请关注php中文网其它相关文章!

关键词: 服务器端 用户体验 应用程序