NextJS 13 Serverkomponentendaten aktualisieren

Question

Also lerne/gewöhne ich mich an NextJS 13 und seinen neuen APP-Ordner. Es fällt mir schwer herauszufinden, wie ich Daten auf einer Serverkomponente aktualisieren kann, ohne die Seite/Anwendung neu zu laden. Derzeit ruft meine Homepage-Serverkomponente eine Liste von Elementen (Ereignissen) von MongoDB ab. Wenn ich die Datenbankdaten im Hintergrund ändere und dann in der App zu einer anderen Route navigiere und ohne Neuladen zur Startseite zurückkehre, werden die neuen Daten nicht angezeigt. Es wird nur angezeigt, wenn ich die Seite direkt aus dem Browser neu lade. Das Gleiche gilt für meine EventDetails-Komponente. Wenn ich nach dem Laden der App im Browser eines der Ereignisdaten direkt in der Datenbank ändere und zu den Ereignisdetails navigiere, wird die Änderung nicht in der App angezeigt, es sei denn, ich lade die Seite direkt neu.

Ich habe die folgenden Optionen in der Get-Funktion festgelegt

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

Habe auch die in der Komponentendatei exportierten Einstellungen ausprobiert

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

;

Aber der Wert wird immer noch nicht aktualisiert.

Das ist mein vollständiger Code.

// 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;

Hängt das mit dem neuen Serverbetrieb zusammen, der meiner Meinung nach noch im Beta-Modus ist?

Danke

Internationale Messe für Unterhaltungselektronik

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>