NextJS 13 更新服务器组件数据

Question

所以我正在学习/适应 NextJS 13 及其新的 APP 文件夹。我很难弄清楚如何在无需重新加载页面/应用程序的情况下更新服务器组件上的数据。目前，我的主页服务器组件从 MongoDB 获取项目（事件）列表。如果我在后台更改数据库数据，然后导航到应用程序上的另一条路线并返回主页而不重新加载，则不会显示新数据。仅当我直接从浏览器硬重新加载页面时才会显示它。我的 EventDetails 组件也是如此。如果我在浏览器中加载应用程序后直接在数据库中更改事件的数据之一，则当我导航到该事件的详细信息时，该更改不会显示在应用程序中，除非我直接重新加载页面。

我在获取函数中设置了以下选项

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;

这是否与我认为仍处于 Beta 模式的新服务器操作有关？

谢谢

国际消费电子展

Answer 1

显然，这是 Next 13 中长期存在的问题。请参阅以下可追溯到 2022 年 11 月的票证，并随时投票。

https://github.com/vercel/next.js/issues/42991

您可以在上面的线程中找到许多解决方法（尽管其中一些不再有效）。请查看哪一种最适合您的情况，但这是我目前使用的一种解决方法：

// components/Link.tsx

"use client";

import { ComponentProps, forwardRef } from "react";
import NextLink from "next/link";
import { useRouter } from "next/navigation";

export default forwardRef<
  HTMLAnchorElement,
  Omit<ComponentProps<typeof NextLink>, "href"> & {
    href: string;
    refresh?: boolean;
  }
>(function Link({ href, onClick, refresh, children, ...rest }, ref) {
  const router = useRouter();

  return refresh ? (
    <a
      ref={ref}
      href={href}
      onClick={(event) => {
        onClick?.(event);
        if (!event.defaultPrevented) {
          event.preventDefault();
          router.push(href);
          router.refresh();
        }
      }}
      {...rest}
    >
      {children}
    </a>
  ) : (
    <NextLink ref={ref} href={href} onClick={onClick} {...rest}>
      {children}
    </NextLink>
  );
});

// test/page.tsx

import Link from "@/components/Link";

<Link refresh href="/">Home</Link>