一、啥是前端渲染模式
咱先说说啥是前端渲染模式。简单来讲，前端渲染就是把数据和页面模板结合起来，生成最终能在浏览器里显示的页面。这里有三种常见的渲染模式，分别是 CSR、SSR 和 SSG，下面咱一个一个来介绍。
CSR（客户端渲染）
CSR 就是客户端渲染，啥意思呢？就是浏览器从服务器拿到的是一个空的 HTML 页面和一些 JavaScript 文件。然后浏览器运行这些 JavaScript 代码，从服务器获取数据，再把数据填充到页面里。
举个例子，用 React 技术栈来实现一个简单的 CSR 页面。
// React 技术栈示例
// 引入 React 和 ReactDOM
import React from 'react';
import ReactDOM from 'react-dom/client';
// 定义一个组件
function App() {
const [data, setData] = React.useState(null);
React.useEffect(() => {
// 模拟从服务器获取数据
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => setData(data));
}, []);
if (!data) {
return <div>Loading...</div>;
}
return (
<div>
<h1>{data.title}</h1>
<p>{data.content}</p>
</div>
);
}
// 渲染组件到页面
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
在这个例子里，浏览器先加载 HTML 和 JavaScript 文件，然后运行 JavaScript 代码去请求数据，最后把数据展示在页面上。
SSR（服务器端渲染）
SSR 是服务器端渲染，和 CSR 不一样。服务器在接收到请求后，会把数据和页面模板结合起来，生成完整的 HTML 页面，然后把这个 HTML 页面发送给浏览器。
还是用 React 技术栈举个例子。
// React 技术栈示例
const express = require('express');
const React = require('react');
const ReactDOMServer = require('react-dom/server');
const app = express();
// 定义一个组件
function App() {
const data = {
title: 'SSR Example',
content: 'This is a SSR page.'
};
return (
<div>
<h1>{data.title}</h1>
<p>{data.content}</p>
</div>
);
}
app.get('/', (req, res) => {
// 在服务器端渲染组件
const html = ReactDOMServer.renderToString(<App />);
res.send(`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SSR Page</title>
</head>
<body>
<div id="root">${html}</div>
</body>
</html>
`);
});
const port = 3000;
app.listen(port, () => {
console.log(`Server is running on port ${port}`);
});
在这个例子里，服务器接收到请求后，把组件渲染成 HTML 字符串，然后把包含这个 HTML 字符串的完整 HTML 页面发送给浏览器。
SSG（静态站点生成）
SSG 是静态站点生成，就是在构建项目的时候，就把所有页面都生成好，生成的是静态 HTML 文件。之后用户访问的时候，直接返回这些静态 HTML 文件。
还是 React 技术栈，用 Next.js 框架来实现 SSG。
// React 技术栈示例（Next.js）
// pages/index.js
export async function getStaticProps() {
const data = {
title: 'SSG Example',
content: 'This is a SSG page.'
};
return {
props: {
data
},
revalidate: 60 // 每隔 60 秒重新生成页面
};
}
function HomePage({ data }) {
return (
<div>
<h1>{data.title}</h1>
<p>{data.content}</p>
</div>
);
}
export default HomePage;
在这个例子里，Next.js 在构建项目的时候，会执行 getStaticProps 函数，获取数据，然后把数据和组件结合起来，生成静态 HTML 文件。
二、应用场景分析
CSR 的应用场景
CSR 适合那些对交互性要求很高的应用，比如单页面应用（SPA）。像一些在线游戏、实时聊天应用等，用户和页面的交互非常频繁，需要快速响应。因为 CSR 可以在不刷新整个页面的情况下更新部分内容，给用户带来流畅的交互体验。
举个例子，一个在线绘图应用。用户在画布上绘制图形、改变颜色等操作，都可以通过 JavaScript 代码在客户端实时处理，不需要每次都向服务器请求新的页面。
SSR 的应用场景
SSR 适合那些对搜索引擎优化（SEO）要求很高的应用，比如新闻网站、电商网站等。因为搜索引擎爬虫只能抓取 HTML 内容，SSR 生成的完整 HTML 页面可以让搜索引擎更好地理解页面内容，提高网站在搜索结果中的排名。
比如一个新闻网站，用户在搜索引擎里搜索新闻关键词，搜索引擎爬虫可以直接抓取到 SSR 生成的完整 HTML 页面，从而把新闻内容展示在搜索结果里。
SSG 的应用场景
SSG 适合那些内容更新不频繁的网站，比如博客、文档网站等。因为 SSG 在构建项目的时候就生成了静态 HTML 文件，用户访问的时候可以直接获取这些文件，响应速度非常快。
比如一个技术博客，博主可能几天或者几周才更新一篇文章。使用 SSG 可以在更新文章的时候重新生成静态页面，平时用户访问的时候可以快速获取页面内容。
三、技术优缺点分析
CSR 的优缺点
优点
- 交互性好：可以在不刷新整个页面的情况下更新部分内容，给用户带来流畅的交互体验。
- 开发效率高：前端开发者可以专注于前端逻辑的开发，不需要过多考虑服务器端的问题。
缺点
- 首屏加载慢：因为浏览器需要先加载 JavaScript 文件，然后运行代码去获取数据，所以首屏加载时间比较长。
- SEO 不友好：搜索引擎爬虫只能抓取到空的 HTML 页面，无法获取页面内容，不利于搜索引擎优化。
SSR 的优缺点
优点
- 首屏加载快：服务器直接返回完整的 HTML 页面，浏览器可以直接渲染，首屏加载速度快。
- SEO 友好：搜索引擎爬虫可以直接抓取到完整的 HTML 页面，有利于搜索引擎优化。
缺点
- 服务器压力大：每次请求都需要服务器进行渲染，服务器压力比较大。
- 开发复杂度高：需要同时处理服务器端和客户端的代码，开发复杂度比较高。
SSG 的优缺点
优点
- 性能好：用户访问的时候可以直接获取静态 HTML 文件，响应速度非常快。
- 成本低：不需要服务器实时渲染，只需要提供静态文件，成本比较低。
缺点
- 更新不及时：因为是静态页面，内容更新需要重新生成页面，所以更新不及时。
- 不适合动态内容多的应用：如果页面内容经常变化，使用 SSG 不太合适。
四、注意事项
CSR 的注意事项
- 优化首屏加载速度：可以使用代码分割、懒加载等技术，减少首屏加载的 JavaScript 文件大小。
- 处理 SEO 问题：可以使用预渲染技术，在构建项目的时候生成静态 HTML 文件，提高 SEO 效果。
SSR 的注意事项
- 服务器性能优化：可以使用缓存技术，减少服务器的渲染次数，提高服务器性能。
- 错误处理：在服务器端渲染过程中，可能会出现各种错误，需要做好错误处理，避免影响用户体验。
SSG 的注意事项
- 内容更新管理：需要建立有效的内容更新机制，确保内容更新后能及时重新生成静态页面。
- 处理动态内容：如果页面有少量动态内容，可以使用客户端渲染来处理。
五、文章总结
CSR、SSR 和 SSG 这三种前端渲染模式各有优缺点，适用于不同的场景。CSR 适合交互性要求高的应用，但首屏加载慢、SEO 不友好；SSR 适合对 SEO 要求高的应用，但服务器压力大、开发复杂度高；SSG 适合内容更新不频繁的网站，性能好、成本低，但更新不及时、不适合动态内容多的应用。
在选择渲染模式的时候，需要根据项目的具体需求来决定。如果项目对交互性要求高，可以选择 CSR；如果对 SEO 要求高，可以选择 SSR；如果内容更新不频繁，可以选择 SSG。同时，在开发过程中，要注意各种渲染模式的注意事项，优化项目性能，提高用户体验。
评论