nextjs Partial Prerendering

Partial Prerendering

as is
페이지 전체가 static 이거나 dynamic 이고, 빌드 시점에 결정된다.

to be (with ppr)

PPR을 사용하면 동일한 경로(페이지) 정적 컴포넌트와 동적 컴포넌트를 결합해서 사용할 수 있다.

PPR은 빌드 시점에 페이지의 static, dynamic한 부분을 구분짓는다. 빌드 시점에 페이지의 static한 부분은 prerendered 되고 나머지 부분은 유저의 요청이 들어올 때 렌더링이 진행된다.

1. next canary 버전으로 프로젝트를 생성했다.

npx create-next-app@canary 

2. next.config.js에 ppr을 사용할거라고 선언해주었다.

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  experimental: {
    ppr: "incremental",
  },
};

export default nextConfig;

3. Static Component와 Dynamic Component를 만들어봄

//src/components/StaticComponent/index.tsx

import Image from "next/image";

export const StaticComponent = () => {
  return (
    <>
      <div>나는 정적인 컴포넌트이다.</div>
    </>
  );
};


//src/components/DynamicComponent/index.tsx
export const DynamicComponent = async () => {
  const data = await getServerData();
  return (
    <>
      <div>나는 동적인 컴포넌트 이다.</div>
    </>
  );
};

const getServerData = async () => {
  await new Promise((resolve) => setTimeout(resolve, 2000));
  return { data: "서버에서 가져온 데이터" };
};

4. PPR을 사용하는 방법은 그저.. DynamicComponent를 Suspense로 감싸주고, export const experimental_ppr = true; 추가

import { DynamicComponent } from "@/components/DynamicComponent";
import { StaticComponent } from "@/components/StaticComponent";
import { Suspense } from "react";

export const experimental_ppr = true;

export default function Page() {
  return (
    <section>
      <h1>This will be prerendered</h1>
      <StaticComponent />
      <Suspense fallback={<p>나는 동적 컴포넌트의 폴백이다</p>}>
        <DynamicComponent />
      </Suspense>
    </section>
  );
}

Time to first byte 측정

Waiting for server response: 요청의 첫번째 바이트가 도달하는데 까지 걸리는 시간 (=TTFB: Time to first byte). 브라우저에서 서버로 실질적으로 요청이 보내지고 받는 시간. 서버가 응답을 준비하는 시간까지 포함된다.

경미한 차이이긴 하지만 Partial prerendering 쪽이 좀 더 빠름

Dynamic rendering test

npm run build

npm start

Partial prerendering test

npm run build

npm start

빌드해보니 Partial Prerender 가 생겼다!