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

Question

我正在使用 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,
    };
  },
});

Answer 1

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

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

Answer 2

您应该将 Vuex 与 nuxtServerInit 一起使用。

nuxtServerInit 将始终在第一页加载时触发，无论您在哪个页面上。所以你应该先导航到 store/index.js.

之后你创建了一个状态：

export const state = () => ({
  data: []
})

现在您创建每次刷新页面时始终执行的操作。 Nuxt 可以访问商店，即使它在服务器端也是如此。

现在您需要从组件中的商店获取数据：

export const actions = {
  async nuxtServerInit ({ state }, { req }) {
    let response = await axios.get("some/path/...");
    state.data = response.data;
  }
}

您可以将令牌存储在 cookie 中。 Cookies 在客户端，但 nuxtServerInit 有第二个参数。请求 req。这样您就可以访问 headers 并且还有您的 cookie。

let cookie = req.headers.cookie;

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

Nuxt: Fetching data only on server side

vue.js

server-side-rendering

nuxt.js