当前位置：首页 > 科技 > 软件

一文搞懂：什么是SSR、SSG、CSR？前端渲染技术全解析

来源：责编：时间：2024-05-16 17:43:53 91观看

导读在前端开发的世界里，我们经常遇到SSR（服务器端渲染）、SSG（静态站点生成）和CSR（客户端渲染）这三种渲染技术。它们各自有着独特的优缺点，适用于不同的场景和需求。下面，我们将详细介绍这三种技术，并通过代码示例来加深理解。一、C

在前端开发的世界里，我们经常遇到SSR（服务器端渲染）、SSG（静态站点生成）和CSR（客户端渲染）这三种渲染技术。它们各自有着独特的优缺点，适用于不同的场景和需求。下面，我们将详细介绍这三种技术，并通过代码示例来加深理解。

一、CSR（客户端渲染）

介绍：

CSR（Client-Side Rendering）是前端开发中最常见的渲染方式。在这种模式下，服务器主要负责提供静态的HTML文件（可能包含一些基本的HTML结构和JavaScript脚本），而真正的页面渲染工作则完全由客户端的浏览器来完成。这意味着页面内容是在用户的浏览器上动态生成的。

优点：

响应速度快：一旦HTML文件加载完成，浏览器就可以开始渲染页面，而不需要等待服务器返回完整的渲染结果。
动态性强：由于页面渲染在客户端进行，因此可以方便地实现各种动态交互效果。
前端部署简单：只需要一个静态服务即可部署前端代码，降低了部署成本。

缺点：

首屏加载时间长：由于需要加载整个JavaScript包，可能导致首屏加载时间较长，特别是对于复杂的单页应用（SPA）。
不利于SEO：搜索引擎爬虫可能无法很好地解析由JavaScript动态生成的页面内容，导致SEO效果较差。
白屏时间：在JavaScript代码加载和执行期间，用户可能会看到空白的页面，即所谓的“白屏时间”。

示例（使用React）：

// 假设有一个React组件import React from 'react';function MyComponent() {  const [message, setMessage] = React.useState('Hello, CSR!');  const handleClick = () => {    setMessage('Clicked!');  };  return (    <div>      <p>{message}</p>      <button onClick={handleClick}>Click Me</button>    </div>  );}// 在HTML文件中引入React和组件的JavaScript文件// 浏览器加载并执行这些JavaScript，从而渲染页面

二、SSR（服务器端渲染）

介绍：

SSR（Server-Side Rendering）是一种在服务器端完成页面渲染的技术。在这种模式下，服务器接收到客户端的请求后，会先根据请求数据和模板文件生成完整的HTML页面，然后将这个页面直接发送给客户端。这样，用户可以直接看到完成的内容，无需等待JavaScript加载和执行。

优点：

首屏加载速度快：由于服务器已经生成了完整的HTML页面，因此客户端可以直接显示这个页面，无需等待JavaScript加载和执行。
SEO友好：搜索引擎爬虫可以很好地解析由服务器生成的HTML页面内容，有利于SEO优化。
适合复杂页面：对于包含大量数据、需要复杂计算的页面，SSR可以更好地处理并减少客户端的负载。

缺点：

服务器压力大：对于每个请求，服务器都需要重新渲染页面，这可能导致服务器压力过大。
开发限制：SSR要求开发者在编写Vue组件时，需要考虑到服务器端和客户端环境的差异，不能过度依赖客户端环境。
调试困难：SSR的调试过程相对复杂，需要同时考虑到服务器端和客户端的日志和错误信息。

示例（使用React的服务器端渲染）：

// 服务器端代码（Node.js）const React = require('react');const ReactDOMServer = require('react-dom/server');const MyComponent = require('./MyComponent').default; // 假设MyComponent是上面定义的React组件// 渲染组件为HTML字符串const html = ReactDOMServer.renderToString(<MyComponent />);// 将HTML字符串发送给客户端// ...（这里省略了HTTP服务器和响应发送的代码）

三、SSG（静态站点生成）

介绍：

SSG（Static Site Generation）是一种在构建时生成静态HTML页面的技术。在这种模式下，开发者会编写一些模板文件和数据文件，然后使用构建工具（如Hugo、Gatsby等）将这些文件转换为静态的HTML页面。这些页面可以直接部署到服务器上，而不需要服务器进行实时渲染。

优点：

性能卓越：由于页面是静态的，因此无需等待服务器渲染，直接由浏览器加载显示，具有出色的性能。
安全性高：由于服务器只提供静态文件，因此降低了遭受攻击的风险。
适合内容型网站：对于内容更新不频繁的内容型网站（如博客、文档网站等），SSG是一个很好的选择。

