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