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 生态

技术总结

从个人技术喜爱度上:

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