以下是三种方案的概念:
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)代码,在服务端执行一次,在客户端再执行一次,就叫做同构。