[Next.js] app router + React Query

해당 포스트는 다른 포스트들을 참고, 정리, 발췌한 개인 공부용 정리글입니다. 

 

 

React Query 사용 이유

• Client State
  • clint에서만 관리하는 정보들 (ex. input의 text)
  • 사용자가 선택한 언어, theme 등
• Server State
  • server에서 받아오는 모든 데이터

 

1. 클라이언트에서 서버 데이터의 캐시를 관리
2. loading, error state를 관리
3. pagination, infinite scroll도 쉽게 처리할 수 있도록 지원
4. prefetching을 쉽게 처리할 수 있도록 지원
5. error 발생 경우 자동으로 재시도
6. request가 성공하거나 실패했을 시 각각 callback을 정의 가능
7. 짧은 보일러플레이트 코드 

 

React Server Components

React Query에 들어가기 전에 React Server Component를 알아봐야 한다.

Next.js learn에 꽤나 많이 등장하고 있는 용어이고, React Query와 관련있는 API 호출, 캐싱 부분을 할 수 있다고 함.

게다가 Next.js는 React Server Components를 채택해 사용하고 있다.

=> 그렇다면, React Query는 Next.js에 과연 필요한가?

 

RSC(React Server Components)란 ?

[출처]

React 18에서 추가된 기능 중 하나로 새로운 React UI 구축 방식. 

 

Before,  RCC(React Client Components)SS

React는 처음부터 Client Side UI 라이브러리 였다. 개발자가 아키텍처를 활용해 애플리케이션을 개발하는데 도움이 되는 JavaScript 기반 오픈 소스 라이브러리다. 

기존에 사용되던 컴포넌트는 클라이언트 컴포넌트. 

 

기존 리액트 컴포넌트(클라이언트 컴포넌트) data fetching에는 2가지 문제가 있었다. 

1. 클라이언트 서버 간 요청의 High Latency

2. Client-Server API 요청으로 발생하는 waterfall 

 

(*waterfall : 현재 작업을 시작하기 위해 이전 것의 응답이 완료되기를 기다리는 현상)

 

// Note.js
function Note(props) {
  const [note, setNote] = useState(null);

  useEffect(() => {
    // NOTE: loads *after* rendering, triggering waterfalls in children
    fetch(`https://api.example.com/notes/${props.id}`)
      .then(res => res.json())
      .then(
        (result) => {
          setNote(result);
        }
      )
  }, [props.id]])

  if (note == null) {
    return "Loading";
  } else {
    return (/* render note here... */);
  }
}

 

기존에 사용했던 위와 같은코드는 data가 fetching 되고 나서, component가 뜨는 방식이다.

 

실제 컴포넌트가 렌더링 될 때 필요한 데이터만 보여줄 수 있는 장점이 있지만, 

Client-Server 간 API 요청이 늘어난다. 

 

또한, 부모 컴포넌트는 컴포넌트 렌더링 후 필요한 데이터를 받아오기 시작하고 이 과정이 끝나기 전까지 자식 컴포넌트의 렌더링과 API 호출이 지연되며 불필요한 렌더링 발생.

 

이와 같이 클라이언트 컴포넌트에서의 비동기 data fetching은 client-server waterfall을 야기하고 성능을 저하시키는 원인

 

이를 위한 해결책으로 등장한 것이 React Server Component다.

 

https://tech.kakaopay.com/post/react-server-components/

After, RSC(React Server Components) 

High-Latency, Waterfall 해결책.

 

서버 컴포넌트은 서버에서 동작하는 리액트 컴포넌트다.

RSC는 데이터를 가져오는 로직을 서버로 이동시켜(네트워크 호출 없이 데이터를 가져옴) 서버 자체에서 준비할 수 있다. 클라이언트로 돌아오는 데이터는 모든 데이터와 함꼐 잘 구성된 컴포넌트인 것이다. 

 

따라서, 컴포넌트 렌더링을 클라이언트가 아닌 서버에서 수행하기 때문에 API를 통한 데이터 요청의 latency를 줄일 수 있고, 클라이언트에서 연속된 API 호출을 제거해 client-server waterfall을 막을 수 있다.

 

https://tech.kakaopay.com/post/react-server-components/

// Note.server.js - 서버 컴포넌트의 파일 네임 컨벤션
import { fetch } from 'react-fetch';

function Note(props) {
  // 아래 요청은 client-to-server가 아닌 server-to-server로 진행됩니다.
  const note = fetch(`https://api.example.com/notes/${props.id}`).json();

  if (note == null) {
    return <div>노트가 존재하지 않습니다.</div>;
  } else {
    return (/* render note here... */);
  }
}

이를 통해, data-fetching은 간단해지고, 클라이언트 컴포넌트에서 발생되던 client-server waterfall을 제거해 컴포넌트에 필요한 데이터만 fetching하는 방식을 유지하며 퍼포먼스를 향상시킬 수 있다. 

 

아직, 중첩 컴포넌트에서 여러 API 요청에 따른 network waterfall은 여전히 존재한다.

React 팀은 preload api를 제공해 이를 향상 시킨다.

 

서버 컴포넌트의 이점

서버 컴포넌트는 서버에서 동작하고 렌더링 된다는 특성상 다양한 종류의 백엔드 리소스에 접근할 수 있다.

HTML이 아닌 ‘특별한’ 형태로 렌더링 되어 클라이언트에 전달되기 때문에 클라이언트로 전달되는 번들 사이즈 또한 감소시킬 수 있다.

 

1. 서버에서 동작하기에 DB, 파일 시스템, 인터널 서비스 같은 Server Side Data Source에 직접 접근 가능
2. Zero-Bundle Size Component :
   브라우저에 다운되지 않고 서버에서 미리 렌더링 된 static content 전달로 패키지를 추가해도 번들 사이즈에 영향 x 
3. 자동 code spliting:
   code splitng ? js 번들을 여러 개의 작은 번들로 쪼개어 필요할 때마다 클라이언트로 전송하는 방법. 

 

React 서버 컴포넌트의 한계

1. RSC는 서버에 남아 있고 서버에서 렌더링 되어 서버 컴포넌트에 사용자 인터렉션을 추가할 수 없다.  useEffect, useState... React 훅이나 이벤트 핸들러를 사용할 수 없음. 
2. 서버 컴포넌트에 localstorage, bluetooth, web USB와 같은 브라우저 웹 api 사용 불가
3. 클라이언트 상호 작용과 관련된 모든 것에는 여전히 Client Components를 사용해야 함.

 

=> 적절한 Cleint + Server Components 혼합이 필요하다.

 

Hydrate?

 

Next.js에서 React Query?

 

 

 

 

 

 

 

 

---

[Reference]

https://velog.io/@cjy0029/React-Query-%ED%8A%9C%ED%86%A0%EB%A6%AC%EC%96%BC

React-Query 튜토리얼

https://xionwcfm.tistory.com/339

next.js에서 react query가 필요할까?

https://tech.kakaopay.com/post/react-server-components/

React 18: 리액트 서버 컴포넌트 준비하기 | 카카오페이 기술 블로그

https://www.freecodecamp.org/korean/news/how-to-use-react-server-components/

React 서버 컴포넌트를 사용해야 하는 이유와 방법

https://codevoweb.com/setup-react-query-in-nextjs-13-app-directory/

How to Setup React Query in Next.js 13 App Directory - CodevoWeb