前端渲染方案CSR / SSR / SSG 概念简介

以下是三种方案的概念：

CSR(Client Side Render)：客户端渲染 ，即现在的 Vue / React / Solid，SPA 架构的方式。
SSR(Server Side Render)：服务端渲染 ，PHP / Java / Python 后台基本能力，生成 HTML 模板，交由浏览器渲染。
SSG(Static Side Generation)：静态站点生成，也叫预渲染 ，把 PHP 提前渲染成 HTM。
复制代码

vue中SSR介绍：Vue 支持将组件在服务端直接渲染成 HTML 字符串，作为服务端响应返回给浏览器，最后在浏览器端将静态的 HTML“激活”(hydrate) 为能够交互的客户端应用。

为什么要使用SSR？

与客户端的单页应用 (SPA) 相比，SSR 的优势主要在于：

• 更快的首屏加载：这一点在慢网速或者运行缓慢的设备上尤为重要。服务端渲染的 HTML 无需等到所有的 JavaScript 都下载并执行完成之后才显示，所以你的用户将会更快地看到完整渲染的页面。除此之外，数据获取过程在首次访问时在服务端完成，相比于从客户端获取，可能有更快的数据库连接。这通常可以带来更高的核心 Web 指标评分、更好的用户体验，而对于那些“首屏加载速度与转化率直接相关”的应用来说，这点可能至关重要。

• 统一的心智模型：你可以使用相同的语言以及相同的声明式、面向组件的心智模型来开发整个应用，而不需要在后端模板系统和前端框架之间来回切换。

• 更好的 SEO：搜索引擎爬虫可以直接看到完全渲染的页面。

执行流程比较

CSR执行流程：浏览器加载html文件 -> 浏览器下载js文件 -> 浏览器运行vue代码 -> 渲染页面

SSR执行流程：浏览器加载html文件 -> 服务端装填好内容 -> 返回浏览器渲染

下图为CSR与SSR对比：

注：SEO：搜索引擎优化(Search Engine Optimization）

同构

以Vue为例，一套vue（react）代码，在服务端执行一次，在客户端再执行一次，就叫做同构。