web 开发里 SSR,CSR 和 SSG 的区别
2023-06-13 09:13:50 时间
本文介绍这三种 Web 前端开发领域中的术语的区别。
CSR - Client Side Rendering
一种在浏览器上执行 JavaScript 以生成 DOM 并在挂载后显示内容的方法。
页面初始加载不显示任何内容,hydration 完成后显示。
使用 Create React App 工具库创建的 React 应用程序以这种方式呈现。
SSR - Server Side Rendering
一种在服务器端评估和执行组件并以 HTML 和最少的 JavaScript 交付结果的方法。
每次向服务器发出请求时,都会在服务器端处理并生成 HTML。
Nuxt.js、Next.js 等都是这样渲染的。
内容从初始加载开始显示,然后通过 Hydration 变为交互式。 (例如, <Link />
使其可跳转)
它被认为具有比 CSR 更好的性能和 SEO 友好。
SSG - Server Side Generation
与 SSR 一样,HTML 首先在服务器端生成。
SSG 和 SSR 的区别在于 HTML 是在构建
时生成的,而内容是在每次发出请求时从 CDN 交付的。
这用于静态页面,例如博客、帮助站点和电子商务产品列表。
SSG 具有比 SSR 更好的性能,因为 HTML 是在构建时生成的。
默认情况下,Next.js 预渲染每个页面。 这意味着 Next.js 会提前为每个页面生成 HTML,而不是全部由客户端 JavaScript 完成。 预渲染可以带来更好的性能和 SEO。
每个生成的 HTML 都与该页面所需的最少 JavaScript 代码相关联。 当浏览器加载页面时,其 JavaScript 代码将运行并使页面处于完全可交互状态,这个过程称为 Hydration.
如何选择这三种渲染方式?
可以在用户请求之前预渲染页面吗?
如果是,请使用 SSG。
如果不是,请使用 SSR 或 CSR。
相关文章
- 移动web)开发(4)之携程案例
- 不会前端没事,用GWT Boot和Spring Boot构建Web程序
- 2022-12-27:etcd是无界面的,不好看,joinsunsoft/etcdv3-browser是etcd的web可视化工具之一。请问在k3s中部署,ya
- pwnhub_another php web部分
- 资深Web开发的经验之谈:为什么你开发的网页不应该大于14KB?
- 电子书丨《OpenResty完全开发指南:构建百万级别并发的Web应用》
- linux(center OS7)安装JDK、tomcat、mysql 搭建java web项目运行环境
- 构建未来:Linux 架构的Web 开发(linux架构web)
- PHP路径指定web路径的方法详解编程语言
- 和web服务器比较Linux与Web服务器的区别(怎么分辨linux)
- 使用 Selenium 自动化 Web 浏览器
- 开源 Web 应用最常见漏洞是 XSS 和 SQLI 漏洞
- 使用ASP与MongoDB构建高效Web应用程序(aspmongodb)
- Linux新版本发布,让你的Web项目发布更简单!(linux发布web项目)
- php基于ApachMysqlphp的Web开发实现技术(apach mysql)
- Redis在Web工程中的突破性发展(web工程 redis)
- 解锁Oracle Web登陆就在你身边(oracle web登陆)
- 动态网站web开发PHP、ASP还是ASP.NET
- 用php写的serv-u的web申请账号的程序
- Web跨浏览器进程通信(Web跨域)
- 采用memcache在web集群中实现session的同步会话