【前端SEO】使用Vue.js + Nuxt 框架构建服务端渲染 (SSR) 应用满足SEO需求

Nuxt.js 是一个基于 Vue.js 的通用应用框架，它简化了使用 Vue 构建服务端渲染 (SSR) 应用的流程。除了 SSR 之外，Nuxt.js 还支持静态站点生成（Static Site Generation, SSG），渐进式网络应用（Progressive Web Apps, PWA），单页面应用（Single Page Application, SPA）等多种模式。以下是 Nuxt.js 的一些深度介绍和代码案例，以及其在 SEO 方面的作用。

代码案例

创建一个新的 Nuxt.js 项目并添加一个简单的页面：

npx create-nuxt-app my-nuxt-project

选择默认选项后进入项目目录，并在 pages 文件夹下创建一个 index.vue 文件：

<template><div><h1>欢迎来到我的 Nuxt.js 网站</h1><p>{{ message }}</p></div>
</template><script>
export default {data() {return {message: '这是首页内容'}},head() {return {title: '首页',meta: [{ hid: 'description', name: 'description', content: '这是首页的描述' }]}}
}
</script>

这里定义了一个简单的页面，同时使用 head 方法来定制页面的 <title> 和 <meta> 标签，这对于 SEO 非常重要。

SEO 作用解析

Nuxt.js 对于 SEO 有以下几个方面的好处：

• 服务器端渲染 (SSR)：与传统的单页应用程序（SPA）相比，Nuxt.js 可以在服务器端预先渲染页面，这意味着搜索引擎爬虫可以直接看到完全渲染的内容，而不需要等待 JavaScript 执行，这有助于提高搜索引擎抓取效率和索引质量。
• 动态 Meta 标签：如上面的代码示例所示，Nuxt.js 允许你为每个页面动态地设置标题和元标签，这对于确保每个页面都有独特的、描述性的标题和描述至关重要，从而提高点击率和搜索排名。
• 快速首屏加载：由于页面是在服务器端预渲染的，用户访问网站时会更快地看到页面内容，提高了用户体验和潜在的SEO评分。
• 链接结构：自动路由生成功能使得网站的 URL 结构更加清晰合理，有利于内部链接建设和SEO。
• 静态站点生成：对于不需要频繁更新的内容，可以使用 Nuxt.js 生成静态站点，这样的静态页面非常适合SEO，因为它们几乎不需要任何服务器端处理即可提供给用户

对于版本，Nuxt 2 到 Nuxt 3 的升级中，这些变化涵盖了性能、框架架构、特性支持以及开发者体验等多方面。以下是两者的主要区别：

版本差异

• 核心架构：

  • Nuxt 2：基于 Vue 2 和 Webpack，运行在传统的 Node.js 环境中。
  • Nuxt 3：基于 Vue 3 和 Vite（默认），并支持 Webpack 5，重写了底层架构以支持更现代的功能和增强性能。

• Vue 3 支持：

  • Nuxt 2：仅支持 Vue 2，无法利用 Vue 3 的新特性。
  • Nuxt 3：完全基于 Vue 3，提供更好的开发体验和性能。

• 性能：

  • Nuxt 3：Vite 提供更快的开发和构建速度，以及即时热重载功能。
  • Nuxt 2：依赖于 Webpack 4，大型项目中的构建和热重载性能较差。

• Server API 功能：

  • Nuxt 2：需要额外服务器框架处理 API 请求。
  • Nuxt 3：内置 Server API 支持，方便全栈应用开发。

• 渲染模式：

  • Nuxt 2：支持 SSR、静态生成和 SPA 模式，但配置较为复杂。
  • Nuxt 3：简化了不同渲染模式的使用，并支持 Edge 渲染。

• 模块系统：

  • Nuxt 3：引入新的模块和插件系统，原生支持 TypeScript。
  • Nuxt 2：模块系统不支持 TypeScript。

• TypeScript 支持：

  • Nuxt 3：完整支持 TypeScript，自动类型推导和检查。
  • Nuxt 2：部分支持，需手动配置。

• 文件系统路由：

  • Nuxt 3：增强了自动化程度，支持动态路径参数和类型推导。
  • Nuxt 2：基础功能较少。

• 中间件和生命周期钩子：

  • Nuxt 3：更加灵活，适合大型项目的复杂逻辑需求。
  • Nuxt 2：相对基础。

• 兼容性：

  • Nuxt 3：提供了向后兼容的迁移工具。
  • Nuxt 2：已停止更新主要功能，仅提供长期支持。

网络请求封装

在 Nuxt 3 中，网络请求通常通过 useFetch 或 $fetch 来实现。这两个函数都是由 Nuxt.js 内置提供的，用于发起 HTTP 请求，并且它们都与 Nuxt 的数据获取机制集成得很好。

• useFetch：这是一个组合式函数，它包装了 useAsyncData 和 $fetch，返回响应式的可组合函数。你可以用它来轻松地获取和管理异步数据。
• $fetch：是一个全局方法，可以在组件的任意位置被调用，无需引入额外的 API。它封装了底层的网络请求逻辑，使开发者可以专注于业务逻辑。

对于网络请求的封装，开发者可以根据自己的需求对 useFetch 或 $fetch 进行进一步封装，例如添加统一的基础 URL、设置默认的请求头、处理错误、添加拦截器等。下面是一个简单的 useFetch 封装示例：

// composables/useHttp.ts
import { useFetch, UseFetchOptions } from '#app';interface HttpParms<T> {url: string;method?: 'GET' | 'POST' | 'PUT' | 'DELETE';query?: Record<string, any>;body?: Record<string, any>;
}export const useHttp = <T>(parms: HttpParms<T>, options?: UseFetchOptions<T>) => {return useFetch<T>(parms.url, {baseURL: process.env.API_URL,method: parms.method || 'GET',query: parms.query,body: parms.body,...options});
};

然后可以在页面或组件中使用这个封装过的函数：

<script setup lang="ts">
import { useHttp } from '~/composables/useHttp';const fetchData = async () => {const { data, pending, error } = await useHttp<{ id: number; name: string }>({url: '/api/data'});console.log(data.value); // 打印获取的数据
};
</script>