reactjs NextJS 13更新服务器组件数据

k5ifujac  于 2023-06-29  发布在  React
关注(0)|答案(1)|浏览(144)

所以我正在学习/适应NextJS 13及其新的APP文件夹。我很难弄清楚如何在不重新加载页面/应用程序的情况下更新服务器组件上的数据。目前,我的HomePage服务器组件从MongoDB获取一个项目(事件)列表。如果

我在后台更改DB数据,然后导航到应用程序上的另一个路由并返回到HomePage而不重新加载,则不会显示新数据。只有当我直接从浏览器硬加载页面时才会显示。我的EventDetails组件也是如此。如果我在浏览器中加载应用程序后直接在数据库中更改某个事件的数据,则除非我直接重新加载页面,否则当我导航到该事件的详细信息时,该更改不会显示在应用程序中。
我在fetch函数中设置了以下选项


catch: 'no-cache'
next: { revalidate: 1 },

,并尝试在组件文件中导出此设置


export const revalidate = 0;
export const dynamic = 'force-dynamic'

;



但它仍然没有更新值。
这是我的完整代码。

// HomePage Component (app/page.jsx)
import React from 'react';
import MeetupList from './_components/meetups/meetupList';
export const revalidate = 0;
export const dynamic = 'force-dynamic';

const fetchMeetups = async () => {
  const response = await fetch('http://localhost:3000/api/meetup', {
    catch: 'no-cache',
    next: { revalidate: 1 },
  });

  const data = await response.json();

  return data;
};

const HomePage = async () => {
  const meetups = await fetchMeetups();
  return (
    <>
      <MeetupList meetups={meetups} />
    </>
  );
};

export default HomePage;

//MeetupList.jsx
import MeetupItem from './MeetupItem';

import styles from './MeetupList.module.css';
export const dynamic = 'force-dynamic';

function MeetupList({ meetups }) {
  return (
    <ul className={styles.list}>
      {meetups.map((meetup) => (
        <MeetupItem
          key={meetup._id}
          id={meetup._id}
          image={meetup.image}
          title={meetup.title}
          address={meetup.address}
        />
      ))}
    </ul>
  );
}

export default MeetupList;

这是我必须做的新服务器的行动,我相信仍然是在测试模式?
谢谢
CES

hlswsv35

hlswsv351#

Official Documentation
默认情况下,所有fetch()请求都会自动缓存并消除重复数据。这意味着,如果您两次发出相同的请求,第二次请求将重用第一次请求的结果。
在以下情况下,不会缓存请求:

  • 使用动态方法(next/headers、export const POST或类似方法),并且获取是一个POST请求(或使用Authorization或cookie头)
  • 默认情况下,fetchCache配置为跳过缓存
  • 重新验证:0或缓存:在单独提取时配置了“no-store”

你为什么不试试

const HomePage = async () => {
  const res = await fetch('http://localhost:3000/api/meetup', { next: { revalidate: 0 } })
  const meetups = res.json()

  return (
    <>
      <MeetupList meetups={meetups} />
    </>
  )
}

相关问题