Next.js에서 Zustand와 SWR을 활용한 실시간 데이터 동기화 전략

 

• SWR과 Zustand를 결합하여 클라이언트 및 서버 데이터를 동기화하는 방법
• 데이터 정합성을 유지하면서 상태를 업데이트하는 전략
• 실시간 데이터 패칭과 캐싱을 최적화하는 기법

npm install swr zustand

 

store/useDataStore.js (Zustand 전역 상태)

import { create } from 'zustand';

const useDataStore = create((set) => ({
  data: null,
  updateData: (newData) => set({ data: newData }),
}));

export default useDataStore;

 

components/LiveData.js (SWR을 활용한 실시간 데이터 패칭)

'use client';

import useSWR from 'swr';
import useDataStore from '../store/useDataStore';

const fetcher = (url) => fetch(url).then((res) => res.json());

export default function LiveData() {
  const { data, error } = useSWR('https://jsonplaceholder.typicode.com/posts/1', fetcher, {
    refreshInterval: 5000, // 5초마다 데이터 갱신
  });

  const updateData = useDataStore((state) => state.updateData);

  if (error) return <p>데이터를 불러오는 중 오류 발생</p>;
  if (!data) return <p>로딩 중...</p>;

  updateData(data);

  return (
    <div>
      <h2>실시간 데이터</h2>
      <p>제목: {data.title}</p>
      <p>내용: {data.body}</p>
    </div>
  );
}

 

components/GlobalState.js (Zustand 전역 상태 확인)

'use client';

import useDataStore from '../store/useDataStore';

export default function GlobalState() {
  const data = useDataStore((state) => state.data);

  return (
    <div>
      <h2>전역 상태 데이터</h2>
      {data ? <p>{data.title}</p> : <p>데이터 없음</p>}
    </div>
  );
}

 

app/page.js (전체 페이지 구성)

import LiveData from '../components/LiveData';
import GlobalState from '../components/GlobalState';

export default function Home() {
  return (
    <div>
      <LiveData />
      <GlobalState />
    </div>
  );
}

 

 

• SWR을 활용하면 자동으로 데이터를 갱신하고 캐싱할 수 있음
• Zustand와 결합하면 전역 상태에서 최신 데이터를 유지하면서 UI를 최적화 가능