服务端渲染 - 如何让useAsyncData请求不显示在network？

Question

nuxt3中的useAsyncData渲染后要刷新数据，再发起的请求能不显示在network中吗？

<template>  <span>    <slot />    页面访问量：{{ data }}  </span>  <button @click="refresh">刷新数据</button></template><script setup>const { data, pending, refresh, error } = await useAsyncData("mountains", () =>  $fetch("http://localhost:8088/hello"));</script>

所有的请求，不管是初始化还是后续更新数据都不显示在network中，只走服务端渲染

Answer 1

在 Nuxt.js 中，useAsyncData 钩子函数用于异步获取数据，并在组件被渲染时预先加载数据。由于它是异步获取的，因此在组件加载时会发出一个请求，并且该请求会在网络中显示。

要确保 useAsyncData 请求不显示在 network 中，你可以考虑以下方法：

1. 使用服务端渲染 (SSR)：服务端渲染会将组件的 HTML 发送到客户端，并且可以在服务器端预先加载数据。这样，当客户端加载页面时，不会发送任何额外的请求。在 Nuxt.js 中，你可以使用 nuxt/image 或其他 Nuxt.js 插件来优化图片加载，并使用 nuxt/fetch 插件来处理异步数据加载。
2. 使用状态管理：如果你不想使用服务端渲染，另一个选择是使用状态管理工具（如 Vuex）来管理你的数据。你可以在 Vuex store 中定义一个 action 来获取数据，并在组件中调用该 action。这样，只有当组件需要更新数据时才会发出请求，而不是在组件加载时。

对于你的代码示例，如果你希望在点击按钮后刷新数据而不显示在 network 中，你可以考虑使用状态管理的方法。你可以在 Vuex store 中定义一个 action 来获取数据，并在组件中调用该 action。例如：

<template>  <span>    <slot />    页面访问量：{{ data }}  </span>  <button @click="refresh">刷新数据</button></template><script setup>import { useStore } from 'vuex';const store = useStore();const refreshData = () => {  store.dispatch('refreshData');};</script>

在 Vuex store 中：

import { defineStore } from 'vuex';export default defineStore({  state: {    data: null, // 初始数据状态    pending: false, // 请求是否正在进行中    error: null, // 错误信息  },  mutations: {    setData(state, data) {      state.data = data;    },    setPending(state, isPending) {      state.pending = isPending;    },    setError(state, error) {      state.error = error;    },  },  actions: {    async refreshData({ commit }) {      commit('setPending', true); // 设置请求正在进行中      try {        const response = await $fetch("http://localhost:8088/hello"); // 发起请求获取数据        commit('setData', response.data); // 将获取到的数据存储到状态中        commit('setPending', false); // 设置请求完成      } catch (error) {        commit('setError', error); // 存储错误信息到状态中        commit('setPending', false); // 设置请求完成，并显示错误信息给用户看      }    },  },});

通过以上方式，当点击按钮后触发 refreshData action，数据请求将在服务端执行，而不会显示在 network 中。