Next.js: 샘플 코드를 통한 SSR(Server Side Rendering), CSR(Client Side Rendering) 및 SSG(Static Site Generation)이해

Next.js는 개발자가 서버 사이드 렌더링(SSR), 클라이언트 사이드 렌더링(CSR) 및 정적 사이트(SSG)를 쉽게 구축할 수 있는 인기 있는 React 기반 JavaScript 프레임워크이다. Next.js를 사용하면 개발자는 고성능, SEO 개선, 간편한 배포 등 자신의 필요와 요구사항에 가장 적합한 렌더링 방식을 선택할 수 있다.

이 글에서는 Next.js의 세계에 대해 자세히 알아보고 다양한 렌더링 접근 방식을 살펴보겠다. 먼저 서버 사이드 렌더링(SSR), 클라이언트 사이드 렌더링(CSR), 정적 사이트 생성(SSG)에 대한 개요를 살펴본 다음 각각의 장단점을 강조하면서 자세히 살펴볼 것이다.

서버 사이드 렌더링 (Server Side Rendering)

서버 사이드 렌더링(SSR)은 웹 페이지를 클라이언트로 전송하기 전에 서버에서 렌더링하는 기술이다. 이 방식은 클라이언트 브라우저에서 렌더링이 이루어지는 기존의 CSR(클라이언트 사이드 렌더링)과는 다르다. CSR에 비해 SSR의 가장 큰 장점은 향상된 성능과 더 나은 사용자 경험이다.

SSR에서는 초기 HTML이 서버에서 생성되어 페이지에 필요한 자바스크립트 및 기타 에셋과 함께 클라이언트로 전송된다. 그러면 브라우저는 자바스크립트를 실행하고 필요에 따라 페이지를 동적으로 업데이트한다. 이 접근 방식은 브라우저가 페이지를 렌더링하기 전에 자바스크립트가 로드되고 실행될 때까지 기다릴 필요가 없으므로 초기 로드 시간이 더 빠르다.

널리 사용되는 React 기반 프레임워크인 Next.js는 SSR을 기본적으로 지원한다. Next.js에서 SSR을 사용하려면 초기 HTML을 생성하여 클라이언트로 전송하는 서버 측 렌더링 함수를 만들어야 한다. 이 함수는 요청에 대한 정보를 포함하는 요청 객체와 HTML을 클라이언트로 다시 보내는 데 사용할 수 있는 응답 객체를 받는다.

다음은 Next.js의 서버 측 렌더링 함수에 대한 간단한 예이다.

import React from 'react';
import { renderToString } from 'react-dom/server';
import App from './App';

export default (req, res) => {
  const html = renderToString(<App />);

  res.send(`
    <!DOCTYPE html>
    <html>
      <head>
        <title>Next.js SSR Example</title>
      </head>
      <body>
        <div id="root">${html}</div>
        <script src="/bundle.js"></script>
      </body>
    </html>
  `);
};

이 예제에서는 react-dom/server 라이브러리의 renderToString 함수를 사용하여 React 컴포넌트에서 초기 HTML을 생성한다. 그런 다음 생성된 HTML은 응답으로 클라이언트에 다시 전송된다.

SSR을 사용하면 느린 네트워크나 구형 기기를 사용하는 사용자도 웹사이트나 웹 애플리케이션의 초기 로드 시간을 단축할 수 있다. 또한 SSR은 브라우저에서 자바스크립트가 비활성화되어 있어도 검색 엔진이 페이지를 크롤링하여 콘텐츠를 볼 수 있도록 함으로써 웹사이트의 SEO를 개선할 수 있다.

 

 

 

클라이언트 사이드 렌더링 - Client Side Rendering(CSR)

클라이언트 사이드 렌더링은 클라이언트 브라우저에서 웹 페이지를 렌더링하는 것을 말한다. 즉, 웹사이트를 표시하기 위해 클라이언트 컴퓨터에서 HTML, CSS 및 JavaScript 코드가 실행된다. 클라이언트 측 렌더링 설정에서 브라우저는 서버에 초기 HTML 및 JavaScript 파일을 요청한다. 그런 다음 브라우저는 서버에 추가 요청을 하지 않고 페이지를 렌더링하고 사용자 입력과 같은 모든 상호 작용을 처리한다.

이 접근 방식은 페이지를 새로 고칠 필요 없이 페이지를 실시간으로 업데이트하고 변경할 수 있으므로 매우 동적이고 인터랙티브한 사용자 환경을 만드는 데 유용한다. 클라이언트 측 렌더링을 사용하면 브라우저가 UI를 완전히 제어할 수 있으며 사용자 상호 작용에 따라 UI를 조작할 수 있다. 그 결과 사용자에게 더 반응이 빠르고 부드러운 경험을 제공한다.

하지만 클라이언트 측 렌더링에는 몇 가지 단점이 있다. 브라우저가 페이지를 표시하기 전에 자바스크립트 코드를 처리하고 실행해야 하므로 페이지 로드 시간이 길어질 수 있다. 또한 검색 엔진은 동적 콘텐츠를 완전히 이해하지 못할 수 있으므로 클라이언트 측 렌더링 페이지를 색인화하고 순위를 매기는 데 어려움을 겪을 수 있다.

