NextJS 13 Kemas kini data komponen pelayan

Question

Jadi saya sedang belajar/menyesuaikan diri dengan NextJS 13 dan folder APP baharunya. Saya mengalami kesukaran untuk memikirkan cara mengemas kini data pada komponen pelayan tanpa memuatkan semula halaman/aplikasi. Pada masa ini, komponen pelayan halaman utama saya mendapat senarai item (acara) daripada MongoDB. Jika saya menukar data pangkalan data di latar belakang dan kemudian menavigasi ke laluan lain pada apl dan kembali ke halaman utama tanpa memuat semula, data baharu itu tidak akan dipaparkan. Ia hanya muncul apabila saya memuatkan semula halaman secara terus dari penyemak imbas. Perkara yang sama berlaku untuk komponen EventDetails saya. Jika saya menukar salah satu data acara terus dalam pangkalan data selepas memuatkan apl dalam penyemak imbas, apabila saya menavigasi ke butiran acara, perubahan itu tidak dipaparkan dalam apl melainkan saya memuatkan semula halaman secara langsung.

Saya tetapkan pilihan berikut dalam fungsi get

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

Juga mencuba tetapan yang dieksport dalam fail komponen

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

;

Tetapi ia masih tidak mengemas kini nilainya.

Ini adalah kod lengkap saya.

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

Adakah ini berkaitan dengan operasi pelayan baharu yang saya percaya masih dalam mod beta?

Terima kasih

Pameran Elektronik Pengguna Antarabangsa

Answer 1

Nampaknya ini adalah masalah lama dalam 13 Seterusnya. Lihat tiket di bawah untuk tarikh kembali ke November 2022, dan jangan ragu untuk mengundi.

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

Anda boleh menemui banyak penyelesaian dalam urutan di atas (walaupun sebahagian daripadanya tidak lagi berfungsi). Sila lihat yang mana satu yang paling sesuai untuk situasi anda, tetapi berikut ialah penyelesaian yang sedang saya gunakan:

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