首页 前端知识 Nuxt.js核心知识详解

Nuxt.js核心知识详解

2024-01-31 12:01:36 前端知识 前端哥 661 221 我要收藏

Nuxt.js 服务器端的完整渲染(SSR)流程:

  1. 客户端发起请求

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

    • Nuxt.js 应用的服务器部分(运行在 Node.js 环境中)接收到这个请求。
  3. 请求数据

    • Nuxt.js 服务器上的代码(可能是页面的 asyncDatafetch 方法)负责向实际的数据源发送请求。这个数据源可以是内部的 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 中使用 asyncDatafetch 方法进行数据获取与在普通 Vue 应用中直接使用 Axios 进行数据请求的区别

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

1. 数据获取的时机

  • Nuxt.js 的 asyncDatafetch

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

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

2. SSR 支持

  • Nuxt.js

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

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

3. 上下文访问

  • Nuxt.js

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

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

结论

asyncDatafetch 方法是 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. 服务器端数据获取

  • 使用 asyncDatafetch 方法,在服务器端获取数据。这些数据被视为模板渲染的一部分,与 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 项目中不使用 asyncDatafetch 方法,而是选择在 Vue 组件的生命周期钩子(例如 createdmounted)中使用普通的 Axios 发起请求,那么将失去 Nuxt.js 服务器端渲染(SSR)的一些主要优势。具体来说:

不使用 asyncDatafetch

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

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

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

使用 asyncDatafetch

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

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

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

结论

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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/876.html
评论
会员中心 联系我 留言建议 回顶部
复制成功!