SSG项目方案选择

前言

web 项目选型的三大方向： CSR,SSR,SSG, 以及最新的 ISR, 是不是头昏脑胀的，我们今天来梳理一下。先看个别人的介绍： Understanding CSR, SSR, SSG, and ISR: A Next.js Perspective | by Aditya Kumar Tiwari | Bootcamp

SSG 特点

• SEO 友好
• 静态资源，可以部署到 CDN
• 多页面输出

技术选型

还是要强调一下，技术服务于项目，从技术选型上：

• 如果是内部的应用，或者 electron 应用， 不需要考虑 SEO 的情况下， 优先选择 CSR, 这种方案下，使用 vite 或者 rspack 框架即可。
• 如果是文档生成类型的站点，选择 docusaurus，vitePress 这种， 也可以是 Astro, Gatsby 利用 SSG 的能力， 生成静态站点。
• 如果是开发的 UI 组件文档, 可以使用 storybook, docz, dumi 等工具， 有对组件预览做特殊处理。
• 如果是 landing page 或者活动页面， 根据部署的环境，优先选择 SSR, ISR, 利用服务端渲染的特性，加快页面输出，兜底使用 SSG 的生成方案。

CSR

这个不用说， 如果是搭建一个工具类型的应用，比如富文本编辑器，图表，地图，视频等，这种应用，一般都是 CSR 的， 也就是前端渲染， 服务端只是提供数据接口，不做页面渲染， 这种应用，一般都是单页应用，也就是 SPA, 也就是我们常说的前后端分离的应用。

SSR

next.js, 特别是 app route 后， 还是支持的，看 Deploying: Static Exports | Next.js 这部分的介绍。

适用场景， 主要还是一些官网，活动页面，对 SEO 有要求， 希望输出快， 既有自己的样式风格，也有交互组件，甚至希望提供 api 能力。

SSG

SSG 就是指预渲染： Pre-rendering (SSG) | Vike

在构建的时候，获取数据，填充页面做渲染，输出所有 html 文件。重点是要有方法罗列所有路由， 所以项目需要相应的改造。

ISR

Astro 就是这个特色，可以把页面看作不同模块的孤岛 (island), 混合使用走客户端渲染还是服务端渲染， 使得页面输出更快。

重点看下 SSG

这个方案，传统意义上，一般拿来做 blog, 或者文档站点，所以产生了两个分支的方案:

• 文档生成， 针对 md 预设了 mdx 支持，约定的路由方案
• SSG 生成框架， 比如：
  • Astro, Gasby, 提供了构建时候获取数据的方案， 可以自己支持 md 的渲染， 添加自定义的组件， 更加灵活
  • Vike, 一个 vite 的插件， 可以支持 SSR/SSG 的输出， 也可以自定义路由，自定义渲染

文档生成

这类工具， 如果能 支持 mdx 的话，也是可以定义一些组件的，比如自定义个首页，展示个轮播图组件。

Astro 也推出了一个文档工具： https://starlight.astro.build/

SSG 生成框架

Astro, Gasby.

Vite 生态

• antfu/vite-ssg: Static site generation for Vue 3 on Vite， 基于 Vue 的
• React Tour | Vike， 类似 next.js 采取了约定式路由
• Daydreamer-riri/vite-react-ssg: Static-site generation for React on Vite.: 改动较为简单，增加一个路由入口， 但不支持构建时候的数据加载？

技术总结

从个人技术喜爱度上:

• web 全栈应用，选择 next.js 走 SSR 方案
• 如果是官网活动页面性质的：
  • 选择 Astro，自带 tailwindCSS, 可以添加 React 组件
  • 也可以用 Gastby, 它的特色是数据源丰富
  • 还可以使用 vike, 一个 vite 的插件， 去做 SSR/SSG 的事情
• 如果是做帮助文档站点，Docusaurs 或者 VitePress, rpress 这种开箱即用，能支持全文搜索优先。
• 如果没有特殊要求的，就 CSR, 选择 vite, rspack, 这种开箱即用，配置简单，构建快。