谈谈我对服务端渲染的理解(SSR)

2022-08-01,,,,

1.首先需要知道服务端渲染的定义以及优缺点

     服务端渲染的定义:
  前端页面都是后端将html拼接好,然后将它返回给前端完整的html文件。浏览器拿到这个html文件之后就可以直接显示了,这就是所谓的服务器端渲染。(vue里:将vue实例渲染为HTML字符串直接返回,在前端激活为交互程序)。
 
   服务端渲染的优点:
    1.首屏渲染快
       2.利于SEO
 服务端渲染的缺点:
       1.不容易维护,通常前端改了部分html或者css,后端也需要修改。
       2.会增加项目整体复杂度(前后端耦合,互相依赖 (较高的学习成本))。
       3.库的支持性(兼容性)
       4.对服务器压力较大

2.其次需要知道为什么出现它,它解决了什么问题?

  需要说清楚这个问题就不得不说一下客户端渲染的定义以及优缺点。

   客户端渲染优点:
       1.网络传输数据量小、减少了服务器压力(减少了服务器压力)
       2.前后端分离、局部刷新,无需每次请求完整页面、交互好可实现各种效果。(耦合性低)
       3.库的支持很好(兼容性高)
       4.项目复杂度低

  客户端渲染的缺点:
      1.不利于SEO、爬虫看不到完整的程序源码
      2.首屏渲染慢(渲染前需要下载一堆js和css等)

综上所述可以看出服务端渲染主要解决了客户端渲染首屏加载慢,不利于seo的问题。

 知道了优缺点,我们就能结合优缺点来权衡利弊,选择适合自己项目的方式。下面说一下服务端渲染的使用场景:

   1.项目对首屏加载速度要求很高。
      比如:移动端
   2.项目对seo要求很高:
     比如:企业官网、电商类(有推广页面)
      就是你的项目需要推广,注重seo排名。
如果你的项目只有几个页面注重seo和首屏速度可以两个结合一起使用。

3.必要性

 spa应用不使用ssr也可以对seo进行优化:
   有预渲染prerender、google抓AJAX、静态化、爬虫实现puppeteer:让它直接从spa项目中爬出结果、nuxt.js(全新项目)
    综上所述:我们需要对项目的侧重点,进行权衡来看是否需要使用ssr。不要盲目使用。这个就是我对ssr的理解

4.nuxt.js

Nuxt.js 是一个基于 Vue.js 的通用应用框架。

通过对客户端/服务端基础架构的抽象组织,Nuxt.js 主要关注的是应用的 UI渲染

我们的目标是创建一个灵活的应用框架,你可以基于它初始化新项目的基础结构代码,或者在已有 Node.js 项目中使用 Nuxt.js。

Nuxt.js 预设了利用 Vue.js 开发服务端渲染的应用所需要的各种配置。

nuxt.js传送门

本文地址:https://blog.csdn.net/weixin_44058725/article/details/107383241

《谈谈我对服务端渲染的理解(SSR).doc》

下载本文的Word格式文档,以方便收藏与打印。