服务端渲染SSR的理解

SSR服务端渲染Server Side Render就是当进行请求时，页面上的内容是通过服务端渲染生成的，浏览器直接显示服务端返回的HTML即可。

客户端渲染CSR

通常在构建一个普通的SPA单页应用时，就是构建的客户端渲染的应用，CSR客户端渲染Client Side Render就是当进行请求时，页面上的内容是通过加载的Js文件渲染出来的，Js文件动态运行在浏览器上面，服务端只返回一个HTML模板。

优点

使得服务器计算压力变轻。
做到了前后端分离，在团队开发中只要负责各自的任务即可，使开发效率有明显提升。

缺点

不利于SEO、搜索引擎爬虫无法完整解析用户页面。
请求增多时用户等待时间变长，导致首屏渲染慢。
消耗的是用户浏览器的性能。

服务端渲染SSR

SSR服务端渲染Server Side Render就是当进行请求时，页面上的内容是通过服务端渲染生成的，浏览器直接显示服务端返回的HTML即可。对于传统服务端渲染，也称为后端模板渲染，如jsp或者php等，这是最早时期的web，是指客户端请求时，在服务器上使用模板引擎将模板与数据拼接成完整的HTML，再发送给客户端，客户端接收后直接解析HTML就可以在浏览器上展示出来，不需要额外的异步请求获取数据，如果要使web有交互性，客户端需要再用Js去操作DOM或者渲染其他动态的部分。

优点

更好的SEO，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面，如果SEO对站点至关重要，而页面又是异步获取内容，则可能需要服务器端渲染SSR解决此问题。
更快的内容到达时间time-to-content，特别是对于缓慢的网络情况或运行缓慢的设备，无需等待所有的JavaScript都完成下载并执行，用户将会更快速地看到完整渲染的页面，通常可以产生更好的用户体验，并且对于那些内容到达时间time-to-content与转化率直接相关的应用程序而言，服务器端渲染SSR至关重要。

缺点

开发条件所限，浏览器特定的代码，只能在某些生命周期钩子函数lifecycle hook中使用，一些外部扩展库external library可能需要特殊处理，才能在服务器渲染应用程序中运行。
涉及构建设置和部署的更多要求，与可以部署在任何静态文件服务器上的完全静态单页面应用程序SPA不同，服务器渲染应用程序，通常需要处于Node.js server运行环境。
更大的服务器端负载，在Node.js中渲染完整的应用程序，显然会比仅仅提供静态文件的server更加大量占用CPU资源CPU-intensive-CPU密集型，因此如果预料在高流量环境high traffic下使用，需要准备相应的服务器负载，并明智地采用缓存策略。

预渲染Prerendering

如果使用服务器端渲染SSR只是用来改善少数营销页面，例如/、/about、/contact等的SEO，那么你可能需要预渲染，无需使用web服务器实时动态编译HTML，而是使用预渲染方式，在构建时build time简单地生成针对特定路由的静态HTML文件。如果使用webpack，则可以使用prerender-spa-plugin轻松地添加预渲染。

优点

设置预渲染更简单，并可以将前端应用作为一个完全静态的站点。

缺点

只适合对于特定静态页面而应用。

总结

本质上对于渲染都是一样的，都是进行的字符串拼接生成HTML,两者的差别最终体现在时间消耗以及性能消耗上。客户端在不同网络环境下进行数据请求，客户端需要经历从Js加载完成到数据请求再到页面渲染这个时间段，导致了大量时间的消耗以及浏览器性能的消耗。而服务端在内网请求，数据响应快，不需要等待Js代码加载，可以先请求数据再渲染可视部分然后返回给客户端，客户端再做二次渲染,这样大部分消耗的是服务端的性能，客户端页面响应时间也更快。
SSR服务端渲染主要解决的是首屏渲染和SEO优化，是否需要SSR服务端渲染主要取决于SEO对于网站是否非常重要以及内容到达时间time-to-content对应用程序的重要程度。例如，如果你正在构建一个内部仪表盘，初始加载时的额外几百毫秒并不重要，这种情况下去使用服务器端渲染SSR将是一个小题大作之举。然而如果大量的访问流量来自于搜索引擎的抓取，那么服务端渲染SSR将是势在必行的解决方案，或者内容到达时间time-to-content要求是绝对关键的指标，在这种情况下服务器端渲染SSR可以帮助你实现最佳的初始加载性能。总而言之，开发需要根据实际场景寻找解决方案。

每日一题

https://github.com/WindrunnerMax/EveryDay

参考

https://ssr.vuejs.org/zh/
https://zhuanlan.zhihu.com/p/90746589
https://www.jianshu.com/p/10b6074d772c
https://github.com/yacan8/blog/issues/30
https://juejin.im/post/6890810591968477191
https://juejin.im/post/6844903959241424910

服务端渲染SSR的理解相关推荐

服务端渲染(SSR) 通用技术解决方案
项目背景服务端渲染(SSR) 通用技术解决方案的诞生来源于对 360搜索百科移动端项目的一次重构实践.而当时决定重构该项目的主要原因有以下几点: 1. 技术栈陈旧,熟悉.开发以及维护成本都较高项 ...
React + Koa 实现服务端渲染(SSR)
⚛️React是目前前端社区最流行的UI库之一,它的基于组件化的开发方式极大地提升了前端开发体验,React通过拆分一个大的应用至一个个小的组件,来使得我们的代码更加的可被重用,以及获得更好的可维护性 ...
服务端渲染SSR与客户端渲染
文章目录一.服务端渲染和客户端渲染的区别服务端渲染(SSR -- server side render) 客户端渲染二.使用服务端渲染(SSR)的利弊优势局限三.实际应用应用原则举例 ...
vue服务端渲染ssr
vue服务端渲染ssr 一.SSR概念传统web渲染技术 SPA SSR 二.webpack+vue2的实现方式 1.创建工程 2.安装依赖 3.编写一个简单的SSR 4.完整的ssr 5.代码链接 ...
node+ejs实现服务端渲染SSR
一.服务端渲染SSR 1.什么是客户端渲染和服务端渲染? 客户端渲染:客户端向服务端请求HTML页面,后端不返回完整的 HTML页面,浏览器解析HTML页面过程中如果遇到ajax数据请求,会向服务端请 ...
服务端渲染(SSR)和Nuxt.js
服务端渲染(SSR) 客户端渲染和传统服务端渲染的问题 SPA应用有两个非常明显的问题: 首屏渲染慢不利于 SEO 传统的服务端渲染又存在: 应用的前后端部分完全耦合在一起,在前后端协同开发方面会有 ...
服务端渲染ssr（server side render）
目录 1 - 什么是服务器端渲染? 1.1 新建server文件夹 1.2 生成一个node项目 1.3 安装express 1.4 服务端渲染小案例 1.5 运行查看效果 1.6 打开浏览器 1.7 ...
ssr Android简书,react服务端渲染ssr
Next.js 一个轻量级的 React 服务端渲染框架 1 概念 SPA single page application : 单页面应用程序缺点:首屏加载慢,不利于SEO SSR Server-s ...
vue服务端转html,普通vue-cli初始项目转为服务端渲染SSR
1.第一步没啥好说的,利用vue-cli脚手架创建一个demo项目: vue init webpack vue-ssr-demo cd vue-ssr-demo npm install 2.安装SSR ...

服务端渲染SSR的理解

服务端渲染SSR的理解

客户端渲染CSR

优点

缺点

服务端渲染SSR

优点

缺点

预渲染Prerendering

优点

缺点

总结

每日一题

参考

服务端渲染SSR的理解相关推荐

最新文章

热门文章