Hi, everyone.

I'm experimenting with the app directory, and have a question regarding loading time/speed. I have a gallery page that fetches all artworks, and a dynamic "slug" route that fetches the data for each individual artwork. Both of these are async functions.

app/frontend/gallery/[slug]

My dynamic"slug" page looks like this:

export const revalidate = 30;

async function getArtwork(slug: string) {
  const res = await getArtworkBySlug(slug);
  return res;
}

export default async function ArtPage({
  params: { slug },
}: {
  params: {
    slug: string;
  };
}) {
  const artworkData = getArtwork(slug);
  const navigationData = getNavigationData();
  const [artwork, navigation] = await Promise.all([
    artworkData,
    navigationData,
  ]);

  {/* some logic not needed for this question */}

  return (
    <>
      ...stuff
    </>
  );
}

In the build report, it looks pretty much like the same as when I previously used the old pages folder and revalidation, and that the pages are (SSG). However, when testing the build, it feels like it loads slower than it used to do with the pages + getStaticProps. The images on the dynamic route are approx. 100kb each, so it might be that, idk.

Is this the right/best approach? Or would you guys have done something differently here? I need to fetch data from a CMS, and I want it to be as fast as possible, but at the same time make sure data updates at the CMS gets revalidated within a reasonable amount of time.