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