Nuxt.js核心知识详解

时间：2024-01-21 14:50:16

Nuxt.js 服务器端的完整渲染（SSR）流程：

  1. 客户端发起请求：

    • 用户通过浏览器访问 Nuxt.js 应用，浏览器向服务器发送一个页面请求。

  2. Nuxt.js 服务器接收请求：

    • Nuxt.js 应用的服务器部分（运行在 Node.js 环境中）接收到这个请求。

  3. 请求数据：

    • Nuxt.js 服务器上的代码（可能是页面的 asyncData 或 fetch 方法）负责向实际的数据源发送请求。这个数据源可以是内部的 API 路由（如果你在同一 Nuxt.js 项目中也编写了 API 逻辑），或者是外部的 API 服务。
    • 这一步中，服务器获取到的数据通常是 JSON 格式。

  4. 服务器端数据渲染：

    • 一旦 Nuxt.js 服务器获取到数据，它会在服务器端使用 Vue.js 的渲染引擎将页面组件和获取的数据渲染成 HTML。此过程包括将数据填充到 Vue 组件的模板中，从而生成完整的 HTML。

  5. 发送 HTML 响应：

    • 渲染完成后的 HTML 页面作为响应发送回客户端（浏览器）。

  6. 客户端展示页面：

    • 客户端浏览器接收到 HTML 响应，并渲染展示给用户。在这一步，用户看到的是一个已经渲染好的页面。

关键点：

  • 数据请求的发起者：在服务器端渲染中，是 Nuxt.js 服务器而不是客户端浏览器直接请求数据。

  • 渲染过程：数据的获取和 HTML 的渲染都在服务器端完成。客户端接收到的是最终的 HTML，而非原始 JSON 数据。

  • 客户端与服务器端的角色：在 SSR 中，服务器负责获取数据和渲染首次加载的页面，而客户端则负责后续的交互和导航（通过客户端路由）。

  • SSR vs 客户端渲染:

    • 对于首次页面加载，Nuxt.js 使用服务器端渲染。
    • 对于后续的页面导航，通常使用客户端路由，类似于传统的单页应用（SPA）。

  • 性能和SEO:

    • 服务器端渲染提供了更快的首屏渲染时间和更好的 SEO，因为搜索引擎可以直接抓取服务器渲染的 HTML。

  • 数据获取:

    • 数据获取是在服务器端进行的，减少了客户端的负担，特别是在首次加载时。

通过这种方式，Nuxt.js 结合了传统多页应用（MPA）的优点（如SEO友好）和单页应用（SPA）的交互体验优势。Nuxt.js 改善了首次加载性能和搜索引擎优化，同时提供了一个丰富的客户端交互体验。

在 Nuxt.js 中使用 asyncData 和 fetch 方法进行数据获取与在普通 Vue 应用中直接使用 Axios 进行数据请求的区别

这些区别主要涉及到数据获取的时机、上下文、以及服务器端渲染（SSR）的支持。

1. 数据获取的时机

  • Nuxt.js 的 asyncData 和 fetch：

    • 这些方法专为服务器端渲染设计，它们在服务器端执行，然后将结果作为组件的数据在服务端渲染期间使用。
    • asyncData 方法在页面组件每次加载之前被调用，它允许你在设置组件的数据之前异步获取或计算数据。这个方法接收当前页面的上下文对象，允许访问路由参数等。
    • fetch 方法也用于获取数据，但它是在组件的实例化阶段之后调用的，适用于填充 Vuex 存储或执行其他有副作用的操作。

  • 普通 Vue 应用中使用 Axios：

    • 在传统的 Vue 应用中，数据请求通常在组件的生命周期钩子（如 created 或 mounted）中进行。这些请求仅在客户端执行。
    • 这种方式不适用于服务器端渲染，因为在服务器渲染时，生命周期钩子不会在服务器端触发。

2. SSR 支持

  • Nuxt.js：

    • asyncData 和 fetch 允许在服务器端获取数据，并在服务器端渲染完成的 HTML 中直接包含这些数据。这对 SEO 和首屏加载时间非常有利。
    • 这意味着最终渲染的页面包含了预先加载的数据，无需等待客户端 JavaScript 运行和数据请求完成。

  • 普通 Vue 应用：

    • 使用 Axios 在生命周期钩子中的数据请求仅在客户端进行。如果用于 SSR，页面将在没有数据的情况下渲染，然后在客户端填充数据。
    • 这可能导致更慢的首屏显示和不利于 SEO 的情况。

