服务端渲染 SSR

榕树下的蜗牛
142 阅读3分钟

SSR

SSR概述

服务端渲染 server side render

将同⼀一个组件渲染为服务器器端的 HTML 字符串串，将它们直接发送到浏览器器，最后将这些静态标记"激 活"为客户端上完全可交互的应⽤用程序。

  • 前端渲染：html页面作为静态文件存在，前端请求时后端不对该文件做任何内容上的修改，直接以资源的方式返回给前端，前端拿到页面后，根据写在html页面上的js代码，对该html的内容进行修改。
  • 服务端渲染：前端发出请求后，后端在将HTML页面返回给前端之前，先把HTML页面中的特定区域，用数据填充好，再将完整的HTML返回给前端。在SPA场景下，服务端渲染都是针对第一次get请求，它会完整的html给浏览器，浏览器直接渲染出首屏，用不着浏览器端多一个AJAX请求去获取数据再渲染。

应用场景

  1. 应用需要更好的SEO，因为传统的搜索引擎只会从 HTML 中抓取数据，这会导致前端渲染的页面无法被抓取
  2. 应用需要更快的内容到达时间(首屏渲染时间)，特别是对于缓慢的网络情况或运行缓慢的设备，更快的内容到达时间(time-to-content)，特别是对于缓慢的网络情况或运行缓慢的设备 。页面首屏时间大概有80%消耗在网络上，剩下的时间在后端读取数据以及浏览器渲染，显然要优化后面的20%是比较困难的，优化网络时间是效果最明显的手段。传统的Ajax请求是先请求js再由js发起数据请求，两项时间再加上浏览器渲染时间才是首屏时间。而SSR能将两个请求合并为一个

SSR的局限

  1. 更大的服务器端负载
  2. 较高的学习成本
  3. 一些外部扩展使用会受限
  4. 服务器端和浏览器环境差异带来的问题，例如document等对象找不到的问题。

如何选择

建议：如果注重SEO的新闻站点，非强交互的页面，建议用SSR；像后台管理页面这类强交互的应用，建议使用前端渲染。

CSR VS SSR

CSR客服端渲染

传统的web开发

CSR.JPG

SPA单页应用

到了vue，react时代，单页应用优秀的用户体验，逐渐成为了主流，页面整体是js渲染出来的，称之为客户端渲染SCR

  1. **首屏渲染等待时间长：**必须得等js加载完毕，并且执行完毕，才能渲染出首屏
  2. **seo不友好：**爬虫只能拿到一个div，认为页面是空的，不利于seo

SPA.JPG

SSR服务端渲染

为了解决这两个问题，出现了SSR解决方案，后端渲染出完整的首屏的dom结构返回，前端拿到的内容带上首屏，后续页面操作，在用单页的路由跳转和渲染，称之为服务端渲染

SSR.JPG

avatar
文章
阅读
粉丝