10. SSR (서버 사이드 렌더링) – 서버 사이드 렌더링의 개념과 Next.js에서의 구현

 웹 애플리케이션을 개발할 때, 페이지가 어떻게 렌더링되는지가 성능과 사용자 경험에 큰 영향을 미칩니다. 그 중 하나가 **서버 사이드 렌더링(SSR)**입니다. 이번 글에서는 서버 사이드 렌더링의 개념과 Next.js에서 이를 어떻게 구현할 수 있는지에 대해 설명드리겠습니다.

1. 서버 사이드 렌더링(SSR) 개념

**서버 사이드 렌더링(SSR)**은 웹 페이지의 HTML을 서버에서 미리 렌더링한 후, 클라이언트에 전송하는 방식입니다. 클라이언트는 서버에서 받은 완성된 HTML을 바로 화면에 표시하므로, 초기 로딩 시간이 짧고 SEO 최적화에 유리합니다. 이는 **클라이언트 사이드 렌더링(CSR)**과 반대되는 개념으로, CSR은 클라이언트에서 JavaScript를 실행하여 렌더링을 처리하는 방식입니다.

2. SSR의 장점

SSR의 가장 큰 장점은 초기 로딩 속도입니다. 서버에서 렌더링된 HTML을 클라이언트로 전송하기 때문에, 클라이언트는 HTML을 빠르게 받아 화면에 표시할 수 있습니다. 이로 인해 첫 번째 페이지 로딩 속도가 빨라지며, 검색 엔진 최적화(SEO)에도 유리합니다. 검색 엔진은 페이지의 내용이 서버에서 미리 렌더링된 HTML로 제공되므로, 더 잘 인식할 수 있습니다.

또한, SSR을 사용하면 클라이언트의 자원 소모를 줄일 수 있습니다. 클라이언트에서 JavaScript를 실행할 필요가 없기 때문에, 더 적은 리소스를 사용하고, 느린 네트워크 환경에서도 더 나은 성능을 발휘할 수 있습니다.

3. Next.js에서 SSR 구현하기

Next.js는 서버 사이드 렌더링을 간단하게 구현할 수 있는 기능을 제공합니다. Next.js의 페이지는 기본적으로 SSR 방식으로 동작하며, getServerSideProps 함수만 사용하면 됩니다. 이 함수는 서버에서 페이지를 렌더링하기 전에 데이터를 가져오는 데 사용됩니다.

예시: SSR 페이지 만들기

// pages/index.js
export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: { data }, // 이 데이터는 페이지 컴포넌트의 props로 전달됩니다.
  };
}

export default function Home({ data }) {
  return (
    <div>
      <h1>SSR Example</h1>
      <p>Data fetched from the server: {data}</p>
    </div>
  );
}

위 코드에서 getServerSideProps 함수는 페이지가 요청될 때마다 서버에서 데이터를 가져옵니다. 이 데이터는 Home 컴포넌트에 props로 전달되며, 서버에서 미리 렌더링된 HTML이 클라이언트에 전송됩니다.

4. getServerSideProps 함수 설명

getServerSideProps는 서버에서 실행되는 함수로, 페이지가 요청될 때마다 실행됩니다. 이 함수는 비동기적으로 데이터를 처리할 수 있으며, 데이터를 준비한 후 props 형태로 반환합니다. 이 데이터는 컴포넌트가 렌더링될 때 사용됩니다.

• 비동기 데이터 처리: getServerSideProps 함수 내에서는 API 호출, 데이터베이스 쿼리 등 서버 측에서의 데이터 처리 작업을 할 수 있습니다.
• SEO 최적화: 이 방식은 서버에서 미리 렌더링된 HTML을 클라이언트로 보내기 때문에, 검색 엔진이 페이지 내용을 쉽게 크롤링할 수 있어 SEO에 유리합니다.
• 
  

5. SSR vs CSR (클라이언트 사이드 렌더링)

SSR은 서버에서 페이지를 미리 렌더링한 후 클라이언트에 전달하는 방식이고, CSR은 클라이언트에서 JavaScript를 실행하여 페이지를 렌더링하는 방식입니다. 두 방식은 각각 장단점이 있습니다.

• SSR: 초기 로딩 속도가 빠르고, SEO에 유리합니다. 서버에서 데이터를 처리한 후 렌더링된 HTML을 클라이언트에 전달합니다.
• CSR: 초기 로딩은 느리지만, 페이지가 전환될 때 빠르고, 클라이언트 측에서 동적인 페이지 업데이트가 가능합니다.

Next.js는 SSR과 CSR을 모두 지원하기 때문에, 개발자는 필요에 따라 적합한 방식을 선택할 수 있습니다.

6. 결론

Next.js에서 SSR을 활용하면, SEO 최적화와 초기 로딩 속도 개선, 클라이언트의 리소스 절약 등의 장점을 누릴 수 있습니다. getServerSideProps를 사용하면 데이터를 서버에서 미리 처리하고 렌더링된 HTML을 클라이언트로 전송할 수 있어, 더 빠르고 효율적인 웹 애플리케이션을 만들 수 있습니다. 이를 통해 성능 향상과 SEO 최적화를 동시에 이룰 수 있습니다.