7. 고급 개념: 서버 사이드 렌더링 (SSR) 및 정적 사이트 생성 (SSG)
7장: SSR과 SSG의 이해와 활용
들어가며
Next.js는 다양한 렌더링 기법을 제공함으로써 개발자들이 프로젝트의 요구사항에 맞는 방식으로 웹 애플리케이션을 설계할 수 있게 돕습니다. 그 중에서 Server-Side Rendering(SSR)과 Static Site Generation(SSG)은 Next.js의 가장 강력한 기능 중 두 가지로, 성능 및 사용자 경험을 향상시키는 데 중요한 역할을 합니다. 이 장에서는 SSR과 SSG의 기본 개념, 차이점, 활용 방법, 그리고 실제 사례를 설명하겠습니다.
SSR: Server-Side Rendering란 무엇인가요?
Server-Side Rendering, 줄여서 SSR은 사용자가 웹 애플리케이션에 접근할 때마다 서버에서 HTML을 생성하여 브라우저에 전달하는 방식입니다. 이를 통해 초기 로드 속도가 빨라지고, SEO 성능이 향상되며, 사용자는 화면을 빠르게 볼 수 있습니다.
Next.js에서 SSR을 구현하려면 각 페이지에서 getServerSideProps라는 비동기 함수(Async Function)를 사용해야 합니다. 이 함수는 요청이 있을 때마다 호출되며, 데이터를 가져오고 HTML을 생성하여 반환합니다.
// pages/example.js
export async function getServerSideProps(context) {
// 필요한 데이터를 서버에서 가져옵니다.
const data = fetch('https://api.example.com/data').then(res => res.json());
// 페이지에 전달할 props 반환
return { props: { data } }
}
function ExamplePage({ data }) {
return (
<div>
<h1>서버 사이드 렌더링 예제</h1>
<p>{data.description}</p>
</div>
);
}
export default ExamplePage;SSR을 사용할 때는 서버의 성능과 네트워크 환경에 따라 클라이언트에 전달되는 속도가 영향을 받을 수 있으므로 주의해야 합니다. 고빈도 또는 고트래픽 데이터를 처리하는 응용 프로그램에서는 적절한 캐싱 솔루션과 함께 사용하는 것이 좋습니다.
SSG: Static Site Generation란 무엇인가요?
Static Site Generation, 즉 SSG는 페이지를 빌드 시점에 미리 생성하고, 정적 HTML 파일로 저장하여 사용자가 요청 시 빠르게 제공하는 렌더링 방식입니다. 이는 정적인 콘텐츠를 효율적으로 제공하며 성능 및 보안 측면에서 매우 유리합니다.
SSG를 구현하려면 getStaticProps라는 함수와 함께 사용할 수 있습니다. getStaticProps는 빌드 타임에 한 번 실행되며, 그 결과 생성된 HTML은 모든 사용자 요청에 동일하게 제공됩니다.
// pages/static-example.js
export async function getStaticProps() {
// 빌드 시 점 데이터 가져오기
const data = fetch('https://api.example.com/data').then(res => res.json());
return { props: { data } };
}
function StaticExamplePage({ data }) {
return (
<div>
<h1>정적 사이트 생성 예제</h1>
<p>{data.description}</p>
</div>
);
}
export default StaticExamplePage;SSR과 SSG의 차이점
이 두 방법의 중요한 차이는 데이터와 HTML 생성을 수행하는 시점에 있습니다. SSR은 매 요청마다 서버에서 즉시 HTML을 생성하는 반면, SSG는 빌드 단계에서 미리 HTML을 생성하여 보관합니다. 따라서 SSR은 데이터를 자주 변경해야 하는 콘텐츠와 실시간성을 중시하는 경우 적합하며, SSG는 변경되지 않는 콘텐츠 (예: 블로그 글 또는 문서)에 더 어울립니다.
Next.js에서의 판단 기준
일반적으로 다음의 기준을 사용하여 렌더링 방식을 결정할 수 있습니다:
SSR: 데이터가 자주 변화하거나, 사용자별로 맞춤 데이터를 제공하는 경우에 적합
SSG: 콘텐츠가 드물게 업데이트되며, 빠른 응답시간이 중요한 경우에 적합
결론
SSR과 SSG는 Next.js에서 웹 개발자들이 최적의 사용자 경험과 성능을 구현할 수 있도록 돕는 주요 렌더링 전략입니다. 이 장에서는 두 방식의 기본 개념과 구현 방법을 알아보았습니다. 여러분의 프로젝트에 적합한 방식이나 가능하다면 두 방식을 혼합적으로 사용하여 최고의 결과를 도출할 수 있을 것입니다.