3. 上下文访问

  • Nuxt.js：

    • asyncData 方法接收一个上下文对象，这个对象包含了路由参数、查询参数、用户代理等信息。
    • 这使得在服务端渲染时，可以基于当前请求的上下文来获取数据。

  • 普通 Vue 应用：

    • 在 Vue 生命周期钩子中使用 Axios 发起的请求通常不会接收到关于当前请求的服务器端上下文信息。

结论

asyncData 和 fetch 方法是 Nuxt.js 提供的特殊功能，专为 SSR 场景设计，它们允许在服务器端获取数据并直接渲染到最终的 HTML 中，这有助于改善首屏加载时间和 SEO。而在普通 Vue 应用中，数据请求通常仅在客户端发生，不适用于 SSR 场景。

示例：使用 asyncData 方法，将涉及从前端发起请求到服务器端获取数据，最后在页面上渲染数据的完整步骤。

步骤 1: 创建 Nuxt.js 页面组件

假设我们正在构建一个展示博客文章列表的 Nuxt.js 页面。首先，我们需要在 pages 目录下创建一个新的 Vue 文件，例如 pages/blogs.vue。

<template>
  <div>
    <h1>博客文章</h1>
    <ul>
      <li v-for="blog in blogs" :key="blog.id">
        {{ blog.title }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  // 使用 asyncData 方法获取数据
  async asyncData({ $axios }) {
    try {
      const res = await $axios.$get('https://example.com/api/blogs');
      return { blogs: res };
    } catch (error) {
      console.error('Error fetching blogs:', error);
      return { blogs: [] };
    }
  }
};
</script>

在这个组件中，我们使用 asyncData 方法来从一个假设的 API 端点 https://example.com/api/blogs 获取博客文章数据。这个方法异步执行，并返回一个包含博客文章的对象。

步骤 2: 安装和配置 Axios

为了在 asyncData 方法中发起 HTTP 请求，我们将使用 Axios。首先，确保安装了 @nuxtjs/axios 模块：

npm install @nuxtjs/axios

接下来，在 nuxt.config.js 中配置 Axios 模块：

export default {
  modules: [
    '@nuxtjs/axios',
  ],
  axios: {
    // Axios 配置（如果有）
  },
  // 其他配置...
};

步骤 3: 服务器端渲染过程

当用户访问 /blogs 路径时，Nuxt.js 服务器将执行 blogs.vue 组件中的 asyncData 方法。

  • Nuxt.js 服务器调用 asyncData 方法，并等待其解析。
  • 在 asyncData 方法内，使用 Axios 向 https://example.com/api/blogs 发送 GET 请求。
  • 获取到数据后，asyncData 方法返回一个对象，例如 { blogs: res }，其中 res 是从 API 获取的博客文章列表。
  • Nuxt.js 服务器使用返回的数据来渲染组件，生成包含博客文章的 HTML。

步骤 4: 客户端显示

  • 渲染完成的 HTML 页面被发送到客户端（用户的浏览器）。
  • 用户的浏览器接收到 HTML，并展示博客文章列表。

结论

通过使用 asyncData，Nuxt.js 可以在服务器端获取必要的数据，并在将页面发送到客户端之前完成页面的渲染。这样做的优势在于，提高了首屏加载速度，改善了 SEO，并减少了客户端的计算负担。

请注意，实际使用时，你需要将 https://example.com/api/blogs 替换为你自己的 API 端点。

在 Nuxt.js 的 asyncData 方法中，当你打印 res时：

它通常是 JSON 格式，而不是 HTML。这是因为 asyncData 方法通常用于从 API 获取数据，而这些数据大多以 JSON 格式返回。

以下是这个过程中的关键步骤，以及在哪一步数据被转换成 HTML：

步骤 1: 获取数据

  • 在 Nuxt.js 页面组件的 asyncData 方法中，通过发送 HTTP 请求（通常使用 Axios）来获取数据。
  • 当你在 asyncData 方法中打印 res，你看到的是从 API 请求返回的数据，这通常是 JSON 格式。

步骤 2: 数据转换为组件状态

  • asyncData 方法返回的数据被合并到组件的数据对象中。这意味着返回的 JSON 数据现在成为了 Vue 组件的响应式数据。
  • 在组件模板中，你可以使用这些数据来动态构建 HTML。例如，你可能会遍历一个博客文章数组并显示每篇文章的标题。

步骤 3: 服务器端渲染 HTML

  • 当 Nuxt.js 服务器接收到客户端的请求时，它会执行 asyncData 方法，并等待数据获取完成。
  • 一旦数据准备好，Nuxt.js 服务器会使用 Vue 的服务器端渲染功能，将 Vue 组件（及其数据）渲染成 HTML 字符串。
  • 这个 HTML 是由 Vue 模板和 asyncData 提供的数据生成的。所以，数据从 JSON 转换成 HTML 是在 Nuxt.js 服务器进行服务器端渲染时发生的。

