react-query,ISR

 

React에서 데이터 패칭을 위한 다양한 방법: ISR과 React Query

React 애플리케이션에서 데이터를 패칭하는 방법에는 ISR (Incremental Static Regeneration)과 React Query 등이 있다. 이 글에서는 각 방법의 특징과 차이점에 대해 기록하려고 한다.

(fetch방식도 있긴하지만.. react-query가 더 좋다는 개인적인 생각에 이건 패스)
(자세한 사용방법, 기타 옵션등은 생략..)

 

React Query를 이용한 데이터 패칭

React Query 라이브러리를 사용하면 데이터 패칭과 캐싱을 간편하게 처리할 수 있다.

React Query는 데이터 캐싱, 옵션 설정 등 다양한 기능을 제공한다.

React Query를 사용한 데이터 패칭 플로우는 다음과 같다.

1. '/' 요청
2. Next.js 서버에서 React Query를 사용하여 필요한 데이터 요청
3-1. 요청 완료된 데이터로 HTML을 그림

3-2. React Query의 QueryClient에서 JSON 응답을 문자열(string)로 변환
3-3. 변환된 데이터를 HTML에 삽입
4. 클라이언트 사이드에서 Hydration 컴포넌트를 통해 HTML의 데이터를 QueryClient에 적용

 

 

ISR을 활용한 데이터 패칭

ISR은 빌드 시점이 아닌 런타임에 페이지를 생성하는 방식이다.

캐시된 페이지가 있다면 해당 페이지를 바로 내려주기 때문에 서버 부하를 줄일 수 있다.

ISR을 사용한 데이터 패칭 플로우는 다음과 같다.

1. '/' 요청
2. Next.js 서버에서 캐시된 페이지 확인
3. 유효한 캐시 데이터가 있다면 해당 페이지를 바로 내려줌 (데이터 포함)

 

두 방식의 차이점

React Query를 사용하면 서버 사이드 렌더링(SSR)이 가능하지만, 대규모 트래픽 상황에서는 서버 부하가 발생할 수 있다.
특히 위에서 3-1과 3-2부분 HTML 문자열 생성과 React Query의 데이터 요청/응답 과정에서 지연이 발생할 수 있다.

 

자바스크립트는 싱글 스레드 기반으로 동기적으로 작동한다.

그렇기 때문에 CPU 집약적인 작업을 하게된다면 그 뒤의 작업들이 pending이된다.

즉, HTML을 string으로 만들어주는 작업도 대규모 트레픽에서는 꽤 큰 작업이고,

react-query에서 데이터 요청을 보내고 받는 200ms 내외의 시간조차 부하로 이어질 수 있다.

반면 ISR을 사용하면 캐시 히트시( cache-hit ) HTML 문자열 생성과 데이터 요청/응답 과정이 생략되므로 서버 부하를 줄일 수 있다.

 

결론

React 애플리케이션에서 데이터를 패칭하는 방법은 상황에 따라 적절히 선택해야 한다.

React Query는 SSR이 필요한 경우에 유용하지만, 대규모 트래픽 상황에서는 ISR을 사용하는 것이 서버 부하를 줄이는 데 도움이 될 수 있다.