렌더링 패턴 ( SSR )

SSR ( Server Side Rendering )

• 브라우저가 아닌 서버에서 HTML을 미리 생성해 클라이언트에 전달하는 렌더링 방식입니다.
• 사용자가 웹 페이지를 요청하면, 서버가 해당 페이지의 HTML을 완전히 만들어서 사용자에게 응답합니다.
• Next.js 에서는 `getServerSideProps()` 메서드를 통해 구현됩니다.
  • getServerSideProps는 서버리스(Serverless) 함수 혹은 실제 Node.js 서버에서 요청마다 실행되는 함수가 됩니다. 따라서 페이지가 요청될 때마다 서버에서 데이터를 실시간으로 불러와 렌더링하는 방식(SSR) 을 가능하게 해줍니다.
  • getServerSideProps는 서버리스 함수로 실행되기 때문에 빠른 응답성과 글로벌 배포가 가능합니다.

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

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

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

  return {
    props: { listings },
  };
}

SSR 동작 과정

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

2. 서버에서는 React 컴포넌트를 HTML 문자열로 변환합니다. 이때 사용되는 대표적인 함수는 renderToString()입니다.

• 이 HTML 문자열은 정적인 HTML로, JavaScript가 작동하지 않아도 브라우저에서 바로 렌더링이 가능합니다.

import { renderToString } from 'react-dom/server';
const htmlString = renderToString(<App />);

3. 서버는 렌더링된 HTML을 클라이언트(브라우저)에게 전달합니다.

• 브라우저는 이 HTML을 화면에 렌더링합니다. 이 시점에서 사용자가 초기 화면을 빠르게 볼 수 있게 됩니다.

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

• JS가 로드되어 실행되면, 기존 HTML에 이벤트 리스너를 연결되어 페이지가 인터랙티브하게 변함. 이 과정을 Hydration이라고 합니다.
  • 이때 사용하는 함수는 hydrateRoot() 메서드로, HTML이 인터랙티브한 React 앱으로 변환(hydrate) 됩니다.

import { hydrateRoot } from 'react-dom/client';
hydrateRoot(document.getElementById('root'), <App />);

장점

• SSR은 요청 기반(request-based)의 데이터를 처리할 때 유용합니다.
  • 서버에서 해당 정보를 받아와 HTML을 생성하면, 각 사용자마다 다른 콘텐츠를 보여줄 수 있습니다.
• 검색 엔진이 js를 실행하지 않아도 콘텐츠를 바로 확인할 수 있기 때문에 SEO 최적화에 유리하다.

단점

• SSR은 매번 페이지를 생성해서 클라이언트에 전달해야 하므로, 사용자가 요청한 순간부터 서버가 페이지를 생성하는 데 시간이 소요됩니다. 특히 데이터가 많은 경우 초기 화면이 느리게 뜰 수 있습니다.
  • 반복되는 요청에 대해서는 매번 새로 SSR을 수행하지 않도록, 응답에 캐시 설정 ( Cache-Control 헤더 ) 을 추가합니다.
  • 이렇게 설정하면, 브라우저나 CDN이 HTML을 캐시하여 다음 요청 시 빠르게 응답할 수 있습니다.
• 서버 의존성이 높습니다.
  • 서버가 다운되거나, SSR을 제공하는 특정 리전(region)이 장애 상태이면, 그 페이지는 아예 접근이 불가능해집니다.

Web Vitals

Lighthouse / Web Vitals

SSR 과 Web Vitals

• 서버에서 HTML을 미리 생성해 보내주기 때문에, 브라우저는 빠르게 콘텐츠를 화면에 그릴 수 있습니다. 특히, 이미지나 텍스트 블록 같은 largest content가 HTML에 포함되어 있다면 빠른 FCP, LCP가 측정됩니다.
  • FCP ( First Contentful Paint ) : 브라우저에 최초로 콘텐츠를 화면에 렌더링한 시점
  • LCP ( Largest Contentful Paint ) : 가장 큰 콘텐츠 요소(주로 이미지, 텍스트 블록 등)가 화면에 표시되는 시간
• 콘텐츠가 서버에서 렌더링되며 레이아웃이 고정된 상태로 전송되기 때문에, CSR보다 레이아웃 이동이 적어 CLS에도 긍정적인 영향을 줍니다.
  • 단, 이미지나 폰트가 늦게 로딩되면 여전히 CLS가 발생할 수 있으니 width/height 속성 지정과 font-display: swap 등이 중요합니다.
  • CLS ( Cumulative Layout Shift ) : 시각적 안정성을 측정하는 항목으로, 눈에 보이는 페이지 콘텐츠의 예기치 않은 레이아웃 변화량을 정량화합니다.