【Nuxt】01 什么是SSR 服务端渲染

前言

在当前的前端开发工作中,我们见到最多的三种渲染方式,如下:

  • CSRClient Side Rendering,客户端(通常是浏览器)渲染;
  • SSRServer Side Rendering,服务端渲染;
  • SSGStatic Site Generation,静态网站生成;

其中CSR在前端开发工作中最为常见,有SEO需求时会考虑SSR\SSR,但SEO时SSR效果更好,所以接下来大致说明一下CSR、SSR。

1 什么是浏览器端渲染 CSR

浏览器端渲染CSRClient Side Render的简称,页面上的内容是我们加载的 js 文件渲染出来的,js 文件运行在浏览器上面,服务端只返回一个html模板。简单的理解就是,服务器端不负责解析页面的文档结构,服务器端把 js 、css、images 等静态资源一次性给客户端,客户端通过 js 生产虚拟 DOM 结构树,再通过 axios 请求需要的数据渲染到页面中展示内容,实现了前后端分离。

咱们平常使用 vue 构建的 SPA 应用都是浏览器端渲染,Vue 应用原始的 HTML 页面 body 标签中只有一个 id 为 app 的节点, DOM 结构是通过 MVVM 模型中 VM 构建虚拟 DOM ,构建完成后再 mouted 到咱们的页面上。随后,根据业务需求发出 axios 请求,再根据 Diff 算法对新的数据,按需渲染更新页面。

【Nuxt】01 什么是SSR 服务端渲染_第1张图片
【Nuxt】01 什么是SSR 服务端渲染_第2张图片

2 什么是服务端渲染 SSR

服务端渲染 SSRServer Side Render 的简称,页面上的内容是通过服务端渲染生成的,浏览器直接显示服务端返回的html就可以了。简单的理解就是,将组件或页面通过服务器生成html字符串,再发送到浏览器客户端直接展示内容。

咱们经常提到的前后端混合开发模型 MVC 模型,比如:PHP 的 ThinkPHP 框架、java 的 Spring MVC 框架,这些框架都会直接对应一个解析引擎(我们也经常称作为:模板引擎),比如:PHP Smarty、java JSP 。这些解析引擎的解决思路也很相似,都是在传统的网页 HTML(标准通用标记语言的子集)文件 ( .htm, .html ) 中插入PHP 或者 java 程序段,从而形成 View 视图文件,这些程序片段会被 服务端 解析后形成完整的 html 文件,再发布到客户端进行显示。

PS:MVC 模式是开发者经典模式,其中 M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是将 M 和 V 的实现代码分离,从而使同一个程序可以使用不同的表现形式。其中,View 的定义比较清晰,就是用户界面,咱们前端工程师的工作核心也就是在此。

【Nuxt】01 什么是SSR 服务端渲染_第3张图片
【Nuxt】01 什么是SSR 服务端渲染_第4张图片

2.1 使用SSR的利弊

追根溯源,早期咱们 Web 开发程序员是没有前后端明确概念这么一说的,在 jQuery 的时代,直接操作 DOM,前端开发都是 SSR 的,服务端通过 assign、show 等方式将数据注入到模板中,再解析成目标 html 后进行发布。后续React、Vue出现后,整合了dom操作,SPA应用大行其道。俗话说,天下大势,分久必合,合久必分啊,但一些官网,SSR 的需求还是仍然须在的。

2.2 SSR的优势
  1. 更利于SEO。
    不同爬虫工作原理类似,只会爬取源码,不会执行网站的任何脚本(Google除外,据说Googlebot可以运行javaScript)。使用了Vue、React或者其它MVVM框架之后,页面大多数DOM元素都是在客户端根据 js 动态生成,可供爬虫抓取分析的内容大大减少(如图一)。另外,浏览器爬虫不会等待我们的数据完成之后再去抓取我们的页面数据。服务端渲染返回给客户端的是已经获取了异步数据并执行 JavaScript 脚本的最终HTML,网络爬虫就可以抓取到完整页面的信息。

  2. 更利于首屏渲染
    首屏的渲染是 node 发送过来的 html 字符串,并不依赖于 js 文件了,这就会使用户更快的看到页面的内容。尤其是针对大型单页应用,打包后文件体积比较大,普通客户端渲染加载所有所需文件时间较长,首页就会有一个很长的白屏等待时间。

2.3 SSR的局限
  1. 服务端压力较大
    本来是通过客户端完成渲染,现在统一到服务端 node 服务去做。尤其是高并发访问的情况,会大量占用服务端CPU 资源;

  2. 开发条件受限
    在服务端渲染中,只会执行到组件beforCreatecreated生命周期钩子,因此项目引用的第三方的库需要考虑当前库是否支持ssr;

  3. 学习成本相对较高
    除了对 webpack、Vue、React 这些客户端的逻辑要熟悉,还需要掌握 node、Koa2 等相关服务端技术,前后端的技术界限被模糊化,相对于客户端渲染,项目构建、部署过程更加复杂。

你可能感兴趣的:(#,Nuxt,前端,Nuxt,SSR)