缺点：

动态性受限：由于页面是静态的，因此难以实现复杂的动态交互效果。
构建时间长：对于大型站点，构建时间可能会比较长。
不适合频繁更新：对于需要频繁更新数据的网站，SSG可能不太适合，因为每次更新都需要重新构建并部署整个网站。

示例（使用Nunjucks模板引擎）：模板文件（index.njk）：

<!DOCTYPE html><html><head>  <title>My Static Site</title></head><body>  <h1>{{ message }}</h1></body></html>

构建脚本（Node.js）：

const nunjucks = require('nunjucks');const fs = require('fs');// 配置Nunjucks模板引擎nunjucks.configure('views', { autoescape: true });// 渲染模板const res = nunjucks.render('index.njk', { message: 'Hello, SSG!' });// 将渲染结果写入HTML文件fs.writeFileSync('dist/index.html', res);// 现在你可以将生成的`dist/index.html`部署到服务器上

总结

CSR、SSR和SSG各有优缺点，适用于不同的场景和需求。在选择使用哪种技术时，需要根据项目的具体需求来权衡利弊。

例如，对于需要丰富交互效果和实时数据的场景，可以选择CSR；对于需要优化首屏加载速度和SEO效果的场景，可以选择SSR；而对于内容更新不频繁、对性能要求高的场景，可以选择SSG。同时，也可以结合使用多种技术来实现更好的用户体验和性能优化。

本文链接：http://www.28at.com/showinfo-26-88721-0.html一文搞懂：什么是SSR、SSG、CSR？前端渲染技术全解析

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com

上一篇：三分钟入门Helm工具

下一篇： Python 中十个令人惊叹的字符串操作技巧

标签：

热门焦点

Find N3入网：最高支持16+1TB

OPPO将于近期登场的Find N3折叠屏目前已经正式入网，型号为PHN110。本次Find N3在外观方面相比前两代有很大的变化，不再是小号的横向折叠屏，而是跟别的厂商一样采用了较为常见的
小米降噪蓝牙耳机Necklace分享：听一首歌读懂一个故事

在今天下午的小米Civi 2新品发布会上，小米还带来了一款新的降噪蓝牙耳机Necklace，我们也在发布结束的第一时间给大家带来这款耳机的简单分享。现在大家能见到最多的蓝牙耳机
5月iOS设备好评榜：iPhone 14仅排第43？

来到新的一月，安兔兔的各个榜单又重新汇总了数据，像安卓阵营的榜单都有着比较大的变动，不过iOS由于设备的更新换代并没有那么快，所以相对来说变化并不大，特别是iOS好评榜，老款设
使用LLM插件从命令行访问Llama 2

最近的一个大新闻是Meta AI推出了新的开源授权的大型语言模型Llama 2。这是一项非常重要的进展：Llama 2可免费用于研究和商业用途。(几小时前，swyy发现它已从LLaMA 2更名为Lla
2023年，我眼中的字节跳动

此时此刻（2023年7月），字节跳动从未上市，也从未公布过任何官方的上市计划；但是这并不妨碍它成为中国最受关注的互联网公司之一。从2016-17年的抖音强势崛起，到2018年的“头腾
当家的盒马，加速谋生

来源 | 价值星球Planet作者 | 归去来自己“当家”的盒马，开始加速谋生了。据盒马官微消息，盒马计划今年开放生鲜供应链，将其生鲜商品送往食堂。目前，盒马在上海已经与
华为HarmonyOS 4升级计划公布：首批34款机型今日开启公测

8月4日消息，今天下午华为正式发布了HarmonyOS 4系统，在更流畅的前提下，还带来了不少新功能，UI设计也有变化，会让手机焕然一新。华为宣布，首批机型将会在
3699元！iQOO Neo8 Pro顶配版今日首销：1TB UFS 4.0同价位唯一

5月23日，iQOO推出了全新的iQOO Neo8系列，包含iQOO Neo8和iQOO Neo8 Pro两个版本，其中标准版搭载高通骁龙8+，而Pro版更是首发搭载了联发科天玑9200+旗舰
iQOO Neo8 Pro抢先上架：首发天玑9200+ 安卓性能之王

经过了一段时间的密集爆料，昨日iQOO官方如期对外宣布：将于5月23日推出全新的iQOO Neo8系列新品，官方称这是一款拥有旗舰级性能调校的作品。随着发布时