Next.js에서 데이터 렌더링 방식 비교와 getStaticProps(SSG), getServerSideProps(SSR) 활용

Next.js는 데이터를 효과적으로 가져오고 렌더링하는데에 있어서 두 가지 주요 방식인 정적 사이트 생성(SSG)과 서버 사이드 렌더링(SSR)을 지원합니다. 또한, 이를 구현하기 위해 getStaticProps와 getServerSideProps라는 두 가지 메서드를 사용합니다. 이제 각각의 개념과 차이점에 대해 자세히 알아보겠습니다.

 

정적 사이트 (Static Site Generation) - getStaticProps

• getStaticProps는 Next.js에서 사용되는 메서드로, 정적 사이트 생성에 활용됩니다.
• 이 방식은 페이지가 빌드될 때 미리 데이터를 가져와 페이지를 사전 렌더링합니다.
• getStaticProps를 사용하여 데이터를 가져오면, 빌드 시간에 한 번 호출되며, 이후에는 정적인 데이터로 사용됩니다.
• 주로 정적인 콘텐츠나 변경 빈도가 낮은 데이터를 처리할 때 사용됩니다.
• 정적 사이트 생성은 CDN 캐싱을 통해 빠른 로딩 속도와 안정성을 제공하며, 초기 로딩 속도를 개선할 수 있습니다.
• 예를 들어, 블로그 포스트 목록, 제품 카탈로그, 정적 콘텐츠 등을 가져올 때 getStaticProps를 활용할 수 있습니다.

nextjs 에서 SSG선언하기

// pages/index.js

import React from 'react';

export default function Home({ posts }) {
  return (
    <div>
      <h1>블로그 포스트 목록</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

export async function getStaticProps() {
  // 데이터 가져오기
  const response = await fetch('https://api.example.com/posts');
  const data = await response.json();

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

 

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

• getServerSideProps는 Next.js에서 사용되는 메서드로, 매 요청마다 서버에서 데이터를 가져옵니다.
• 이 방식은 매 요청마다 서버 측에서 페이지를 동적으로 렌더링하는 것을 의미합니다.
• getServerSideProps를 사용하여 데이터를 가져오면, 매 요청 시 서버에서 데이터를 불러옵니다.
• 동적인 데이터나 실시간으로 변경되는 데이터를 처리할 때 적합하지만, 서버 리소스를 더 많이 사용하고 렌더링 시간이 필요합니다.
• 예를 들어, 사용자 지정 사용자 데이터, 실시간 업데이트가 필요한 정보, 인증된 사용자 정보 등을 처리할 때 getServerSideProps를 활용할 수 있습니다.

next.js에서 SSR선언하기

// pages/profile.js

import React from 'react';

export default function Profile({ user }) {
  return (
    <div>
      <h1>{user.name}의 프로필</h1>
      <p>Email: {user.email}</p>
      <p>Age: {user.age}</p>
    </div>
  );
}

export async function getServerSideProps() {
  // 데이터 가져오기
  const response = await fetch('https://api.example.com/user/123');
  const data = await response.json();

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

 

결론

next js는 상황에 맞는 데이터 패칭을 제공하기 때문에 데이터의 상태변화가 없는 사이트를 생성하려면 SSG을 선택하고 만일 실시간으로 데이터 처리시 SSR을 선택하여 적절하게 사용하면 될것입니다.