什么是 CSR、SSR、SSG、ISR

本文以React、Vue为例，介绍主流的渲染模式以及如何在主流框架中实现CSR、SSR、SSG、ISR。

首先，挂载组件到DOM节点是所有框架的基本能力。在React中使用`render`，Vue中使用`createApp`后进行`mount`。

水合是指将组件渲染到已有静态内容上，恢复其交互和动态能力。React使用`hydrate`（React 18前）和`createHydrate`（React 18），Vue使用`createSSRApp`后进行`mount`。Vue的API语义稍显奇怪，因为使用`createSSRApp`的场景并不一定为SSR。

输出渲染内容的能力，主流框架能将其内容直接输出为HTML字符串等形式，如React和Vue的`renderToString`。

主流渲染模式包括CSR、SSR、SSG和ISR。

CSR（客户端渲染）是常见SPA所使用的渲染方式，适用于客户端页面有动态需求或需要交互的场景。

SSR（服务端渲染）是从服务端直接返回要渲染的静态内容，适用于某些静态内容较多的场景，如CMS生成内容、博客站点等。

SSG（静态站点生成）在构建阶段准备页面所需数据，构建静态页面并在请求时返回，常用于静态内容较多的场景。

ISR（增量静态再生）是SSG的一种增强版，服务端在收到页面请求时判断页面时效性，认定失效则进行增量构建。适用于需要频繁更新的页面，如天气预报、新闻页面等。

选择渲染模式应考虑动态需求、交互性以及服务端支持。SSR和ISR需要服务端支持，若只有静态文件服务器，改动较大。

渲染模式并非固定，多种场景下可进行优化。选择最适合自身需求的渲染模式。

如需了解SSR、SSG、ISR的具体实现，请参阅之前的文章。