Next.js에서 빠른 페이지 로딩 기술

18 Oct 2023

nextjs

Next.js는 React 기반의 프레임워크로, SSR(Server-Side Rendering)과 CSR(Client-Side Rendering)을 함께 지원하여 웹 애플리케이션의 성능을 향상시킬 수 있습니다. 특히 Next.js는 페이지 로딩 속도를 높이기 위해 몇 가지 기술을 제공합니다. 이번 블로그 포스트에서는 Next.js에서 사용할 수 있는 몇 가지 빠른 페이지 로딩 기술을 알아보겠습니다.

1. 코드 스플리팅 (Code Splitting)

Next.js는 페이지 별로 코드를 자동으로 스플리팅합니다. 이는 웹 페이지를 번들로 묶을 때 모든 코드를 하나의 파일에 포함시키지 않고, 필요한 코드만 해당 페이지에 포함시키는 방식입니다.

코드 스플리팅을 사용하면 첫 페이지 로딩 시에 사용자가 보지 않을 컴포넌트의 코드는 불러오지 않아도 되므로 초기 로딩 속도를 향상시킬 수 있습니다. 또한 필요한 컴포넌트만 로드하기 때문에 메모리 사용량도 줄일 수 있습니다.

Next.js에서 코드 스플리팅은 기본적으로 지원되며, 추가 설정 없이 자동으로 적용됩니다.

2. 프리페치 (Prefetching)

프리페치는 사용자가 해당 페이지로 이동하기 전에 필요한 데이터나 리소스를 미리 가져오는 기술입니다. Next.js는 Link 컴포넌트를 통해 간편하게 프리페치를 사용할 수 있습니다.

예를 들어, 사용자가 메인 페이지에 접속했을 때 다음 페이지로 이동할 것으로 예상되는 링크를 프리페치할 수 있습니다. 이를 통해 사용자가 해당 페이지로 이동할 때 미리 필요한 데이터나 리소스를 로드하여 페이지 전환 시간을 단축할 수 있습니다.

import Link from 'next/link';

const MainPage = () => {
  return (
    <>
      <h1>Welcome to my website!</h1>
      <Link href="/next-page" prefetch>
        <a>Go to Next Page</a>
      </Link>
    </>
  );
};

export default MainPage;

위의 예시에서 prefetch 속성을 사용하여 해당 페이지로의 프리페치를 활성화했습니다. 이렇게 설정하면 Link 컴포넌트가 미리 필요한 데이터나 리소스를 백그라운드에서 로드합니다.

3. 정적 생성 (Static Generation)

Next.js는 정적 생성을 통해 사전에 페이지를 생성하고 필요한 경우 정적 파일로 서빙할 수 있습니다. 이를 통해 서버에 부하를 줄이고 페이지 로딩 속도를 더욱 향상시킬 수 있습니다.

정적 생성은 동적이지 않은 페이지나 복잡한 레이아웃이 필요하지 않은 페이지에 적합합니다. 예를 들어, 게시글 목록 페이지나 제품 목록 페이지는 정적 생성으로 미리 생성할 수 있습니다.

Next.js에서 정적 생성을 사용하려면 페이지 컴포넌트에서 getStaticProps 함수를 정의하고, 해당 함수에서 필요한 데이터를 반환해야 합니다.

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

  return {
    props: {
      posts,
    },
  };
}

const PostList = ({ posts }) => {
  return (
    <>
      <h1>Recent Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </>
  );
};

export default PostList;

위의 예시에서 getStaticProps 함수는 외부 API에서 게시글 목록을 가져와 posts로 반환합니다. 이렇게 반환된 데이터는 PostList 컴포넌트의 posts prop으로 전달되어 미리 생성된 페이지에 데이터가 포함됩니다.

결론

위에서 소개한 코드 스플리팅, 프리페치, 그리고 정적 생성은 Next.js에서 빠른 페이지 로딩을 구현하는 데 도움이 되는 몇 가지 기술입니다. 이러한 기술을 적절히 활용하면 웹 애플리케이션의 성능을 향상시킬 수 있습니다.

Next.js는 성능 향상을 위해 다양한 기능을 제공하고 있으므로, 자세한 내용은 Next.js 공식 문서를 참고하시기 바랍니다.

참고: Next.js 공식 문서