web 开发里 SSR,CSR 和 SSG 的区别

简介: web 开发里 SSR,CSR 和 SSG 的区别
+关注继续查看

本文介绍这三种 Web 前端开发领域中的术语的区别。


CSR - Client Side Rendering


一种在浏览器上执行 JavaScript 以生成 DOM 并在挂载后显示内容的方法。


页面初始加载不显示任何内容,hydration 完成后显示。


使用 Create React App 工具库创建的 React 应用程序以这种方式呈现。


image


SSR - Server Side Rendering


一种在服务器端评估和执行组件并以 HTML 和最少的 JavaScript 交付结果的方法。


每次向服务器发出请求时,都会在服务器端处理并生成 HTML。


Nuxt.js、Next.js 等都是这样渲染的。


内容从初始加载开始显示,然后通过 Hydration 变为交互式。 (例如, <Link /> 使其可跳转)


它被认为具有比 CSR 更好的性能和 SEO 友好。


image

image



SSG - Server Side Generation


与 SSR 一样,HTML 首先在服务器端生成。


SSG 和 SSR 的区别在于 HTML 是在构建时生成的,而内容是在每次发出请求时从 CDN 交付的。


这用于静态页面,例如博客、帮助站点和电子商务产品列表。


SSG 具有比 SSR 更好的性能,因为 HTML 是在构建时生成的。


image

默认情况下,Next.js 预渲染每个页面。 这意味着 Next.js 会提前为每个页面生成 HTML,而不是全部由客户端 JavaScript 完成。 预渲染可以带来更好的性能和 SEO。


每个生成的 HTML 都与该页面所需的最少 JavaScript 代码相关联。 当浏览器加载页面时,其 JavaScript 代码将运行并使页面处于完全可交互状态,这个过程称为 Hydration.


如何选择这三种渲染方式?


可以在用户请求之前预渲染页面吗?


如果是,请使用 SSG。


如果不是,请使用 SSR 或 CSR。



处理一个客户 SSR timeout 的问题,在其实现里请求一个 json 文件,需要将近1分钟才能返回。

相关文章
|
3天前
|
机器学习/深度学习 数据采集 人工智能
Python可以应用于多个领域,如Web开发、数据分析、机器学习等
Python可以应用于多个领域,如Web开发、数据分析、机器学习等
|
4天前
|
机器学习/深度学习 数据挖掘 物联网
Python Web开发:构建现代Web应用的综合指南
Python Web开发:构建现代Web应用的综合指南
35 1
|
14天前
|
SQL 关系型数据库 MySQL
GO web 开发 实战三,数据库预处理
GO web 开发 实战三,数据库预处理
|
14天前
|
存储 移动开发 搜索推荐
Web开发中会话跟踪的方法有哪些?
Web开发中会话跟踪的方法有哪些?
16 0
|
14天前
|
关系型数据库 MySQL Go
GO web 开发 实战二,数据库相关
GO web 开发 实战二,数据库相关
|
15天前
|
Web App开发 缓存 前端开发
Angular 应用支持 PWA(Progressive Web Application) 特性的开发步骤分享
Angular 应用支持 PWA(Progressive Web Application) 特性的开发步骤分享
17 0
|
19天前
|
前端开发 Java 数据库连接
学习Java Web开发的关键技术和概念
学习Java Web开发的关键技术和概念
|
22天前
|
开发者 Python
Web开发与Python:Django和Flask框架比较
在Python的Web开发领域,Django和Flask是两个备受欢迎的框架,它们都提供了一系列工具和功能来简化Web应用程序的开发。本文将比较Django和Flask框架,帮助你选择适合你项目需求的框架。
|
22天前
|
移动开发 前端开发 JavaScript
JavaScript简介:探索Web开发中的魔力
JavaScript简介:探索Web开发中的魔力
19 0
|
25天前
|
数据处理
构建高效响应数据:掌握R工具类,轻松驾驭Web开发世界!
构建高效响应数据:掌握R工具类,轻松驾驭Web开发世界!
11 0
相关产品
云迁移中心
推荐文章
更多