react的ssr项目是什么

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

react的ssr项目是什么

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

react的ssr项目是什么

SSR:Server Side Rendering

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

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

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

为什么使用 SSR

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

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

笔目鱼英文论文写作器
笔目鱼英文论文写作器

写高质量英文论文,就用笔目鱼

笔目鱼英文论文写作器 87
查看详情 笔目鱼英文论文写作器

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

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

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

SSR 工作流程

08.png

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

推荐学习:《react视频教程

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

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号