SSR知识点总结
2021-01-23 09:46:34
一、为什么要使用SSR？
如果你的网站是面向C端用户，并且需要支持SEO（搜索引擎优化），那么使用SSR（服务器端渲染）是一个明智的选择。SSR可以生成具有HTML结构节点的页面，这对于浏览器爬虫来说是友好的，有助于提升网站在搜索引擎中的排名。
二、SSR与传统后端模板渲染、前端单页面应用的异同
传统后端模板渲染
流程：
客户端发起请求。
服务端接收请求并查询数据库获取数据。
后端模板与数据整合拼接为HTML字符串。
返回给客户端浏览器进行渲染。
特点：
每次跳转新页面都是一次全新的数据和资源请求，页面需要刷新，有时可以当作内存释放的一种方式。
用户体验相对较差，因为每次页面切换都需要重新加载资源。
前端单页面应用（SPA）
流程：
客户端发起请求。
服务端接收请求并返回打包后的JS、CSS等静态资源和一个基础的DOM根节点。
客户端接收后根据前端项目路由进行文件查找，同时发送当前路由所需的数据请求。
数据返回后，通过JS/TS动态渲染到DOM节点进行输出。
特点：
首次加载相对耗时，但后续页面切换只需请求数据资源，无需再次请求页面资源。
容易出现内存泄漏、页面卡死等情况，需要开发过程中注意。
对SEO不友好，因为搜索引擎爬虫可能无法正确抓取动态渲染的内容。
首屏加载相对较慢。
SSR技术
流程：
客户端发起请求。
服务器读取模板，解析成DOM节点，返回一个完整的首屏HTML结构。
客户端通过框架的内置API，将用户写的交互代码在前端激活，重新变成一个SPA应用。
后续用户点击超链接、跳转时，不再向服务器发送请求，而是使用前端路由跳转，只发送一些Ajax请求数据。
特点：
利于SEO，因为首屏内容是服务器端渲染的HTML。
首屏加载速度快，用户体验好。
对服务器的负载较高，因为需要服务器进行渲染。
自由度不高，需要按照既定规则进行开发。
三、前端SSR的框架
Nuxt.js（Vue）
Nuxt.js是一个基于Vue.js的SSR框架，提供了两种实现SSR的方式：
服务器端渲染：服务端将Vue的组件渲染成HTML返回给客户端。
静态化（预渲染）：Nuxt.js直接在项目中生成静态文件HTML，可以直接将编译生成后的HTML文件部署到服务器。
Nuxt.js流程图：
Next.js（React）
Next.js是一个基于React的SSR框架，它提供了类似的服务器端渲染和静态生成页面的功能。
与Nuxt.js类似，Next.js也允许开发者在项目中轻松实现SSR，并优化SEO和首屏加载速度。
四、总结
SSR技术通过服务器端渲染HTML结构，提升了网站的SEO性能和首屏加载速度，但同时也增加了服务器的负载和开发复杂度。在选择是否使用SSR时，需要根据项目的具体需求进行权衡。对于需要支持SEO且对首屏加载速度有较高要求的C端网站，SSR是一个值得考虑的选择。同时，借助Nuxt.js、Next.js等框架，可以更加高效、便捷地实现SSR功能。
热门标签
