上海商地网站建设公司莱州网站建设价格
面试【进阶】 —— 说下csr、ssr、ssg 的区别?
老码会被经常问到渲染问题：客户端渲染（CSR）、服务器端渲染（SSR）和静态站点生成（SSG）是三种常见的渲染方式。这里我们就对比下区别和适合场景，以及优缺点；
一、csr、ssr、ssg 简介
✨1. 客户端渲染（CSR）
简介：
客户端渲染，即Client-Side Rendering，是指在浏览器中执行JavaScript代码，动态生成页面内容。这种方式使得页面的初始加载速度可能较慢，因为需要等待JavaScript文件下载并执行完成后才能看到内容。然而，CSR在交互性和动态更新方面具有显著优势，适合需要频繁用户交互的单页应用（SPA）。
实现案例：
以Vue.js为例，一个简单的客户端渲染应用可能如下：
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue CSR Example</title>
</head>
<body><div id="app">{{ message }}</div><script src="https://cdn.jsdelivr.net/npm/vue@2"></script><script>new Vue({el: '#app',data: {message: 'Hello, Client-Side Rendering!'}});</script>
</body>
</html>
面试回答：
- CSR的优势在于交互性和动态更新，适合SPA。
- 缺点是首屏加载速度较慢，因为需要等待JavaScript执行。
- 实现上，通常是通过前端框架（如Vue、React）在浏览器中动态生成内容。
✨2. 服务器端渲染（SSR）
简介：
服务器端渲染，即Server-Side Rendering，是指在服务器端生成HTML内容，并将其直接发送到客户端浏览器。这种方式可以加快首屏加载速度，因为浏览器接收到的是已经渲染好的HTML，无需再执行JavaScript来生成内容。SSR对于SEO也非常友好。
实现案例：
以Vue.js和Express为例，一个简单的服务器端渲染应用可能如下：
// server.js
const express = require('express');
const { createBundleRenderer } = require('vue-server-renderer');
const server = express();const renderer = createBundleRenderer(require('./path/to/vue-ssr-server-bundle.json'), {runInNewContext: false,template: require('fs').readFileSync('./index.template.html', 'utf-8'),clientManifest: require('./path/to/vue-ssr-client-manifest.json')
});server.get('*', (req, res) => {const context = { url: req.url };renderer.renderToString(context, (err, html) => {if (err) {res.status(500).end('Internal Server Error');} else {res.end(html);}});
});server.listen(8080, () => {console.log('Server started at http://localhost:8080');
});
（注：此代码需要预先构建好的Vue SSR服务器包和客户端清单文件，具体构建过程可参考Vue官方文档。）
面试回答：
- SSR的优势在于加快首屏加载速度和提升SEO。
- 缺点是服务器压力较大，因为每次请求都需要进行渲染。
- 实现上，通常是通过后端框架（如Express）和前端框架（如Vue）的配合，在服务器端生成HTML内容。
✨3. 静态站点生成（SSG）
简介：
静态站点生成，即Static Site Generation，是在构建时生成静态HTML文件，并在用户请求时直接提供这些文件。这种方式结合了CSR和SSR的优点，既具有快速的加载速度，又无需在每次请求时都进行服务器端渲染。SSG适合内容不经常变化且对加载速度有较高要求的网站。
实现案例：
以Gatsby（一个基于React的静态站点生成器）为例，一个简单的静态站点可能如下：
（注：由于Gatsby项目的完整设置需要一些配置和依赖安装，这里仅给出大致步骤和思路。）
- 安装Gatsby CLI：
npm install -g gatsby-cli - 创建一个新的Gatsby项目：
gatsby new my-static-site - 进入项目目录并启动开发服务器：
cd my-static-site && gatsby develop - 在
src/pages目录下创建页面文件，如index.js，并编写React组件。 - 构建静态文件：
gatsby build - 部署生成的静态文件到服务器或静态网站托管服务。
面试回答：
- SSG的优势在于结合了CSR和SSR的优点，具有快速的加载速度和无需服务器渲染。
- 缺点是适合内容不经常变化的网站，对于动态内容较多的网站可能不太适用。
- 实现上，通常是通过静态站点生成器（如Gatsby、Next.js的SSG模式）在构建时生成静态HTML文件。
二、ssr 适合哪种业务场景
SSR因其独特的优势，特别适合以下几种业务场景：
- SEO 【搜索引擎优化】友好型网站：对于需要搜索引擎爬虫能够轻松抓取和索引内容的网站，SSR是一个理想的选择。
- 首屏加载速度要求高的应用：对于用户体验至关重要的应用，如电商网站、新闻网站等，SSR可以显著加快首屏加载速度。
- 社交内容分享：当用户分享网页到社交媒体平台时，SSR可以确保分享的内容是服务器生成的完整HTML。
三、Vue 对 SSR 的支持力度
Vue.js对SSR提供了强大的支持。Vue的官方文档和社区都提供了丰富的资源和工具来帮助开发者实现SSR。如上文所示的Vue SSR实现案例，就是利用了Vue官方提供的vue-server-renderer模块来完成的。此外，Vue还提供了Nuxt.js这个框架，进一步简化了Vue SSR的开发过程。
四、给伙伴们整理好的对比表格
| 渲染方式 | SSG（静态站点生成） | CSR（客户端渲染） | SSR（服务器端渲染） |
|---|---|---|---|
| 渲染时机 | 构建时（✓ 绿色表示预先生成） | 客户端加载时（✓ 蓝色表示实时生成） | 每次请求时（✓ 橙色表示按需生成） |
| 内容更新 | 需要重新构建和部署 | 只需更新后端数据，客户端自动获取 | 可能需要服务器重新渲染，但可缓存优化 |
| SEO友好性 | 高（✓ 静态内容易被抓取） | 中-低（✓ 依赖JavaScript渲染，可能影响抓取） | 高（✓ 每次请求都生成HTML，易被抓取） |
| 首屏加载时间 | 快（✓ 静态文件直接提供） | 可能较慢（✓ 需要下载和执行JavaScript） | 可优化（✓ 可通过缓存等技术优化） |
| 交互性 | 有限（✓ 静态页面，交互需依赖JavaScript） | 高（✓ 客户端动态生成，交互性强） | 高（✓ 服务器端可处理复杂逻辑，交互性强） |
| 服务器负担 | 低（✓ 只需提供静态文件） | 中（✓ 服务器处理API请求） | 高（✓ 每次请求都需服务器渲染）（可通过缓存减轻） |
| 开发复杂度 | 中（✓ 需要构建工具，但逻辑相对简单） | 高（✓ 需要处理客户端逻辑、状态管理等） | 中-高（✓ 需要处理服务器端和客户端逻辑） |
最后
通过以上内容，相信大家对CSR、SSR和SSG有了更深入的了解。在面试中，可以根据具体的问题和场景，结合本文所述的内容和实例代码进行回答。希望本文能对大家有所帮助！
