렌더링 패턴 ( Static Rendering )

Static Rendering

• 웹 페이지의 HTML 콘텐츠를 빌드 타임(build time)에 미리 생성해두고, 사용자가 페이지를 요청할 때 서버가 그 완성된 HTML 파일을 그대로 응답하는 렌더링 방식 입니다.
• Next.js 에서는 `getStaticProps()` 메서드를 통해 구현됩니다.
  • 빌드 타임 때 필요한 데이터를 미리 가져오기 위해 사용하는 비동기 함수로, 서버에서 데이터를 미리 가져와서 HTML을 생성할 수 있습니다.
• 페이지에 표시될 데이터가 빌드 시점에 이미 정해져 있고 자주 변경되지 않는 경우에 사용됩니다.
  • ex ) 마케팅 페이지 콘텐츠, 제품 정보 페이지 등

import { Listings, ListingsSkeleton } from "../components";

export default function Home(props) {
  return <Listings listings={props.listings} />;
}

export async function getStaticProps() {
  const res = await fetch("https://my.cms.com/listings");
  const listings = await res.json();

  return { props: { listings } };
}

Static Rendering 동작 과정

1. 사용자가 웹사이트에 접속합니다.

2. 서버는 빌드 타임 때 미리 만들어둔 정적인 HTML을 응답으로 보냅니다.

3. 브라우저가 HTML을 파싱(해석)합니다.

• 브라우저가 HTML을 받으면 HTML Parser가 콘텐츠를 분석하고 DOM을 구성해서 사용자에게 보여줍니다.
• 이 시점에서는 페이지는 정적인 상태으로 아무런 인터렉션이 없습니다.

4. 자바스크립트 번들이 다운로드되고 hydration 단계를 거칩니다.

• JS가 로드되어 실행되면, 기존 HTML에 이벤트 리스너를 연결되어 페이지가 인터랙티브하게 변함. 이 과정을 Hydration이라고 합니다.

장점

• 이미 완성된 HTML을 전달하기 때문에, 초기 로딩 속도가 빠르다.
• 검색 엔진이 js를 실행하지 않아도 콘텐츠를 바로 확인할 수 있기 때문에 SEO 최적화에 유리하다.
• HTML 파일이 정적이므로 CDN에 캐싱되어 전 세계에 빠르게 서비스 배포가 가능합니다.
• 매 요청마다 페이지를 새로 생성할 필요가 없어서 서버 부담이 적습니다.

단점

• 정적 파일은 빌드 시점에만 생성되므로, 실시간 데이터 반영이 어렵습니다.
• 페이지 수가 많으면 빌드 시간이 길어질 수 있습니다.

Web Vitals

Lighthouse / Web Vitals

Static Rendering 과 Web Vitals

• 정적인 HTML이 이미 생성돼 있어서 브라우저는 바로 렌더링이 가능합니다. 따라서 CSR과 비교하여 빠른 FCP, LCP가 측정됩니다.
  • FCP ( First Contentful Paint ) : 브라우저에 최초로 콘텐츠를 화면에 렌더링한 시점
  • LCP ( Largest Contentful Paint ) : 가장 큰 콘텐츠 요소(주로 이미지, 텍스트 블록 등)가 화면에 표시되는 시간