回答react的ssr项目是什么

 所属分类:web前端开发

 浏览:141次-  评论: 0次-  更新时间:2022-10-31
描述:更多教程资料进入php教程获得。 在react中,ssr是“Server Side Rendering”的缩写,是服务器端渲染的意思;ssr是将同一个组件渲染为服务...
更多教程资料进入php教程获得。

在react中,ssr是“Server Side Rendering”的缩写,是服务器端渲染的意思;ssr是将同一个组件渲染为服务器端的HTML字符串并发送到浏览器,将这些静态标记"激活"为客户端上完全可交互的应用程序。

前端(vue)入门到精通课程:进入学习
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API调试工具:点击使用

本教程操作环境: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 工作流程

08.png

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

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

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

 标签: react,
积分说明:注册即送10金币,每日签到可获得更多金币,成为VIP会员可免金币下载! 充值积分充值会员更多说明»

讨论这个素材(0)回答他人问题或分享使用心得奖励金币

〒_〒 居然一个评论都没有……

表情  文明上网,理性发言!