react中ssr项目指的是什么

这篇文章主要介绍“react中ssr项目指的是什么”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“react中ssr项目指的是什么”文章能帮助大家解决问题。

在react中，ssr是“Server Side Rendering”的缩写，是服务器端渲染的意思；数据和HTML的拼接是在服务器端完成的，客户端向服务器端发送请求，服务器端返回拼接好的HTML，客户端只需将其显示出来。

本教程操作环境：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中ssr项目指的是什么”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注亿速云行业资讯频道，小编每天都会为大家更新不同的知识点。