体验Vue3的SSR框架 - Nuxt3

SSR 与 Nuxt

SSR 是 Server-Side Rendering，即服务端渲染的英文缩写。

Vue.js 是一个用于构建客户端应用的框架。默认情况下，Vue 组件的职责是在浏览器中生成和操作 DOM。在客户端是单页应用 (SPA) 。

也可以将 vue 程序在服务端渲染，渲染完成再返回给浏览器，最后在浏览器端将返回的 HTML 激活(hydrate)，这个过程就是 SSR。

用 SSR 的好处：

• 更快的首屏加载
• 更好的 SEO

构建一套完整的 SSR 应用会很复杂，Nuxt 很好的解决了这个问题，让 Vue 的服务端渲染变得更加简单。

Nuxt 是一个构建于 Vue 生态系统之上的全栈框架，它为编写 Vue SSR 应用提供了丝滑的开发体验。还可以把它当作一个静态站点生成器来用！简单来说， Nuxt 是 Vue服务端渲染的通用解决方案。

Nuxt2 版本是基于 Vue2.x 版本的，Nuxt3 版本是基于 Vue3.x 版本的，目前 Nuxt3处于RC版本。本文基于 Nuxt3，官网传送门。

前置准备

• 开发工具：VS Code
• VS Code插件：Vue Language Features(Volar)
• VS Code插件：TypeScript Vue Plugin(Volar)
• node版本需要高于v14.16.0

安装

创建项目：

pnpm dlx nuxi