服务端渲染 Nuxt （基本配置）

简介

Nuxt 框架提供了一种基于 Node.js 的服务端渲染方案 SSR（Server Side Rendering），可以让 Vue 应用在服务器端进行渲染，从而提高页面的加载速度和 SEO。

创建 Nuxt3 项目 

[Nuxt 官网](https://nuxt.com/) https://nuxt.com/

初始化命令

npx nuxi init <project-name>

其中 <project-name> 换成自己的项目名称。

下载问题

由于国内访问受限，通过命令行下载可能会失败。

解决方案参考：修改 host 文件

SPA 和 SSR 是什么

• SPA（Single Page Application）单页面应用，在客户端通过 JS 动态地构建页面。

• SSR（Server-Side Rendering）服务器端渲染，在服务器端生成 HTML 页面并发送给客户端。

有什么不同？

• SPA 的特点是页面切换流畅，动态渲染变化的部分，用户体验好，但是对搜索引擎的支持不够友好。

• SSR 的特点是对搜索引擎友好，可以提高页面首次加载速度 和 SEO，但是页面切换可能不够流畅，因为每次都是请求一个完整的 HTML 页面。

Nuxt 框架优势

• Nuxt 采用了混合的架构模式，同时支持 SSR 和 SPA。

• SSR 服务端渲染： 首次访问页面 ，Nuxt.js 在服务器端执行 Vue 组件的渲染过程，并生成初始 HTML。

• SPA 客户端激活：一旦初始 HTML 被发送到浏览器，Vue.js 会接管页面，后续的页面切换则使用 SPA 的方式进行。

• Nuxt 框架优势：兼顾了 SSR 和 SPA 的优点。

开启或关闭服务端渲染

Nuxt 默认开启 SSR 服务端渲染，推荐开启，从而兼顾了 SSR 和 SPA 的优点，也利于 SEO 搜索引擎优化。

// nuxt.config.ts
export default defineNuxtConfig({
  // 是否开启 ssr 服务端渲染
  ssr: true,
})

SEO 优化

通过设置网页 title 和 description 等 SEO 优化信息，由服务端渲染，可提高网页在搜索引擎结果页面中的排名和可见性 。

<script setup lang="ts">
// SEO 优化信息
useSeoMeta({
  // 网站标题
  title:'',
  // 网站描述
  description:'',
  // 搜索关键词
  keywords: '',
})
</script>