2023-03-24 什么是服务器渲染?什么是预渲染?服务器渲染和预渲染的区别是什么?

0.客户端渲染

什么是客户端渲染?

客户端渲染(CSR)又称为前端渲染,
客户端渲染基于前后端分离的思想,即前端专注于JS,后端专注于逻辑,
前后端通过约定好的API来交互,前端根据后端提供的数据来生成DOM并插入到HTML页面中
对于单页应用(SPA)来说,默认采用客户端渲染

客户端渲染的优缺点是什么?

优点

• 减少服务器压力
• 首次加载完毕后,页面响应速度较快
• 可以局部刷新,无需每次都请求整个页面
• 可以实现组件复用和懒加载
• 结构清晰,开发体验友好(无需与服务器各项逻辑进行耦合)

缺点

• 首页速度慢,容易出现白屏(因为渲染前需下载大量s和css文件)
• 不利于SEO(爬取不到完整代码)

客户端渲染的使用场景是什么?

客户端渲染常用于交互性比较强,同时不注意SEO的页面
比如管理类的项目

1.服务器渲染

什么是服务器渲染?

服务端渲染(SSR)又称为后端渲染,
服务端渲染需要部署前端的服务器(如nodejs),其渲染过程如下:

• 服务器执行JS
• 构建HTML页面,并用数据填充
• 输出HTML给浏览器

服务器渲染的优缺点是什么?

优点

• 更快的首屏加载速度(因不需客户端重新渲染,已经在服务端渲染完毕)
• 有利于SEO(爬虫能抓取到渲染好的页面,获取网站关键信息)