Nuxt：仅在服务器端获取数据

我使用 Github 的 API 来获取固定存储库的列表，并将调用放入 AsyncData 方法中，以便在第一次渲染时获得该列表。但我刚刚了解到 AsyncData 在服务器端调用一次，然后每次在客户端加载页面时调用。这意味着客户端不再拥有进行 API 调用的令牌，无论如何，我不会让我的 Github 令牌出现在客户端中。

当我切换页面（从另一个页面到带有列表的页面）时，数据不存在，我只有默认的空数组

我不知道确保我的数据始终加载在服务器端的最佳方法是什么？

export default defineComponent({
  name: 'Index',
  components: { GithubProject, Socials },
  asyncData(context: Context) {
    return context.$axios.$post<Query<UserPinnedRepositoriesQuery>>('https://api.github.com/graphql', {
      query,
    }, {
      headers: {
        // Token is defined on the server, but not on the client
        Authorization: `bearer ${process.env.GITHUB_TOKEN}`,
      },
    })
      .then((data) => ({ projects: data.data.user.pinnedItems.nodes }))
      .catch(() => {});
  },
  setup() {
    const projects = ref<Repository[]>([]);

    return {
      projects,
    };
  },
});

将您的请求包含在if(process.server)内asyncData页面的方法。

如果您绝对需要服务器端调用并且无法从客户端执行此操作，那么您可以直接操作location.href强制页面完全加载。