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>