|前言

大家好，我是吃西瓜不吐籽，用最通俗的话讲解前端内容是我的目标，对于习惯了SPA的我，今天开始将对SSR和Nuxt3做初步的学习，希望以下几天的文章可以帮助到同样对Nuxt3不是很了解的小伙伴们。

前置工作

什么是SSR

Nuxt是一种SSR（服务端渲染）应用，它区别于市面上广泛应用的SPA(单页面应用)。在Vue2中通过new Vue实例绑定到app根节点下，Vue3中则是通过CreateApp的api绑定实例，这两种本质上都是SPA的应用，在html模板中初始只存在一个app的根节点，在初始化实例后再对服务端发起文件请求，通过ajax的方式完成页面的渲染，其中最大的特点就是空白屏的出现。而SSR页面则是在服务端就已经完成了对页面的渲染，以html的文本格式返回给浏览器。这两种的区别可通过浏览器调试工具的检查网页源代码区分。

为什么要使用SSR

之前已经介绍过因为SPA和SSR的不同导致html模板中的节点不同。而搜索引擎在爬取信息的时候对于一些html标签会比较敏感，比如a标签等，针对搜索引擎优化的技术我们称之为SEO。SEO的目的就是让我们构建的应用程序有更高的“曝光率”，特别是像官网、商城这样的应用程序。为此，区别于SPA应用的单一根元素，能更高效的响应SEO的应用技术————SSR，就是我们所必须的。

体验Nuxt3

Nuxt3是一款新技术，其区别之前的Nuxt2,采用了Vue3框架为基础，集成了TS的语法和Rollup的编包工具。使得web的开发更加的简单和高效。

使用Nuxt3实现Hello World应用

准备工作：Nuxt3需要node版本在v14或v16

构建工程

npx nuxi init nuxt3-app

首先Nuxt3需要安装nuxi工具来初始化一个nuxt3应用

npm install

进入到nuxt3-app目录下，运行npm install安装依赖

npm run dev -- -o

依赖安装完成后使用npm run dev命令启动应用，默认地址http://localhost:3000

页面展示如上图

修改代码

找到app.vue文件，该文件是应用程序的主文件入口，将替换成Hellow World

总结

优缺点

SPA :整个web只有一个页面，使用路由机制进行组件间的切换。

优点：客户端渲染、传输数据量小、减少服务器压力、交互/响应速度快、前后端完全分离。

缺点：首屏加载慢、对SEO不友好，不利于搜索引擎快照。

SSR:将组件或页面通过服务器端生成HTML文本发送到浏览器端渲染。

优点：SEO友好，首屏加载速度快。

缺点：页面重复加载次数高、开发效率低、数据传输量大、服务器压力大。（Nuxt3针对以上问题都有对应的优化方式）。

渲染区别

SPA:通过ajax传递json对象、由浏览器渲染视图。检查网页源代码中无法获取到动态渲染的数据，不利于SEO爬虫。

SSR:传递完整的HTML给浏览器渲染视图。首次渲染的html中携带所有服务器端返回的数据，源代码中包含所有数据，利于SEO。

应用场景

SPA：对项目性能要求高、页面加载速度快、要求客户端渲染、对SEO要求低。适合ERP系统等管理平台。

SSR：对项目SEO要求高、首次打开响应速度快；适合官网、商城等高曝光率网站。