所以我正在学习/适应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
1条答案
按热度按时间hlswsv351#
Official Documentation说
默认情况下,所有fetch()请求都会自动缓存并消除重复数据。这意味着,如果您两次发出相同的请求,第二次请求将重用第一次请求的结果。
在以下情况下,不会缓存请求:
你为什么不试试