SSG (Static Site Generation)

• 생성 시점: 빌드 타임
  • 배포 시점에 서버에서 데이터 fetching과 HTML생성이 완료되어 정적 파일로 저장되고 캐싱
  • 이후 사용자 요청 시 캐시된 정적 HTML을 제공
  • 빌드 후 데이터 변경이 있다면 재 빌드가 필요함

SSR (Server Side Rendering)

• 생성시점: 런타임, 사용자 요청 시점
  • 매 요청마다 새로운 HTML 생성

그래서 현재 내가 작성한 코드는 빌드타임에만 생성될 것이고, Daily 정보를 받아야 하는 시점에 이전에 생성했던 HTML을 재사용 하게 될 것이다.

src/app/page.tsx

import { dehydrate, HydrationBoundary } from "@tanstack/react-query";

import { Header } from "@/shared/components";
import { DailyFewHeader, DailyFewSection } from "@/shared/widgets";

import { getGroupsOptions, getCategoriesOptions } from "@/shared/remotes";
import { getQueryClient } from "@/api/client/queryClient";
import { formatDateToYYYYMMDD } from "@/shared/utils";

export default async function Home() {
  const today = formatDateToYYYYMMDD(new Date());
  const queryClient = getQueryClient();

  const categoriesResponse = await queryClient.fetchQuery(
    getCategoriesOptions(),
  );
  const groupsResponse = await queryClient.fetchQuery(getGroupsOptions(today));
  const categoriesData = categoriesResponse.data;
  const groupsData = groupsResponse.data.groups;

  return (
    <HydrationBoundary state={dehydrate(queryClient)}>
      <Header />
      <div className="m-auto max-w-1200">
        <main className="px-16">
          <DailyFewHeader />
          <section className="flex w-full flex-col gap-24 overflow-hidden md:flex-row">
            <DailyFewSection news={groupsData} categories={categoriesData} />
          </section>
        </main>
      </div>
    </HydrationBoundary>
  );
}

이를 해결하기 위해 해당 페이지를 SSR로 생성하게끔 하거나, ISR로 주기적으로 빌드하도록 해야 한다.