一、概念
首先,我们要了解什么是渲染 ?
渲染 :就是将数据和模板组装为HTML
客户端渲染(CSR)VS 服务端渲染(SSR)
客户端渲染
1. 概念:
在客户端渲染模式下,服务器会把需要渲染的静态文件给客户端,客户端拿到静态文件后,运行其中包含的JS脚本,根据JS运行结果,生成响应的DOM,然后进行界面渲染
2. 优缺点
- 优点:网络传输数据量小、减少了服务器的压力、前后端分离、局部刷新,无需每次请求完整页面、交互好可实现各种效果
- 缺点:不利于SEO、爬虫看不到完整的程序源码、首屏渲染慢(渲染前需要下载一堆js和css等)
服务端渲染
1. 概念:
服务端渲染的模式下,当用户第一次请求页面时,由服务器把需要的组件或页面渲染成 HTML 字符串,然后把它返回给客户端。客户端拿到手的,是可以直接渲染然后呈现给用户的 HTML 内容,不需要为了生成 DOM 内容自己再去跑一遍 JS 代码。
2. 优缺点
- 优点:首屏渲染快、利于SEO、可以生成缓存片段,生成静态化文件、节能
- 缺点:用户体验较差、不容易维护,通常前端改了部分html或者css,后端也需要修改。
二、为什么使用服务端渲染,它解决的是什么问题
简单来说就两点:
- 首屏加载快 相比于加载单页应用,我只需要加载当前页面的内容,而不需要像 React 或者 Vue 一样加载全部的 js 文件
- SEO 优化 对于单页应用,搜索引擎并不能收录到 ajax 爬取数据之后然后再动态 js 渲染出来的页面。
三、什么情况下使用服务端渲染?
- 搜索框(SEO)
- 首屏加载(减少白屏时间)
- 项目路由的搭建