NextJS 13 Update server component data

Question

So I'm learning/adapting to NextJS 13 and its new APP folder. I'm having a hard time figuring out how to update data on a server component without reloading the page/application. Currently, my home page server component gets a list of items (events) from MongoDB. If I change the database data in the background and then navigate to another route on the app and return to the homepage without reloading, the new data does not show up. It only shows up when I hard reload the page directly from the browser. The same goes for my EventDetails component. If I change one of the event's data directly in the database after loading the app in the browser, when I navigate to the event's details, the change does not show up in the app unless I reload the page directly.

I set the following options in the get function

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

Also tried the settings exported in the component file

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

;

But it still doesn't update the value.

This is my complete 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;

Is this related to the new server operation which I believe is still in beta mode?

Thanks

国际CES

Answer 1

Apparently, this is a long-standing problem in Next 13. See the tickets below for dates back to November 2022, and feel free to vote.

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

You can find many workarounds in the thread above (although some of them no longer work). Please see which one works best for your situation, but here's a workaround I'm currently using:

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