Next.js에서 서버 사이드 렌더링(SSR): 무엇이며 언제 사용해야 하는가.

작성일 : 2024-06-26

Next.js에서 서버 사이드 렌더링(SSR): 무엇이며 언제 사용해야 하는가

Next.js는 React 기반의 프레임워크로, 개발자가 서버 사이드 렌더링(SSR)을 쉽게 구현할 수 있도록 도와줍니다. SSR은 클라이언트 측에서 페이지를 렌더링하는 CSR(Client-Side Rendering)과 달리, 서버에서 먼저 HTML을 생성하고 이를 클라이언트로 전송합니다. 이번 글에서는 Next.js에서 SSR이 무엇이며, 어떻게 작동하고, 언제 사용해야 하는지에 대해 자세히 알아보겠습니다.

서버 사이드 렌더링이란?

서버 사이드 렌더링(SSR)은 웹 페이지의 HTML을 서버에서 생성하여 클라이언트로 전송하는 방법입니다. 이는 클라이언트가 HTML을 최초 로드할 때까지 기다리지 않고 바로 컨텐츠를 확인할 수 있도록 합니다. 주로 사용되는 반대 개념인 클라이언트 사이드 렌더링(CSR)에서는 자바스크립트가 브라우저에서 실행되어 HTML을 생성하므로 초기 로드 시간이 더 길어질 수 있습니다.

SSR의 작동 방식

브라우저가 페이지 요청을 서버로 보냄.
서버가 필요한 데이터를 가져와서 페이지를 렌더링함.
렌더링된 HTML을 브라우저로 전송함.
브라우저가 HTML을 렌더링하고 사용자에게 보여줌.
자바스크립트를 통해 필요한 추가 인터랙션을 제공함.

이 과정에서 가장 중요한 부분은 서버가 요청을 받을 때 HTML을 생성하는 데 필요한 모든 데이터를 가져와서 완전한 HTML을 생성한다는 점입니다. 이렇게 함으로써 클라이언트는 처음 로드 시에 콘텐츠가 빠르게 표시될 수 있습니다.

Next.js의 SSR 구현 방법

Next.js에서 SSR을 구현하기 위해 특정한 페이지나 컴포넌트에 getServerSideProps 함수를 사용할 수 있습니다. 이 함수는 서버 측에서 실행되며, 페이지가 요청될 때마다 호출되어 데이터를 가져온 후, 렌더링에 필요한 데이터로 페이지를 생성합니다.


javascript
import React from 'react';

export async function getServerSideProps(context) {
  const res = await fetch(`https://api.example.com/data`);
  const data = await res.json();

  return {
    props: { data }, // props로 페이지 컴포넌트에 전달됨
  };
}

const Page = ({ data }) => {
  return (
    <div>
      <h1>서버 사이드 렌더링된 페이지</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
};

export default Page;

위 예제에서 getServerSideProps 함수는 API 요청을 통해 데이터를 가져오고, 이를 컴포넌트의 props로 전달합니다. 이를 통해 서버에서 데이터를 미리 가져와 렌더링을 수행할 수 있습니다.

SSR의 장점

빠른 초기 로드 시간

SSR은 서버에서 HTML을 생성하여 클라이언트로 전송하기 때문에 클라이언트는 최초 로드 시에 바로 콘텐츠를 볼 수 있습니다. 이는 페이지가 처음 로드될 때 빈 화면을 보여주거나 로딩 상태를 기다리게 하지 않아 사용자 경험을 크게 향상시킵니다.

SEO 최적화

검색 엔진은 일반적으로 클라이언트 사이드에서 렌더링된 콘텐츠를 제대로 인덱싱하지 못하는 경우가 있습니다. SSR은 서버에서 미리 렌더링된 HTML을 제공하므로 검색 엔진이 페이지의 콘텐츠를 쉽게 인식하고 인덱싱할 수 있게 합니다. 이는 검색 엔진 최적화(SEO)에 큰 도움이 됩니다.

SSR을 사용해야 하는 경우

콘텐츠가 동적이면서 SEO가 중요한 경우

블로그, 뉴스 사이트, 전자 상거래 사이트 등 SEO가 중요한 웹사이트에서 SSR을 사용하는 것이 좋습니다. 예를 들어, 제품 페이지나 기사 페이지가 SSR을 통해 더 빠르게 로드되고, 검색 엔진에 의해 쉽게 인덱싱될 수 있습니다.

초기 페이지 로드 속도가 중요한 경우

사용자가 첫 페이지 로드 시에 긴 로딩 시간을 겪지 않도록 하고 싶다면 SSR이 적합합니다. 예를 들어, 사용자가 들어왔을 때 즉시 콘텐츠를 확인할 수 있는 대시보드나 데이터 시각화 페이지 등이 이에 해당합니다.

결론

Next.js에서 서버 사이드 렌더링(SSR)은 웹 애플리케이션의 성능을 향상시키고 SEO를 최적화하는 효과적인 방법입니다. SSR을 통해 초기 페이지 로드 시간을 줄이고, 검색 엔진에 의해 더 잘 인덱싱될 수 있게 하여 웹 사이트의 가시성과 사용자 경험을 개선할 수 있습니다. 따라서 SEO가 중요하거나 빠른 초기 로드 시간이 필요한 경우 SSR을 선택하는 것이 좋습니다.