[javascript] Next.js에서의 프리렌더링(pre-rendering) 처리 방법은 어떤 것이 있나요?

24 Nov 2023

javascript

Next.js에서의 프리렌더링 처리 방법은 다음과 같습니다.

정적 생성 (Static Generation)

정적 생성은 빌드 시점에 페이지의 HTML을 미리 생성하는 방식입니다. 이 방법은 동적 데이터를 포함하지 않는 정적인 페이지에 적합하며, 매우 빠른 초기 로딩 속도를 제공합니다.

// pages/about.js

function AboutPage({ data }) {
  return (
    <div>
      <h1>About</h1>
      <p>{data}</p>
    </div>
  );
}

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

  return {
    props: {
      data,
    },
  };
}

export default AboutPage;

위 코드에서 getStaticProps 함수는 빌드 시점에서 실행되어 data를 반환합니다. 이 값은 페이지 컴포넌트의 props로 전달되어 미리 생성된 HTML에 포함됩니다.

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

서버 사이드 렌더링은 매 요청마다 서버에서 페이지의 HTML을 동적으로 생성하는 방식입니다. 동적인 데이터를 필요로 하는 페이지에 적합하며, 사용자에게 항상 최신 데이터를 제공합니다.

// pages/post/[slug].js

import { useRouter } from 'next/router';

function PostPage({ post }) {
  const router = useRouter();
  const { slug } = router.query;

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
}

export async function getServerSideProps(context) {
  const { slug } = context.query;
  const res = await fetch(`https://api.example.com/post/${slug}`);
  const post = await res.json();

  return {
    props: {
      post,
    },
  };
}

export default PostPage;

위 코드에서 getServerSideProps 함수는 매 요청마다 실행되어 post를 반환합니다. 이 값은 서버에서 동적으로 생성되는 페이지의 HTML에 포함됩니다.

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

클라이언트 사이드 렌더링은 Next.js에서 기본적으로 제공되는 방식입니다. 페이지의 초기 로딩은 서버에서 처리되며, 이후에 클라이언트에서 동적으로 데이터를 불러와 페이지를 업데이트합니다.

// pages/products.js

import { useEffect, useState } from 'react';

function ProductsPage() {
  const [products, setProducts] = useState([]);

  useEffect(() => {
    fetch('https://api.example.com/products')
      .then((response) => response.json())
      .then((data) => setProducts(data));
  }, []);

  return (
    <div>
      <h1>Products</h1>
      {products.map((product) => (
        <p key={product.id}>{product.name}</p>
      ))}
    </div>
  );
}

export default ProductsPage;

위 코드에서 useEffect 훅을 사용하여 컴포넌트가 마운트된 후 서버에서 데이터를 가져옵니다. 이후에 데이터를 사용하여 페이지를 업데이트합니다.

위의 방법들을 조합하여 Next.js는 유연한 프리렌더링 처리 방식을 제공합니다. 사용자에게 가장 적합한 방법을 선택하여 최적의 로딩 성능을 달성할 수 있습니다.