fetch
-
Next.js App Router(4) - 데이터 패칭 전략Next.js 2025. 6. 30. 10:05
이번 글에서는 Next.js App Router에서는 데이터 패칭에 대하여 알아보겠습니다.1. 왜 기본 fetch인가?Next.js는 fetch 최적화를 전제로 설계되어 있습니다.그래서 기본 fetch에 다음과 같은 기능이 붙어 있습니다. 서버 캐싱 (Data Cache)Revalidate 옵션 (ISR)Streaming & Suspense와 자연스러운 통합중복 요청 자동 방지 (Request Memoization) 반면 axios나 ky 등의 외부 라이브러리는 이러한 기능과 연결되지 않아, "Next.js가 제공하는 캐싱/스트리밍을 제대로 안 쓰는 것"과 같습니다.결국 기본 fetch를 사용하면 의존성도 줄고, 성능 최적화도 그대로 가져갈 수 있습니다.2. fetch의 기본 동작 방식: auto no-..
-
HTTP 클라이언트 라이브러리의 변화 Axios에서 Got, Ky로Tip 2024. 12. 8. 19:39
프런트엔드와 백엔드 개발 모두에서 HTTP 통신은 필수적이다.REST API 호출, 마이크로서비스 간 통신, 외부 서비스 연동 등 다양한 시나리오에서 단순한 HTTP 요청/응답을 넘어 훨씬 복잡해진 요구사항이 있다.많은 개발자들이 이제 막 웹 생태계에 입문할 때는 fetch나 Node.js의 기본 http 모듈로 시작한다.하지만 일정 수준 이상의 프로젝트 규모나 복잡도, 유지보수성을 요구하는 상황이 되면 fetch 단독 사용은 점차 비효율적으로 느껴지며, 보다 강력한 기능을 제공하는 HTTP 클라이언트 라이브러리로 옮겨가게 된다.이 글에서는 프런트엔드 생태계에서 흔히 사용되는 Axios, 그리고 최근 들어 각광받고 있는 Got(Node.js 환경)과 Ky(브라우저 환경)에 대해 살펴보고, 왜 단순한 fe..
-
NextJS에서 react-query 사용하기Next.js 2022. 8. 15. 17:00
(해당 글은 next@12.2 react-query@3.39.1을 바탕으로 작성되었습니다.) 1. 왜 react-query인가? 이제 개발을 할 때 react-query는 필수에 가까운 요소가 됐다. 물론 NextJS를 사용하고 문서를 읽어본 사람들이라면 이런 의문을 가질 수 있다. swr이 있는데? 물론 두 라이브러리 모두 좋은 라이브러리이다. 하지만 react-query를 사용해야 되는 이유를 간략하게 설명하겠다. 1. swr은 데이터 패칭(fetching)을 위한 리액트 훅이다. 이 말을 간단하게 이야기하자면 swr과 react-query는 get을 위한 useQuery는 존재한다. 그러나 post를 위한 useMutation은 react-query에만 존재한다. 물론 swr 역시 mutate가 있..