面试【进阶】 —— 说下csr、ssr、ssg 的区别?-EW帮帮网

面试【进阶】 —— `说下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）

![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/08cb419a2fbb4ce7a408dbb428c79003.png

简介：
服务器端渲染，即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有了更深入的了解。在面试中，可以根据具体的问题和场景，结合本文所述的内容和实例代码进行回答。希望本文能对大家有所帮助！

在这里插入图片描述

面试【进阶】 —— 说下csr、ssr、ssg 的区别?