渲染:就是将数据和模版组装成html
客户端渲染(CSR) vs. 服务端渲染 (SSR)vs. 同构
-
客户端渲染(CSR):页面在 JavaScript,CSS 等资源文件加载完毕后开始渲染,路由为客户端路由,也就是SPA(Single Page Application)。
-
前端渲染的方式起源于JavaScript的兴起,ajax的大热更是让前端渲染更加成熟,前端渲染真正意义上的实现了前后端分离,前端只专注于UI的开发,后端只专注于逻辑的开发,前后端交互只通过约定好的API来交互,后端提供json数据,前端循环json生成DOM插入到页面中去。
-
好处: 网络传输数据量小、减少了服务器压力、前后端分离、局部刷新,无需每次请求完整页面、交互好可实现各种效果
-
坏处:不利于SEO、爬虫看不到完整的程序源码、首屏渲染慢(渲染前需要下载一堆js和css等)
-
服务端渲染(SSR):页面由服务端直接返回给浏览器,路由为服务端路由,URL 的变更会刷新页面,原理与 ASP,PHP 等传统后端框架类似。
-
好处:首屏渲染快、利于SEO、可以生成缓存片段,生成静态化文件、节能(对比客户端渲染的耗电)
-坏处:用户体验较差、不容易维护,通常前端改了部分html或者css,后端也需要修改。 -
同构:英文表述为 Isomorphic 或 Universal,即编写的 JavaScript 代码可同时运行在浏览器及 Node.js 两套环境中,用服务端渲染来提升首屏的加载速度,首屏之后的路由由客户端控制,即在用户到达首屏后,整个应用仍是一个 SPA。
预渲染(Prerendering) vs 服务端渲染(SSR)
-
预渲染:
用户请求前的服务器渲染即为「预渲染」。
参考典型例子Jekyll,工作流程是"内容创作进行内容编写"->"根据内容进行静态代码的生成(渲染)"->"部署代码生成结果"->"访问者对已部署的结果进行访问" -
服务端渲染:
用户请求后的服务器渲染即为「服务端渲染」。
参考典型例子Wordpress,工作流程是"部署渲染程序"->"内容创作者提交新内容到渲染程序"->用户访问->根据模版布局和内容渲染生成结果内容给用户查看(可作一定优化比如仅当内容有更改后的首次访问时触发内容渲染并缓存该内容)"
服务端渲染与 Universal React App
客户端渲染和服务端渲染的区别
服务端渲染(SSR)和预渲染(Prerendering)有什么区别?










网友评论