2023年6月29日发(作者：)

客户端渲染，服务端渲染，预渲染--区别详解原⽂⽹址：简介 本⽂介绍⼏⼤渲染技术，包括：客户端渲染，服务端渲染，预渲染。 内容包括：介绍、优点、缺点、适⽤场景。客户端渲染(CSR)简介 客户端渲染，英⽂是：Client-side rendering（CSR）。 客户端渲染⼜称为前端渲染，起源于JS的兴起，ajax让前端渲染更加成熟。 在客户端渲染中，前端专注于ui，后端专注于逻辑，真正意义上实现了前后端分离。前后端通过约定好的API来交互，后端提供数据，前端根据数据⽣成DOM插⼊HTML页⾯。性能消耗在客户端。 对于传统的SPA（单页应⽤）来说，如果不进⾏⼀些额外的⼯作，那么它默认就是采⽤客户端渲染。优点1. 减少服务器压⼒2. ⾸次加载完之后，页⾯响应速度快。3. 可实现局部刷新，⽆需每次都请求完整的页⾯4. 可进⾏各种组件复⽤、懒加载等。5. 结构清晰，开发体验友好。1. ⽆需与服务端各项逻辑进⾏耦合缺点1. ⾸页速度慢，容易⽩屏1. 渲染前要下载⼀堆js和css⽂件2. 不利于SEO1. 爬⾍看不到完整的代码适⽤场景强交互、不注重SEO的页⾯。例如：管理类的项⽬。服务端渲染(SSR)简介 服务端渲染⼜称为后端渲染，英⽂是：Server-side rendering（SSR）。 服务端渲染需要部署前端的服务端（）。 服务端渲染的过程为：服务器端执⾏JS => 构建HTML页⾯（将HTML的符号（⽐如{{}}）⽤数据填充） => 输出HTML给浏览器。优点1. ⽤户看到完整页⾯的速度快1. 因为不需要客户端重新进⾏渲染，在服务端已经把当前页⾯渲染完毕了。2. 利于SEO1. 爬⾍在抓取我们页⾯内容的时候就已经能获取到⼀个渲染好的页⾯了，所以能轻松获取到⽹站的关键信息。3. 节省客户端资源1. 不需要客户端进⾏渲染操作，对于移动端⽤户来说，耗电量减少。4. 可以利⽤缓存机制1. 将⼀些页⾯进⾏缓存，可以进⼀步提⾼响应速度。5. 数据实时性。6. ⽆需关注浏览器兼容问题。缺点1. 服务器资源占⽤⾼1. 使⽤服务端渲染，其实也就是把本该在客户端渲染的⼯作转交给了服务端，这在⼤流量场景下必然会给服务器带来⼀定压⼒。2. 开发成本提⾼1. 开发者需要考虑两端（客户端与Node的服务端）的兼容性。⽐如：在服务端是不存在DOM的。适⽤场景