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

Posted 2023-02-22

【中文标题】Nuxt：仅在服务器端获取数据

【英文标题】：Nuxt: Fetching data only on server side

【发布时间】：2020-08-04 20:16:45

【问题描述】：

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

【参考方案1】：

您应该将 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。有了它，您就可以访问标题并且还有您的 cookie。

let cookie = req.headers.cookie;

【讨论】：

不需要身份验证，无论是谁，无论在哪里，请求总是一样的。我需要试试你的解决方案，我想这就是我需要的。

您也可以将 API 令牌存储在存储中。当你在页面之间导航时，商店不会失去他的状态。只有刷新页面，商店才会刷新

检查时用户可以使用商店吗？这是 Github API 的个人访问令牌，不是我自己的平台令牌。

商店在技术上是可检查的，因为它在客户端...因为nuxtServerInit 在服务器端，您可以使用env 变量

我不太确定，但您应该能够在nuxtServerInit 函数中访问像这样的变量process.env

【参考方案2】：

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

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

【讨论】：

这确实是一个解决方案，但我只是捕捉错误并没有做任何事情，这是一样的。我的问题是如果我导航到这个页面，我没有数据。我真的需要服务器来发出这个请求，而不是服务器

@nook 那么你将需要使用location.href=/my-page 而不是使用 Vue 路由器，所以它会强制加载。

显然。太简单了，我忘记了。不过，一个基本的锚应该可以完成这项工作。请更新您的答案，以便我验证它