What qualifies as 'static content' in Next.js (Pages Router)?

Question

I am working on a T3 app with the following build structure:

Route (pages)                              Size     First Load JS
┌ ○ /                                      22.1 kB         160 kB
├   /_app                                  0 B             134 kB
├ ○ /404                                   182 B           134 kB
├ λ /api/auth/[...nextauth]                0 B             134 kB
├ λ /api/trpc/[trpc]                       0 B             134 kB
├ ○ /RecipeImg                             663 B           139 kB
└ ○ /text                                  388 B           135 kB
+ First Load JS shared by all              143 kB
  ├ chunks/framework-d0154717f77ffdb3.js   66.8 kB
  ├ chunks/main-d06b34d932087d19.js        32.3 kB
  ├ chunks/pages/_app-d7d969eed6118a93.js  33.3 kB
  ├ chunks/webpack-bd27d4452b026a66.js     1.78 kB
  └ css/155085108fc313ab.css               9.34 kB

○  (Static)   prerendered as static content
λ  (Dynamic)  server-rendered on demand using Node.js

It shows RecipeImg was pre-rendered as static content. Here is the code for this page:

import { type RouterOutputs } from "../utils/api";
import Image from "next/image";
import { api } from "~/utils/api";
import { useMainIngreds } from "../context/useMainIngreds";

export type Recipe = RouterOutputs["recipe"]["getIdeas"][0];

export default function RecipeImg() {
  const { mainIngreds } = useMainIngreds();

  const recipes = api.recipe.getImg.useQuery(mainIngreds, { enabled: true });

  if (!recipes.data?.[0]) return;

  const recipe = recipes.data[0];

  if (!recipe) return;

  const imageUrl = `https://some-storage/${recipe.Image_Name}.jpg`;

  return (
    <>
      <Image src={imageUrl} alt="" width={500} height={500} priority />;
    </>
  );
}

It includes a useMainIngreds custom hook that leverages the Context API and the value of mainIngreds is determined by user actions from another page. It also involves a request to the server in order to display an image.

From my understanding, as least part of this page would need to be rendered at request time. So why would it be categorized as 'Static' by Next.js?

Answer 1

I found what I was looking for on this page: https://nextjs.org/docs/app/building-your-application/rendering/server-components

• In most websites, routes are not fully static or fully dynamic - it's a spectrum.

• During rendering, if a dynamic function or uncached data request is discovered, Next.js will switch to dynamically rendering the whole route.

• As a developer, you do not need to choose between static and dynamic rendering as Next.js will automatically choose the best rendering strategy for each route based on the features and APIs used.