Delay when navigating between routes

Question

Can someone please explain why theres a delay when navigating to a route which is not fetching data server-side? For example, I have a layout.tsx file that fetches the data (route /[media_type]/[id]).

import MediaBanner from "@/Components/media-page/MediaBanner";
import MediaTabs from "@/Components/media-page/MediaTabs";
import MediaHeader from "@/Components/MediaHeader";
import { getMediaById } from "@/lib/api/tmdb";
import { devLog } from "@/lib/utils";
import MediaProvider from "@/providers/MediaProvider";
import { MediaType } from "@/types/trending";
import { ReactNode } from "react";

interface PageProps {
  params: Promise<{
    id: string;
    media_type: MediaType;
  }>;
  children: ReactNode;
}

const MovieLayout = async ({ params, children }: PageProps) => {
  const { id, media_type } = await params;
  let media = await getMediaById(id, media_type);
  media = { ...media, media_type: media_type };

  devLog.log(media);
  return (
    <MediaProvider media={media}>
      <MediaBanner media={media} />
      <MediaHeader media={media} />
      <MediaTabs media={media} />
      {children}
    </MediaProvider>
  );
};

export default MovieLayout;

The MediaProvider is a context provider so that its' children can access the data through useContext (Passing the media data to the other components isnt really necessary here).

However, when navigating to route /[media_type]/[id]/reviews, there seems to be a delay, which does not seem to make sense as Im not fetching data server side. I already have the data thanks to the MediaProvider:

import ReviewMessageBox from "@/Components/media-page/ReviewMessageBox";
import Reviews from "@/Components/media-page/Reviews";
import Padding from "@/Components/ui/Padding";
import React from "react";

const ReviewsPage = () => {
  return (
    <Padding className="pt-2 pb-20">
      <ReviewMessageBox />
      <Reviews />
    </Padding>
  );
};

export default ReviewsPage;

Can someone explain why there's a delay?

Sloth bear · Answer

Looks like your page is dynamic when you'd expect it to be static. Can check with the devtools indicator, or build output.

If that's the issue you can force it to be static with generateStaticParams (it can return an empty array ) or export const dynamic='force-static'

(Dynamic routing means your page defaults to dynamic rendering. See https://nextjs.org/docs/app/getting-started/linking-and-navigating#dynamic-segments-without-generatestaticparams)

Delay when navigating between routes

2 Replies