步骤 4: 发送 HTML 到客户端

  • 渲染好的 HTML 页面作为响应发送回客户端浏览器。
  • 客户端浏览器接收并渲染这个 HTML，用户看到的是已经渲染好的页面内容。

结论

  • 在 asyncData 方法中，你获取的是 JSON 格式的数据。
  • 数据转换成 HTML 的过程发生在 Nuxt.js 服务器端，作为服务器端渲染的一部分。
  • 客户端接收到的是已经渲染好的 HTML 页面。

看似我在写vue代码其实相当于我是后端在编写HTML模版

在 Nuxt.js（或任何其他基于 Vue.js 的 SSR 框架）中，编写的 Vue 代码在服务器端执行时，实际上充当了类似传统后端模板渲染的角色。但有一些细微的区别需要注意：

1. Vue 组件作为模板

  • 在 Nuxt.js 中，您编写的 Vue 组件（包括模板、脚本和样式）不仅仅是前端代码。当进行服务器端渲染时，这些组件也被视为动态模板。
  • 在服务器端，Nuxt.js 会执行这些组件，并将它们渲染成 HTML。这包括将数据绑定到模板中，生成最终的 HTML 字符串。

2. 服务器端数据获取

  • 使用 asyncData 或 fetch 方法，在服务器端获取数据。这些数据被视为模板渲染的一部分，与 Vue 组件的模板结合，生成完整的 HTML 页面。

3. 双重角色：前端和后端

  • 尽管在 SSR 中，Vue 组件在服务器上执行并生成 HTML，但这些相同的组件文件也用于客户端。一旦页面在客户端加载，Vue 会接管，使这些组件变得交互性强。
  • 这种方式提供了一个“同构”或“通用”体验：相同的代码在服务器上用于渲染静态 HTML，在客户端用于动态交互。

4. 客户端激活

  • 当渲染好的 HTML 页面到达浏览器时，客户端的 Vue.js 会“激活”这些静态标记，添加事件监听器和响应式数据绑定，使其成为一个完整的 SPA（单页面应用程序）。

结论

  • 在 Nuxt.js SSR 中，你编写的是 Vue 组件，但在服务器端，这些组件也充当了模板的角色，用于生成 HTML。这是一个前后端共享同一代码基础的强大模式，使得你可以利用 Vue.js 的灵活性和服务器端渲染的好处。

如果我不使用asyncData发起请求，而是使用正常的axios发请求就没有服务端的渲染效果了，也就和普通的vue项目一样了

如果在 Nuxt.js 项目中不使用 asyncData 或 fetch 方法，而是选择在 Vue 组件的生命周期钩子（例如 created 或 mounted）中使用普通的 Axios 发起请求，那么将失去 Nuxt.js 服务器端渲染（SSR）的一些主要优势。具体来说：

不使用 asyncData 或 fetch：

  1. 客户端数据获取：当您在生命周期钩子中使用 Axios，数据获取发生在客户端。这意味着服务器端渲染的页面不会包含这些异步获取的数据。

  2. 影响 SEO 和性能：因为服务器渲染的页面不包含异步数据，搜索引擎爬虫在抓取页面时不会看到这些数据。这可能对 SEO 不利。此外，用户可能会看到页面加载过程中的数据填充延迟。

  3. SPA-like 行为：这种方法使得 Nuxt.js 应用的行为更类似于传统的单页应用（SPA），其中大部分渲染逻辑都发生在客户端。

使用 asyncData 或 fetch：

  1. 服务器端数据获取：asyncData 和 fetch 允许在服务器端获取数据，并在发送到客户端之前在服务器上完成页面的渲染。

  2. 改善 SEO 和首屏加载时间：由于页面是在服务器上渲染的，并且包含了必要的数据，搜索引擎能够抓取到完整的页面内容，对 SEO 更加友好。同时，用户体验也得到改善，因为首屏加载时不需要额外的数据获取和渲染。

  3. SSR 的优势：这种方法充分利用了 Nuxt.js 的 SSR 特性，为用户提供了更快的内容加载体验，同时也提高了页面的搜索引擎可见性。

结论

如果您的 Nuxt.js 应用的目标是提高 SEO 效果和/或提供更快的内容加载速度，那么使用 asyncData 或 fetch 是非常重要的。如果您不需要这些特性，或者应用主要侧重于客户端交互，那么在生命周期钩子中使用 Axios 也是可行的。每种方法都有其适用场景和优势。

相关文章