Next.js（页面路由器）中的“静态内容”是什么？

Question

我正在开发具有以下构建结构的 T3 应用程序：

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

它显示

RecipeImg

被预渲染为静态内容。这是此页面的代码：

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

它包括一个利用 Context API 的

useMainIngreds

自定义挂钩，并且

mainIngreds

的值由另一个页面的用户操作确定。它还涉及到向服务器发出请求以显示图像。

根据我的理解，至少该页面的一部分需要在请求时呈现。那么为什么它会被 Next.js 归类为“静态”呢？

Answer 1

我在此页面上找到了我要找的内容：https://nextjs.org/docs/app/building-your-application/rendering/server-components

• 在大多数网站中，路由不是完全静态或完全动态的 - 它是一个频谱。

• 在渲染过程中，如果发现动态函数或未缓存的数据请求，Next.js 将切换为动态渲染整个路线。

• 作为开发人员，您无需在静态和动态渲染之间进行选择，因为 Next.js 会根据所使用的功能和 API 自动为每个路线选择最佳渲染策略。