Next.js 15 데이터 페칭 및 렌더링 심화: 캐싱, 변형, 에러 처리, 데이터 흐름 관리

이전 포스팅에서는 Next.js 15에서 제공하는 다양한 데이터 페칭 방법과 렌더링 기법에 대해 알아보았습니다. 이번 포스팅에서는 데이터 페칭 과정에서 발생할 수 있는 다양한 상황에 대한 심층적인 내용을 다뤄보겠습니다. 특히, 데이터 캐싱, 데이터 변형, 에러 처리, 그리고 데이터 흐름 관리에 대해 자세히 설명하고, 실제 예시를 통해 이해를 돕겠습니다.

데이터 캐싱

데이터 캐싱은 동일한 데이터를 반복적으로 요청하는 것을 방지하여 성능을 향상시키는 중요한 기술입니다. Next.js는 데이터를 메모리에 캐싱하여 불필요한 서버 호출을 줄이고, 사용자 경험을 개선할 수 있는 다양한 방법을 제공합니다.

• SWR: SWR은 stale-while-revalidate의 약자로, 데이터를 로컬에 캐싱하고, 백그라운드에서 데이터를 갱신하는 패턴입니다. Next.js에서 SWR을 사용하면 쉽게 데이터를 캐싱하고 관리할 수 있습니다.
• Revalidate: getStaticProps 또는 getServerSideProps에서 revalidate 옵션을 설정하여 데이터가 캐시되는 시간을 설정할 수 있습니다.
• Custom 캐싱: useSWR 훅을 커스터마이징하여 원하는 방식으로 캐싱 로직을 구현할 수 있습니다.

예시 (SWR 사용):

import useSWR from 'swr';

function Profile() {
  const fetcher = (url) => fetch(url).then((res) => res.json());
  const { data, error } = useSWR('/api/user', fetcher);

  // ...
}

 

데이터 변형

데이터를 컴포넌트에 직접 전달하기 전에 변형하는 작업이 필요한 경우가 많습니다. 예를 들어, 날짜 포맷을 변경하거나, 불필요한 데이터를 제거하는 등의 작업이 필요할 수 있습니다.

• Custom Hook: 데이터를 변형하는 로직을 커스텀 훅으로 만들어 재사용할 수 있습니다.
• useMemo: 데이터 변형 결과를 메모이제이션하여 불필요한 재렌더링을 방지할 수 있습니다.

예시 (Custom Hook):

function useFormattedDate(dateString) {
  const date = new Date(dateString);
  const formattedDate = date.toLocaleDateString();
  return formattedDate;
}

 

에러 처리

데이터 페칭 중에 에러가 발생할 수 있습니다. 에러를 적절히 처리하여 사용자에게 안정적인 경험을 제공해야 합니다.

• try...catch: async/await와 함께 try...catch 블록을 사용하여 에러를 잡아낼 수 있습니다.
• Error Boundaries: React Error Boundaries를 사용하여 컴포넌트 레벨에서 에러를 처리할 수 있습니다.
• Loading 상태: 데이터를 로딩 중일 때 로딩 상태를 표시하여 사용자에게 알릴 수 있습니다.

예시:

function Profile() {
  const { data, error } = useSWR('/api/user', fetcher);

  if (error) return <div>Failed to load</div>;
  if (!data) return <div>Loading...</div>;

  // ...
}

 

데이터 흐름 관리

복잡한 애플리케이션에서는 여러 컴포넌트 간에 데이터를 공유하고 관리해야 할 필요가 있습니다.

• Context API: 간단한 상태 관리에 적합합니다.
• Redux: 복잡한 상태 관리에 적합하며, 예측 가능한 상태 흐름을 제공합니다.
• Recoil: 원자적인 상태 관리를 지원하며, 셀렉터를 통해 데이터를 추출하고 변환할 수 있습니다.
• Zustand: 간결하고 유연한 상태 관리 라이브러리입니다.

예시 (Context API):

import { createContext, useState } from 'react';

const UserContext = createContext();

function UserProvider({ children }) {
  const [user, setUser] = useState(null);

  // ...

  return (
    <UserContext.Provider value={{ user }}>
      {children}
    </UserContext.Provider>
  );
}

 

결론

Next.js 15는 데이터 페칭 및 렌더링에 대한 강력한 기능을 제공하여 개발자들이 더욱 효율적이고 유연한 웹 애플리케이션을 개발할 수 있도록 돕습니다. 데이터 캐싱, 변형, 에러 처리, 데이터 흐름 관리 등 다양한 기술을 적절히 활용하여 사용자에게 최고의 경험을 제공하는 애플리케이션을 구축할 수 있습니다.