14 서버 사이드 데이터 페칭 – Next.js에서 서버 사이드에서 데이터를 가져오는 방법

 서버 사이드 데이터 페칭은 Next.js에서 데이터를 서버에서 직접 가져와 페이지를 렌더링하는 중요한 기능입니다. 이 방법은 클라이언트 측에서 데이터를 불러오는 것보다 더 빠르게 페이지를 제공할 수 있기 때문에 SEO 최적화 및 페이지 성능을 높이는 데 유리합니다. 이번 글에서는 Next.js에서 서버 사이드 데이터 페칭을 어떻게 구현할 수 있는지 설명하겠습니다.

1. 서버 사이드 데이터 페칭의 개념

서버 사이드 데이터 페칭(Server-side data fetching)은 사용자가 페이지를 요청할 때 서버에서 데이터를 먼저 가져와서 클라이언트에 전달하는 방식입니다. 이 방식은 사용자가 페이지를 요청하면, 서버에서 데이터를 미리 받아와 페이지를 완성하여 클라이언트에 전달하므로, 검색 엔진 최적화(SEO)와 페이지 로딩 속도에 긍정적인 영향을 미칩니다.

Next.js에서는 getServerSideProps를 사용하여 서버 사이드에서 데이터를 페칭할 수 있습니다. 이 함수는 페이지가 요청될 때마다 서버에서 실행되어 데이터를 준비하고 페이지를 렌더링합니다.

2. Next.js에서 서버 사이드 데이터 페칭 구현하기

가. getServerSideProps 사용법

getServerSideProps 함수는 Next.js에서 서버 사이드 데이터 페칭을 위한 기본적인 방법입니다. 이 함수는 페이지 컴포넌트가 요청될 때마다 실행되며, 서버에서 데이터를 가져와 컴포넌트에 props로 전달합니다.

다음은 getServerSideProps를 사용하여 서버 사이드에서 데이터를 가져오는 예시입니다.

import React from 'react';

const ServerSidePage = ({ data }) => {
  return (
    <div>
      <h1>서버 사이드 데이터 페칭</h1>
      <ul>
        {data.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
};

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

  // 서버 사이드에서 받은 데이터를 컴포넌트의 props로 전달
  return { props: { data } };
}

export default ServerSidePage;

이 예제에서 getServerSideProps는 API 요청을 통해 데이터를 가져오고, 이를 페이지 컴포넌트에 전달합니다. 데이터가 로드되면 해당 데이터를 기반으로 페이지가 렌더링됩니다.

나. 동적 경로에서 서버 사이드 데이터 페칭

서버 사이드 데이터 페칭은 동적 경로에서도 사용할 수 있습니다. 예를 들어, 특정 ID에 해당하는 데이터를 서버에서 가져오려면, URL의 파라미터를 활용하여 데이터를 페칭할 수 있습니다.

import React from 'react';

const ItemPage = ({ item }) => {
  return (
    <div>
      <h1>{item.name}</h1>
      <p>{item.description}</p>
    </div>
  );
};

export async function getServerSideProps({ params }) {
  const { id } = params;
  const res = await fetch(`https://api.example.com/items/${id}`);
  const item = await res.json();

  return { props: { item } };
}

export default ItemPage;

위 코드에서는 params를 사용하여 URL에서 동적으로 값을 가져온 후, 해당 ID에 맞는 데이터를 서버에서 가져옵니다.

3. 서버 사이드 데이터 페칭의 장점과 활용

서버 사이드 데이터 페칭을 사용하면 여러 가지 장점이 있습니다. 그 중 일부는 다음과 같습니다:

• SEO 최적화: 서버에서 데이터를 페칭하고 페이지를 렌더링하여 클라이언트에 전달하기 때문에, 검색 엔진 크롤러가 완전한 페이지를 인식할 수 있습니다.
• 초기 페이지 로딩 속도 개선: 서버에서 모든 데이터를 준비하고 렌더링하여 클라이언트로 전달하므로 초기 페이지 로딩 속도가 빨라집니다.
• 동적 콘텐츠: 사용자가 요청하는 데이터가 동적으로 변화하는 경우 서버 사이드 데이터 페칭이 유용합니다. 예를 들어, 사용자의 로그인 상태나 특정 카테고리에 맞는 데이터를 페칭할 수 있습니다.
• 
  

4. 결론

Next.js에서 서버 사이드 데이터 페칭은 SEO 최적화와 페이지 성능 향상에 중요한 역할을 합니다. getServerSideProps를 사용하여 서버에서 직접 데이터를 가져오고 페이지를 렌더링할 수 있으며, 이를 통해 더 빠르고 효율적인 웹 애플리케이션을 개발할 수 있습니다.