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

Question

我正在使用Github的API来获取我的固定存储库的列表，然后将调用放在AsyncData方法中，以便将列表放在第一个渲染器上。但是我刚刚了解到AsyncData在ServerSide上被调用一次，然后每次在客户端上加载页面时都会被调用。这意味着客户端不再具有进行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,
    };
  },
});

Answer 1

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