React & Next.js

Next.js와 Styled Components를 사용한 서버 사이드 렌더링(SSR) 설정 가이드

0

서버 사이드 렌더링(SSR, Server-Side Rendering)은 웹 애플리케이션의 초기 로딩 속도를 개선하고 SEO 성능을 높이는 중요한 기술입니다. 이번 글에서는 Next.js와 Styled Components를 함께 사용하여 SSR을 설정하는 방법을 자세히 알아보겠습니다. 이를 통해 사용자 경험을 개선하고, 검색 엔진에서의 가시성을 높일 수 있습니다.

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

SSR은 클라이언트가 웹 페이지를 요청할 때 서버가 HTML을 렌더링하여 제공하는 방식입니다. 이는 클라이언트에서 모든 렌더링 작업을 수행하는 클라이언트 사이드 렌더링(CSR)과 대조됩니다. SSR의 주요 이점은 다음과 같습니다:

  • 빠른 초기 로딩 시간: 서버에서 렌더링된 HTML을 제공하여 브라우저에서 빠르게 화면을 표시할 수 있습니다.
  • SEO 개선: 검색 엔진 크롤러가 완전한 HTML을 쉽게 인덱싱할 수 있어 SEO 성능이 향상됩니다.

2. Styled Components 소개

Styled Components는 CSS를 JavaScript 코드 안에서 직접 작성할 수 있게 해주는 라이브러리입니다. 이를 통해 스타일과 컴포넌트를 같은 파일에서 관리할 수 있으며, 스타일링 충돌을 방지할 수 있습니다. Styled Components는 특히 React와 같은 컴포넌트 기반 라이브러리와 잘 어울립니다.

3. Next.js에서 Styled Components와 SSR 설정하기

Next.js는 React 기반의 프레임워크로, 서버 사이드 렌더링을 기본적으로 지원합니다. Styled Components와 함께 사용하면 스타일이 포함된 HTML을 서버에서 렌더링하여 클라이언트로 전달할 수 있습니다. 이를 위해 Next.js의 `Document` 클래스를 커스터마이징하고, Styled Components의 `ServerStyleSheet`를 사용합니다.

4. 코드 예제

다음은 Next.js 애플리케이션에서 Styled Components와 SSR을 설정하는 예제입니다:

_document.js 파일 설정

import Document from 'next/document';
import { ServerStyleSheet } from 'styled-components';

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    // ServerStyleSheet 인스턴스 생성
    const sheet = new ServerStyleSheet();
    const originalRenderPage = ctx.renderPage;

    try {
      // renderPage 재정의하여 스타일 수집
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: (App) => (props) =>
            sheet.collectStyles(<App {...props} />),
        });

      // 기본 초기 Props 수집
      const initialProps = await Document.getInitialProps(ctx);

      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        ),
      };
    } finally {
      sheet.seal();
    }
  }
}

export default MyDocument;

App.js 파일 설정

import React from 'react';
import styled from 'styled-components';

const Title = styled.h1`
  color: palevioletred;
  font-size: 24px;
`;

const App = () => (
  <div>
    <Title>Hello, Styled Components with SSR!</Title>
  </div>
);

export default App;

결론

Next.js와 Styled Components를 함께 사용하여 서버 사이드 렌더링을 설정하면 웹 애플리케이션의 초기 로딩 속도를 개선하고, SEO 성능을 향상시킬 수 있습니다. 이번 가이드에서는 서버 사이드 렌더링의 개요와 Styled Components의 장점, 그리고 Next.js에서 이를 설정하는 방법을 코드 예제와 함께 자세히 살펴보았습니다.

Styled Components와 Next.js의 강력한 기능을 활용하여 사용자 경험을 극대화하고, 검색 엔진에서 더 높은 가시성을 얻으시길 바랍니다.

답글 남기기