Next.js는 서버 측 렌더링과 클라이언트 측 렌더링을 모두 지원하므로 개발자는 프로젝트에 가장 적합한 접근 방식을 유연하게 선택할 수 있다. 기본적으로 Next.js는 페이지를 서버 측에서 렌더링하지만 개발자는 프레임워크의 동적 가져오기 기능을 활용하여 클라이언트 측 렌더링을 선택할 수 있다.

다음은 클라이언트 측에서 렌더링되는 Next.js 컴포넌트의 예이다.

import dynamic from 'next/dynamic';

const DynamicComponent = dynamic(
  () => import('./MyComponent'),
  { ssr: false }
);

export default function Page() {
  return (
    <div>
      <DynamicComponent />
    </div>
  );
}

이 예제에서 내 컴포넌트는 동적으로 로드되며 서버 측에서 렌더링되지 않는다. 이렇게 하면 페이지의 특정 부분을 클라이언트 측에서 렌더링하면서도 나머지 부분에 대해서는 서버 측 렌더링의 이점을 계속 활용할 수 있다.

 

 

정적 사이트 생성 - Static Site Generation (SSG)

정적 사이트 생성(SSG)은 런타임이 아닌 빌드 시점에 미리 빌드된 HTML 파일을 생성하는 Next.js의 기술이다. 이 접근 방식은 블로그나 문서 사이트와 같이 콘텐츠가 많은 웹사이트를 구축할 때 특히 유용한다. SSG에서는 서버에 대한 초기 요청이 완전히 렌더링된 HTML을 반환하고 이후 사이트와의 상호 작용은 클라이언트 측에서 JavaScript로 처리된다.

Next.js는 SSG를 사용할 때 성능 향상, 보안 강화, 확장 용이성 등 여러 가지 이점을 제공한다. 사이트가 미리 생성되므로 서버가 온디맨드 페이지를 렌더링하는 데 시간을 소비할 필요가 없으므로 로드 시간이 빨라지고 사용자 경험이 향상될 수 있다. 또한 콘텐츠가 이미 클라이언트에 있기 때문에 민감한 정보가 서버에 노출될 위험이 적다. 마지막으로, 서버는 사이트를 한 번만 생성하면 되고 클라이언트는 향후 방문을 위해 콘텐츠를 캐시할 수 있으므로 SSG는 비용 효율성이 더 높을 수 있다.

Next.js에서 정적 사이트 생성을 사용하려면 페이지에서 getStaticProps 메서드를 사용해야 한다. getStaticProps 메서드는 HTML에 미리 렌더링해야 하는 데이터를 정의하는 데 사용된다. 이 메서드는 API 또는 데이터베이스에서 데이터를 가져오거나 콘텐츠를 동적으로 생성하는 데 사용할 수 있다. 데이터가 반환되면 컴포넌트에 props로 전달할 수 있다.

다음은 getStaticProps를 사용하여 JSON 파일에서 데이터를 가져와 블로그 게시물에 렌더링하는 예시이다.

import { getStaticProps } from 'next';

const BlogPost = ({ post }) => (
  <div>
    <h1>{post.title}</h1>
    <p>{post.body}</p>
  </div>
);

export const getStaticProps = async () => {
  const res = await fetch('https://.../posts.json');
  const posts = await res.json();
  return {
    props: {
      post: posts[0],
    },
  };
};

export default BlogPost;

이 예제에서 getStaticProps는 JSON 파일에서 데이터를 가져오는 데 사용되며, 데이터는 BlogPost 컴포넌트에 대한 프로퍼티로 반환된다. 사이트가 빌드되면 getStaticProps 메서드가 실행되고 데이터가 HTML에 미리 렌더링된다.

한 가지 중요한 점은 getStaticProps 메서드는 런타임이 아닌 빌드 프로세스 중에만 실행된다는 점이다. 즉, getStaticProps가 반환하는 데이터는 빌드 시점에 사용할 수 있어야 하며 사용자 상호 작용에 따라 동적으로 변경할 수 없다. 동적 데이터를 가져와야 하는 경우 getServerSideProps 메서드를 대신 사용할 수 있다.

정적 사이트 생성은 Next.js를 사용하여 빠르고 안전하며 확장 가능한 웹사이트를 구축할 수 있는 강력한 도구이다. 빌드 시 콘텐츠를 미리 렌더링하는 기능을 통해 SSG는 사용자 경험과 확장성에 최적화된 고성능 웹사이트를 제작하는 데 도움을 줄 것이다.

 

 

Next.js는 웹 개발을 위한 포괄적인 솔루션을 제공하여 개발자가 서버 측 렌더링, 클라이언트 측 렌더링 또는 이 둘의 조합 중에서 선택할 수 있는 기능을 제공한다. 자동 코드 분할, 최적화된 성능, 사용하기 쉬운 API와 같은 고급 기능을 갖춘 Next.js를 사용하면 동적이고 인터랙티브한 웹 애플리케이션을 간편하게 구축할 수 있다. 또한 정적 사이트 생성 기능을 사용하면 간단한 블로그, 이커머스 스토어, 복잡한 엔터프라이즈 애플리케이션 등 모든 사용 사례에 맞게 완전히 최적화되고 빠르게 로딩되는 웹 사이트를 생성할 수 있다.

전반적으로 Next.js는 개발자가 웹 애플리케이션을 효율적이고 효과적으로 구축하는 데 필요한 도구를 제공하는 다용도 프레임워크이다. 이제 막 시작했든 숙련된 개발자이든 다음 프로젝트를 위해 Next.js를 고려해 볼 가치가 있다.

© Copyright 2023 CLONE CODING