로고

React.js 서버 사이드 렌더링(SSR) 가이드: SEO와 초기 로딩 속도 개선

작성일 :

React.js 서버 사이드 렌더링(SSR) 가이드: SEO와 초기 로딩 속도 개선

개요

서버 사이드 렌더링(SSR)은 클라이언트 사이드 렌더링(CSR)과 대조적으로, 서버에서 완전히 렌더링된 HTML을 제공하는 방식입니다. 이는 특히 SEO(검색 엔진 최적화)와 초기 페이지 로딩 속도 면에서 큰 장점을 가지고 있습니다. 이 글에서는 React.js를 사용한 SSR 구현 방법 및 그것이 가져오는 이점에 대해 다룹니다.

왜 서버 사이드 렌더링을 사용하는가?

SEO 개선

CSR 방식에서는 초기 로딩 시 자바스크립트 파일을 다운로드하고, 이를 실행한 후에야 완전한 페이지가 렌더링됩니다. 이는 검색 엔진 크롤러가 정확히 페이지 내용을 인덱싱하는 데 어려움을 겪을 수 있음을 의미합니다. 반면 SSR은 서버에서 이미 렌더링된 HTML을 제공하므로 검색 엔진 크롤러가 보다 쉽게 콘텐츠를 인식하고 색인화할 수 있습니다.

초기 로딩 속도 향상

서버에서 미리 렌더링된 HTML을 제공함으로써 클라이언트는 초기 페이지 로딩 시점에서 이미 완전한 페이지를 볼 수 있습니다. 클라이언트 사이드 렌더링에서는 자바스크립트 파일을 다운로드하고 이를 실행하여 페이지를 구성하는 데 시간이 걸리기 때문에, 사용자 경험이 저하될 수 있습니다. SSR은 이러한 문제를 해결하여 사용자가 페이지를 더 빠르게 볼 수 있게 합니다.

React.js로 서버 사이드 렌더링 구현하기

React.js에서는 SSR을 구현하기 위한 몇 가지 주요 단계를 포함합니다. 다음은 기본적인 구현 절차입니다.

프로젝트 설정

SSR을 구현하려면 Node.js 환경이 필요하며, 인기 있는 프레임워크인 Next.js를 사용하여 쉽게 설정할 수 있습니다.

bash
npx create-next-app@latest my-ssr-app
cd my-ssr-app
npm run dev

위 명령어를 실행하면 기본적인 Next.js 프로젝트가 생성되고 개발 서버를 실행할 수 있습니다.

페이지 생성

Next.js에서는 기본적으로 페이지가 서버 사이드에서 렌더링됩니다. 예를 들어 pages/index.js 파일을 생성하면 자동으로 SSR이 적용됩니다.

jsx
import React from 'react';

function HomePage() {
  return (
    <div>
      <h1>Welcome to my SSR page!</h1>
      <p>This is rendered on the server.</p>
    </div>
  );
}

export default HomePage;

getServerSideProps 사용하기

getServerSideProps 함수는 Next.js에서 데이터 Fetching을 위한 SSR 메서드입니다. 이 함수는 페이지 요청 시마다 서버에서 실행되고, 반환된 데이터는 페이지 컴포넌트에 전달됩니다.

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

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

function DataPage({ data }) {
  return (
    <div>
      <h1>Data from Server</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

export default DataPage;

서버 사이드 렌더링의 한계

SSR이 모든 상황에서 최고의 솔루션은 아닙니다. 다음은 SSR의 몇 가지 한계점입니다.

서버 부하 증가

서버에서 모든 요청에 대해 페이지를 렌더링하기 때문에 서버 자원이 많이 소모될 수 있습니다. 이는 특히 트래픽이 많은 웹사이트에서 성능 문제를 일으킬 수 있습니다.

복잡성 증가

SSR을 구현하면 전통적인 CSR보다 코드베이스가 복잡해질 수 있습니다. 예를 들어 상태 관리, 라우팅, 데이터 Fetching 등의 측면에서 추가적인 고려사항이 필요합니다.

하이브리드 접근 방식

순수한 CSR 또는 SSR 대신, 두 접근 방식을 결합한 하이브리드 방식을 사용할 수도 있습니다. Next.js에서는 Static Generation과 Dynamic Rendering을 결합하여 적절한 페이지를 정적/동적으로 구성할 수 있습니다.

정적 사이트 생성 (SSG)

Next.js의 getStaticProps 함수를 사용하면 빌드 시점에 정적 페이지를 생성하여 성능을 최적화할 수 있습니다.

jsx
export async function getStaticProps() {
  const res = await fetch('https://api.example.com/static-data');
  const staticData = await res.json();

  return {
    props: { staticData },
  };
}

function StaticPage({ staticData }) {
  return (
    <div>
      <h1>Static Data</h1>
      <pre>{JSON.stringify(staticData, null, 2)}</pre>
    </div>
  );
}

export default StaticPage;

결론

서버 사이드 렌더링은 React.js 애플리케이션의 SEO와 초기 로딩 속도를 향상시키는 강력한 도구입니다. 그러나 서버 부하와 프로젝트 복잡성 증가와 같은 단점도 고려해야 합니다. Next.js와 같은 프레임워크를 사용하여 SSR을 손쉽게 구현할 수 있으며, 필요에 따라 정적 사이트 생성 등 하이브리드 접근 방식을 선택할 수도 있습니다. 이를 통해 보다 효율적이고 사용자 친화적인 웹 애플리케이션을 구축할 수 있습니다.