next.js 如何在服务器端组件加载时调用FETCH API

ctrmrzij 于 12个月前发布在其他

关注(0)|答案(1)|浏览(152)

每当组件加载时，我想在Next.js中的服务器端组件中再次获取数据（就像使用客户端组件时在useEffect中调用API一样）
目前只有当我刷新页面时，才会再次调用API。
下面是我的API调用代码

const garageData = await fetch(
  `${process.env.NEXT_PUBLIC_BACKEND_URL}users`,
  {
    cache: 'no-store',
    next: { tags: ['user'] },
    method: 'GET',
    headers: {
      Authorization: `Bearer ${data?.jwtToken}`,
    },
  }
);

return garageData;

字符串
我已经将该高速缓存设置为“无存储”，但当我通过路由器或链接路由到此页面时，它仍然不会再次调用API。
我在组件中调用API，如下所示

const Home = async () => {
  const data = await getData();

  return <div>Home</div>;
};

export default Home;

型

next.js

来源：https://stackoverflow.com/questions/77416563/how-to-recall-fetch-api-whenever-my-server-side-component-loads

1条答案

按热度按时间

u4dcyp6a1#

useEffect钩子就是你想要的。
在返回之前在组件函数体中发生的任何事情首先在服务器上被调用（一次），然后在每次组件重新呈现时在客户端上被调用。

import React, { useEffect } from 'react';

const Home = () => {

    useEffect(() => {
       // client side code goes here
       // runs only once on the client after Nextjs finishes hydrating
       const data = await getData();
    }, []);

    return <div>Home</div>;
};

export default Home;

字符串

赞(0）回复(0）举报 12个月前

我来回答

next.js 如何在服务器端组件加载时调用FETCH API

1条答案

相关问题

热门标签

最新问答