Next.JS _ API 관리를 위한 도구

Next.js에서도 상태와 API 관리를 위한 도구로 다양한 옵션을 선택할 수 있다. Next.js는 React 기반의 프레임워크이기 때문에 React에서 사용하는 도구들을 대부분 그대로 사용할 수 있다. 하지만 Next.js의 **서버 사이드 렌더링(SSR)**과 정적 사이트 생성(SSG) 같은 특화된 기능 때문에 몇 가지 다른 패턴이나 도구가 선호되기도 한다.

---

1. Next.js에서 상태와 API 관리에 사용할 수 있는 도구

A. React Query (TanStack Query)

Next.js에서 가장 많이 사용하는 서버 상태 관리 도구 중 하나가 React Query다. 특히 데이터 패칭, 캐싱, 리패칭이 필요한 API 관리에서 강력하다.

• 특징
  • SSR과 SSG에서 데이터를 사전 패칭 가능
  • 클라이언트 사이드에서 데이터 캐싱 및 무효화 처리
  • getServerSideProps 또는 getStaticProps와 연동 가능
• 예제

import { useQuery } from "@tanstack/react-query";

async function fetchUsers() {
  const res = await fetch("/api/users");
  return res.json();
}

export default function UserList() {
  const { data, isLoading } = useQuery(["users"], fetchUsers);

  if (isLoading) return <p>Loading...</p>;

  return (
    <ul>
      {data.map((user: { id: number; name: string }) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

B. Redux Toolkit

Redux는 Next.js에서도 전역 상태 관리를 위해 널리 사용된다. 특히 글로벌 상태를 관리하거나 복잡한 비즈니스 로직이 필요한 경우 유용하다.

• 특징
  • 전역 상태 관리에 탁월
  • SSR/SSG와 연동하려면 추가 설정 필요
  • redux-persist와 같은 미들웨어로 상태를 유지 가능
• 예제

// store.ts
import { configureStore } from "@reduxjs/toolkit";
import userReducer from "./userSlice";

export const store = configureStore({
  reducer: { user: userReducer },
});

// _app.tsx
import { Provider } from "react-redux";
import { store } from "../store";

export default function App({ Component, pageProps }) {
  return (
    <Provider store={store}>
      <Component {...pageProps} />
    </Provider>
  );
}

C. Context API

React의 Context API는 Next.js에서도 간단한 전역 상태 관리에 사용된다. 하지만 상태가 많아지면 코드가 복잡해질 수 있으므로, 작은 규모의 애플리케이션에 적합하다.

• 예제

import { createContext, useContext, useState } from "react";

const AuthContext = createContext(null);

export function AuthProvider({ children }) {
  const [user, setUser] = useState(null);
  return (
    <AuthContext.Provider value={{ user, setUser }}>
      {children}
    </AuthContext.Provider>
  );
}

export function useAuth() {
  return useContext(AuthContext);
}

// _app.tsx
export default function App({ Component, pageProps }) {
  return (
    <AuthProvider>
      <Component {...pageProps} />
    </AuthProvider>
  );
}

D. Zustand

Zustand은 경량 상태 관리 라이브러리로, 간단하면서도 강력한 API를 제공한다. Context API보다 빠르고 코드가 간결하다.

• 특징
  • 클라이언트 전용 상태 관리
  • 간단한 API로 상태를 정의하고 사용
  • 비동기 작업 지원
• 예제

import create from "zustand";

const useStore = create((set) => ({
  user: null,
  setUser: (user) => set({ user }),
}));

export default function Component() {
  const { user, setUser } = useStore();

  return (
    <div>
      <button onClick={() => setUser({ name: "John" })}>Set User</button>
      <p>{user?.name || "No User"}</p>
    </div>
  );
}

---

2. Next.js의 데이터 패칭 메서드와의 조합

Next.js는 기본적으로 데이터 패칭을 위한 메서드인 getServerSideProps, getStaticProps, getInitialProps를 제공하며, 이를 다른 상태 관리 도구와 조합하여 사용할 수 있다.

A. React Query와 SSR

React Query를 사용하면서 SSR을 지원하려면 hydrate를 사용해 서버에서 패칭한 데이터를 클라이언트 쪽으로 전달한다.

import { dehydrate, QueryClient, useQuery } from "@tanstack/react-query";

export async function getServerSideProps() {
  const queryClient = new QueryClient();
  await queryClient.prefetchQuery(["users"], fetchUsers);

  return {
    props: {
      dehydratedState: dehydrate(queryClient),
    },
  };
}

export default function UserList() {
  const { data } = useQuery(["users"], fetchUsers);

  return (
    <ul>
      {data.map((user: { id: number; name: string }) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

B. Redux와 SSR

Redux Toolkit을 SSR과 함께 사용할 때는 상태를 서버에서 초기화한 후 클라이언트로 전달해야 한다.

export async function getServerSideProps() {
  const store = initializeStore();
  store.dispatch(fetchUsers());

  return {
    props: {
      initialReduxState: store.getState(),
    },
  };
}

---

3. 어떤 도구를 선택해야 할까?

A. React Query

• 추천 상황: 서버 상태 관리가 중요하고 API 호출이 빈번한 애플리케이션.
• 예: 데이터 대시보드, 블로그 등.

B. Redux Toolkit

• 추천 상황: 복잡한 전역 상태가 필요한 애플리케이션.
• 예: 인증, 다중 사용자 관리, 쇼핑몰.

C. Context API

• 추천 상황: 작은 규모의 애플리케이션에서 간단한 상태 관리가 필요한 경우.
• 예: 테마, 언어 설정.

D. Zustand

• 추천 상황: 간단한 상태 관리가 필요한 클라이언트 전용 애플리케이션.
• 예: 모달 상태, 필터링 상태.

---

결론

Next.js에서는 React의 상태 관리 도구를 그대로 사용할 수 있다. 프로젝트의 복잡성과 요구 사항에 따라 React Query, Redux Toolkit, Context API, 또는 Zustand를 선택하면 된다. 특히 React Query는 Next.js의 데이터 패칭 메서드와 잘 연동되어 서버 상태 관리를 위한 최고의 선택지 중 하나다. 🚀