什么是SSG和SSR？

概念

SSG（Static Site Generation 静态站点生成）

顾名思义，此类网站的所有页面都是以静态文件的形式存在，代码构建时生成了所有文件，且不会再次更改，浏览器向服务器拉取对应的静态资源文件渲染网页。

优势：

1.更快的加载速度：均为静态资源获取，服务器无需处理

2.研发漏洞风险低： 没有服务器端动态执行代码，可降低代码注入风险

3.托管成本低：简单的Nginx服务器等任何静态文件服务器均可支撑部署

SSR（Server-Side Rendering 服务器端渲染）

浏览器每次渲染的页面，都是由服务器在当时动态生成的，每次请求的页面都是根据请求的路径和参数动态生成的HTML内容。

优势：

1.更快的首屏加载时间：首屏内容预先渲染完成，可更快获取

2.更好的搜索引擎优化（SEO）：内容预先生成，搜索引擎爬虫可更方便爬取动态最新内容

3.更好的页面分享：通过链接预渲染可完全渲染正确页面

适用场景

• SSG更适用于对最新数据要求不那么严格的项目需求，例如博客、视频平台等
• SSR更适用于对最新数据获取要求严苛的项目需求，确保每次浏览都是最新数据，例如电商、金融交易等

各项比对

• 首屏加载时间：SSG < SSR
• 其余加载时间：SSG > SSR
• 服务器负载： SSG < SSR

SSR部署案例

由于需要实现动态获取HTML的需求，无法使用传统Nginx服务器，SSR项目一般需要Koa.js，Express.js等中间件框架的支撑

const express = require('express');
const { createSSRApp } = require('vue');
const { renderToString } = require('@vue/server-renderer');
const fs = require('fs');
const path = require('path');
const App = require('./App.vue'); // Vue 3 根组件

const app = express();
const port = process.env.PORT || 3000;

// 静态文件服务
app.use(express.static(path.join(__dirname, 'public')));

// SSR 渲染
app.get('*', async (req, res) => {
  const app = createSSRApp({
    render: () => App
  });

  // 异步渲染根组件
  try {
    const appContent = await renderToString(app);
    const indexHTML = fs.readFileSync(path.resolve(__dirname, 'public', 'index.html'), 'utf-8');
    const html = indexHTML.replace('<div id="app"></div>', `<div id="app">${appContent}</div>`);
    res.status(200).send(html);
  } catch (error) {
    console.error('Server render error:', error);
    res.status(500).send('Internal Server Error');
  }
});

// 启动服务器
app.listen(port, () => {
  console.log(`Server is running on http://localhost:${port}`);
});

对于 SSR（服务器端渲染）的 Vue 3 项目，通常不需要使用 Webpack 来构建项目。因为在 SSR 中，前端代码在服务器端运行，并且 Vue 3 提供了 @vue/server-renderer 包来实现服务器端渲染，不需要将前端代码打包成客户端可执行的 JavaScript bundle。

在 SSR 中，前端代码的主要作用是提供 Vue 组件、路由、状态管理等配置，并且在服务器端运行时通过 renderToString 方法将 Vue 组件渲染成 HTML 字符串，然后将该字符串返回给客户端。