react-query로 SSR 구현하기(with Next.js)

react-query는 React 애플리케이션에서 데이터를 가져오고 관리하기 위한 패키지이고

 

Next.js는 React 기반의 서버 사이드 렌더링 프레임워크로 클라이언트와 서버에서 모두 실행되는 React 애플리케이션을 구축하는데 사용된다

 

React Query와 Next.js를 같이 사용하면 서버 사이드에서 데이터를 가져와 초기 렌더링 시점에 미리 데이터를 로드하여 초기 로딩 속도를 향상시킬 수 있다

 

 

 

---

 

react-query와 Next.js를 같이 사용하는 방법

 

1. react-query 패키지 설치

npm install react-query

 

2. Next.js 프로젝트 설정

• Next.js 프로젝트의 \_app.js 파일을 열고 QueryClientProvider를 impor한다
• QueryClientProvider로 앱을 감싸고 QueryClient를 생성한다

// _app.js

import { QueryClient, QueryClientProvider } from 'react-query';

const queryClient = new QueryClient();

function MyApp({ Component, pageProps }) {
  return (
    <QueryClientProvider client={queryClient}>
      <Component {...pageProps} />
    </QueryClientProvider>
  );
}

 

3. 서버 사이드 렌더링 구현

• HomePage 컴포넌트는 useQuery 훅을 사용하여 데이터를 가져온다
• fetchTodos 함수에서 실제 데이터를 가져오는 API를 호출한다

// pages/index.js
// 가상 API: https://api.example.com/todos

import { useQuery } from 'react-query';

function HomePage() {
  const { data, isLoading, isError } = useQuery('todos', fetchTodos);

  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (isError) {
    return <div>Error loading todos</div>;
  }

  return (
    <div>
      <h1>Todos</h1>
      {data.map(todo => (
        <div key={todo.id}>{todo.title}</div>
      ))}
    </div>
  );
}

async function fetchTodos() {
  const response = await fetch('https://api.example.com/todos');
  const data = await response.json();
  return data;
}

export default HomePage;

 

4. 데이터 프리페칭

• Next.js의 getServerSideProps 메서드를 사용하여 서버 사이드에서 데이터를 프리페칭할 수 있다
• getServerSideProps 함수는 QueryClient를 생성하고 prefetchQuery 메서드를 사용하여 todos 데이터를 프리페칭한다
• dehydrate 함수를 사용하여 queryClient의 상태를 직렬화라여 클라이언트로 전달한다

// pages/index.js

export async function getServerSideProps() {
  const queryClient = new QueryClient();

  await queryClient.prefetchQuery('todos', fetchTodos);

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

 

서버 사이드 렌더링은 웹 애플리케이션의 성능과 사용자 경험을 향상시키는 기술이다

 

react-query와 Next.js를 함께 사용하면 서버 사이드 렌더링과 데이터 관리를 조합할 수 있어

 

초기 로딩 성능 과 데이터 로딩, SEO 개선 등의 효율성을 높일 수 있다