NextJS 13 Mettre à jour les données des composants du serveur

Question

J'apprends/je m'adapte donc à NextJS 13 et à son nouveau dossier APP. J'ai du mal à comprendre comment mettre à jour les données sur un composant serveur sans recharger la page/l'application. Actuellement, le composant serveur de ma page d'accueil obtient une liste d'éléments (événements) de MongoDB. Si je modifie les données de la base de données en arrière-plan, puis que je navigue vers un autre itinéraire sur l'application et que je reviens à la page d'accueil sans recharger, les nouvelles données ne s'affichent pas. Il n'apparaît que lorsque je recharge la page directement depuis le navigateur. Il en va de même pour mon composant EventDetails. Si je modifie l'une des données de l'événement directement dans la base de données après avoir chargé l'application dans le navigateur, lorsque je navigue vers les détails de l'événement, la modification n'apparaît pas dans l'application, sauf si je recharge directement la page.

J'ai défini les options suivantes dans la fonction get

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

J'ai également essayé les paramètres exportés dans le fichier du composant

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

;

Mais il ne met toujours pas à jour la valeur.

Voici mon code complet.

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

Est-ce lié au nouveau fonctionnement du serveur qui, je crois, est toujours en mode bêta ?

Merci

Salon international de l'électronique grand public

Answer 1

Apparemment, il s'agit d'un problème de longue date dans Next 13. Consultez les billets ci-dessous pour les dates remontant à novembre 2022 et n'hésitez pas à voter.

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

Vous pouvez trouver de nombreuses solutions de contournement dans le fil de discussion ci-dessus (même si certaines d'entre elles ne fonctionnent plus). Veuillez voir lequel fonctionne le mieux pour votre situation, mais voici une solution de contournement que j'utilise actuellement :

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