# data fetching
[번역] ReactQuery와 React-Router(v6.4) 같이 써서 data 미리 fetching하기
React Query meets React Router 를 번역한 글 입니다. 의역 / 오역이 매우 많습니다. React-Router에 loaders 와 actions가 도입되었다. React Router가 data fetching에 관여하면서, React Query와 같은 기존 데이터 페칭 및 캐싱 라이브러리와 어떻게 호환 또는 경쟁하는지 알고 싶어졌다. 데이터를 패칭하는 라우터 React-Router는 각각의 route에 loaders를 정의할 수 있게 한다. route component 그 자체로, useLoaderData() 를 사용하면 data에 access할 수 있게 한다. Form 과 같이 데이터를 업데이트하는 것은 action function을 불러일으킬 수 있다. Actions는 모든 활성화된 loaders를 무효화하고, 당신의 화면에
React query 알고 사용하자 !! (1) - 장점, 필요한 상황
요즘 핫하다는 스택들,,중 React query가 빠지지 않는 것 같아 오늘은 React query에 대해 간단하게 포스팅하려고 한다! 무지성으로 사용하기 전에, React query의 장단점을 알고 사용하는게 좋겠다 ! React query란 ? 공식 문서에선 fetching, caching, 서버 데이터와의 동기화를 지원해주는 라이브러리 라고 한다 . - 특장점 데이터를 캐싱한다. 캐싱이란 특정 데이터의 복사본을 저장하여 이후 동일한 데이터의 재접근 속도를 높이는 것을 말한다. 같은 내용을 반복적으로 불러오는 불필요한 호출을 방지하여 서버에 대한 부하를 줄이는 것이다 !! 즉 필요한 상황에 적절하게 데이터를 갱신할 수 있다는 소리다 ! (최신 데이터인지(fresh) 기존 데이터(stale)인지도 판단할 수 있다) - 그래서 언제 사용하냐 ??? 다른 블로그 글을 보면 일반적인 data fetching 솔루션에선
[nextJS] Data Fetching, Caching, and Revalidating(데이터 패칭, 캐싱, 재검증) 공식문서 읽기
Data Fetching, Caching, and Revalidating 데이터 패칭은 모든 어플리케이션에서 핵심 부분이다. 이 페이지는 어떻게 데이터를 패치하고, 캐시하고, 재검증하는지 설명한다. 데이터를 패치하는 네 가지 방법이 있다. 서버에서 fetch 사용 서버에서, 3rd party library 사용 클라이언트에서, Route Handler를 통해 클라이언트에서, thrid-party-library를 사용 서버에서 fetch를 활용해 데이터 패칭 nextjs는 기본 fetch Web API를 확장해 서버의 각 fetch 요청에 대한 캐싱및 revalidating 동작을 구성할 수 있게 한다. 리액트는 fetch를 확장해서 리액트 컴포넌트 트리를 렌더링하는 동안 자동적으로 fetch 요청을 메모[(memoize)](https://nextjs.org/docs/app/building-your-application/data-fetching/p
Data Fetching
NextJS에서 데이터를 가져오는 방법은 여러가지가 있습니다. 그래서 애플리케이션의 사용 용도에 따라서 다른 방법을 사용해주면 됩니다. 보통 리액트에서는 데이터를 가져올 때 useEffect안에서 가져옵니다. 하지만 NextJS에서는 다른 방법을 사용해서 가져오는데 하나씩 살펴보겠습니다. getStatic Props - Static Generation으로 빌드(build)할 때 데이터를 불러옵니다. (미리 만들어줌) getStaticPaths - Static Generation으로 데이터에 기반하여 pre-render시 특정한 동적 라우팅 구현(pages/post[id].js) getServerSideProps - Server Side Rendering으로 요청이 있을 때 데이터를 불러옵니다. getStaticProps 
[Next.js] Data Fetching & Rendering
Next.js는 페이지를 어떻게 렌더링할까? Data fetching을 할 때, 사용에 따라 다양한 방식으로 렌더링할 수 있다. Pages Pre-rendering > Next.js는 기본적으로 모든 page를 pre-render한다. 즉, 각 페이지의 HTML을 미리 만들어놓는다. (SEO에 유리하다.) 브라우저에 페이지가 로드되면 그때 JavaScript 코드를 실행해서 interactive해진다.(hydration) Pre-rendering의 2가지 양상 Static Generation (Recommended) 빌드 타임에 HTML이 생성되고 매 요청마다 재사용된다. 성능상 더 좋다. 정적으로 생성되어 별 다른 설정없이 CDN으로 캐시될 수 있다. Server-side Rendering 매 요청마다 HTML이 생성된다. *
[Next]Next.js 파헤쳐 보기(1)
공식문서 따라서 블로그 만들어보기 프로젝트 생성 page url = http://localhost:3000/posts/first-post url로 갔을 때 first post를 확인할 수 있는 방법은 pages 폴더 안에 posts 폴더 생성 후 first-post.js파일을 생성하면 error 뜨지 않는 것을 알 수 있다. Link Component Link component와 a 태그의 차이는 호출없이 스무스하게 이동하는 느낌이든다. a 태그는 앱 자체를 전체 다시 불러온다. Link 태크는 전체를 불러오는게 아니라 필요한 것만 불러온다. Code splitting 서비스 하나에 굉장히 많은 코드를 가지게 된다. 코드를 유의미하게 분리한다. 사용자가 웹 페이지에 처음 진입했을 때 화면을 그리게 필요한 부분부분 코드를 받아오면 된다. Css imgage public/i
[Next]Next.js 알아보기
Next.js란? Vercel에서 만든 React framework Vecel은? Vercel은 프런트엔드 개발자를 위한 플랫폼으로, 혁신가가 영감을 얻는 순간에 만드는 데 필요한 속도와 안정성을 제공합니다. 프론트엔드 서비스를 배포하고 관리하는 플랫폼을 제공 라이브러리를 표방한 React의 장점을 살리고 다양한 편의 기능들을 추가한 Framework의 필요를 충족함. SSR(Server side Rendering) vs CSR(Client Side Rendering) CSR이란? CSR은 react,vue 등의 SPA(Single Page Application)에서 쓰이는 기법 서버에서 화면을 구성하는 SSR과 달리 클라이언트에서 화면을 구성 하지만 초기에 html에 데이터가 없다보니 검색 봇이 해당페이지를 빈페이지로 착각하여 SEO(Search Engine Optimization) 검색엔진 최적화에 취약할 수 있는 단점이 존재한다. SSR이란?
Vue-router 데이터 가져오기
데이터 가져오기(data fetching) 때로는 라우트가 활성화될 때 서버에서 데이터를 가져와야 한다. (ex. 사용자 프로필을 렌더링하기 전에 서버에서 사용자의 데이터를 가져와야 할 때) 이때, 두 가지 방법을 사용할 수 있다. 탐색 후 가져오기: 먼저 탐색하고 들어오는 컴포넌트의 라이프 사이클 훅에서 데이터를 가져옴, 데이터를 가져오는 동안 로드 상태 표시 탐색하기 전에 가져오기: 라우트 가드에서 경로를 탐색하기 전에 데이터를 가져오고 그 후에 탐색 수행 탐색 후 가져오기 이 방법을 사용하면 들어오는 *
[Next.js] Data Fetching > Incremental Static Regeneration
원본: https://nextjs.org/docs/basic-features/data-fetching/incremental-static-regeneration Next.js에서는 빌드 이후에 정적 페이지를 생성하거나 업데이트하는 것이 가능하다. Incremental Static Regeneration(ISR)은 전체 사이트를 다시 빌드할 필요 없이 페이지 별로 static 생성이 가능하도록 해준다. ISR을 사용하면 수백만 페이지로 사이트를 확장하면서도 static의 이점을 유지할 수 있다. ISR을 사용하기 위해서는ㄴ getStaticProps에 revalidate를 추가해야 한다. 빌드할 때 사전 렌더링된 페이지에 대한 요청이 들어오면 처음에는 캐시된 페이지가 보여진다. 첫 요청과 10초 전 사이의 모든 요청들은 즉시 캐시된다. 10초 후의 요청은 여전히 캐시된 페이지를 보여준다. Next.js는 백그라운드에서 페이지를 재생성한다. 페이지가 성공적
[Next.js] Data Fetching > getStaticProps
원본: https://nextjs.org/docs/basic-features/data-fetching/get-static-props 만약 getStaticProps라는 함수를 export 한다면 Next.js는 getStaticProps에 의해 반환된 props를 사용하여 빌드 타임에 페이지를 사전 렌더링할 것이다. getStaticProps 사용해야 할 때 페이지를 렌더링하기 위해 필요한 데이터가 user requset 이전에 사용 가능할 때 데이터가 headless CMS에서 올 때 페이지가 SEO를 위해 반드시 사전 렌더링 되어야 하고 빨라야 할 때 데이터가 public하게 캐시 가능할 때 getStaticProps 실행 시점 getStaticProps는 항상 클라이언트가 아닌 서버에서 실행된다. 클라이언트 사이드에서는 getStaticProps 내부의 코드가 지워진다. getStaticProps는 항상 next build 중에
[Next.js] Data Fetching > getStaticPaths
원본: https://nextjs.org/docs/basic-features/data-fetching/get-static-paths 어떤 페이지가 동적 루트를 가지고 있고 getStaticProps를 사용한다면 정적으로 생성될 경로들의 목록을 정의해야 한다. 동적 루트를 사용하는 페이지에서 getStaticPaths라는 함수를 export하면 Next.js는 이 함수에 의해 지정된 모든 경로를 정적으로 미리 렌더링 한다. 여기에서 getStaticPaths와 함께 사용할 수 있는 파라미터와 props를 확인할 수 있다. getStaticPaths를 사용해야 할 경우 동적 경로를 사용하고 다음과 같은 페이지들을 사전 렌더링 하는 경우에 getStaticPaths를 사용해야 한다. 데이터를 headless CMS에서 가져온다. 데이
[Next.js] Data Fetching > getServerSideProps
원본: https://nextjs.org/docs/basic-features/data-fetching/get-server-side-props 어떤 페이지에서 getServerSideProps라는 함수를 export한다면 Next.js는 해당 페이지를 요청할 때마다 getServerSideProps에서 리턴한 데이터를 사용하여 pre-rendering을 진행할 것이다. getServerSideProps 실행 시점 getServerSideProps는 server-side에서만 실행되고 절대 브라우저에서는 실행되지 않는다. getServerSideProps가 실행되는 경우는 다음과 같다. 페이지를 직접 요청하면 getServerSideProps가 실행되고 페이지는 여기서 반환된 props를 사용하여 pre-render된다. next/link나 next/router를 통해서 client-side에서 페이지 이동이 발생한다면 Next.j
[NextJS] Data Fetching
Next.js가 제시하는 3가지 Data Fetching 방법 SSR(Server Side Render) CSR(Client Side Rendering) SSG(Static-Site Generation) SSR(Server Side Render) > 서버에서 만들어서 클라이언트로 보내준다 서버에서 사용자에게 보여줄 페이지를 모두 만들어서 사용자에게 페이지를 보여주는 방식이다. SSR방식을 사용하면 모든 데이터가 매핑된 서비스 페이지를 클라이언트에게 바로 보여진다 페이지를 구성하는 속도는 늦어지지만 전체적으로 사용자에게 보여주는 콘텐츠 구성이 완료되는 시점은 빨라진다는 장점이 있다. index.js에 함수 하나를 만들어서 테스트 진행 index.js파일에 함수를 만들어서 실행을 시켜 보면 서버에 server라고 콘솔이 찍힌다 서버
[FE] Data Fetching Libraries
Data Fetching Libraries : Frontend 개발 시장의 변화 속도는 너무 빨라서 비유적으로 표현해보면 나는 이전 프로젝트를 하면서 나름 2020년쯤에 살고 있다고 생각했는데 실제 기술 개발은 2030년 정도에 와있는? 상황인 것 같다. 비유적이지만 실제로 redux middleware 그리고 state 관리와 관련해서도 이러한 상황이 생기고 있는 것 같으니 도대체 뭐가 변했고, 그러면 그러한 변화 속에서 뭐를 택해서 사용해야하는지를 'data fetching libraries'를 키워드로 알아보자. Redux Middleware < Data fetching Libraries(RTK Query, React-query, SWR) ? 왜 data fetching 라이브러리를 생각하
Next.js의 대표적인 기능
pre-rendering next.js에서 기본적으로 모든 페이지를 프리 렌더링 함. 클라이언트 사이드에서 모든 작업을 수행하는 대신 미리 각 페이지에 대해서 HTML 파일을 미리 만들어서 성능과 SEO 측면에서 도움을 줌. 최소한의 자바스크립트 코드를 사용해 HTML 화면을 미리 생성하고 자바스크립트가 로드되면 그때 컴포넌트와 앱 화면이 완전히 활성화 되고 이런 과정을 hydration이라고 한다. React next.js에서는 SSG와 SSR 형태의 프리 렌더링을 지원하고 있음. 성능상 SSG를 추천하고 있지만
useEffect 완벽 가이드 요약
들어가며 본 게시글은 useEffect 완벽 가이드를 정리 & 요약하는 글입니다. 요약 (TL;DR) > 💡 🤔 질문: useEffect 로 componentDidMount 동작을 흉내내려면 어떻게 하지? useEffect(fn, []) 를 사용해서 비슷하게 흉내낼 수 있음. 차이점은, componentDidMount 와는 달리 prop, state를 잡아두기 때문에 초기 prop, state를 확인할 수 있음 즉, 비슷하긴 하나, useEffect는 componentDidMount 및 다른 라이프사이클 모델과 다르다. > 💡 **🤔 질문: useEffect 안에서 데이터 페칭은 어떻게
[개발자되기: 클라이언트 Ajax 요청] Day-30
React 데이터 흐름 하향식(top-down) 데이터 흐름 컴포넌트는 컴포넌트 바깥에서 props를 이용해 데이터를 전달받음 단방향 데이터 흐름(one-way data flow) State로 관리하는 것을 판단하는 기준 부모로부터 props를 통해 전달되는지? (맞으면 state 아님) 시간이 지나도 변하지 않는지? (맞으면 state 아님) 컴포넌트 안의 다른 state나 props를 가지고 계산 가능한지? (맞으면 state 아님) 역방향 데이터 흐름 추가 State 끌어올리기 (Lifting state up) ex) 하위 컴포넌트의 클릭 이벤트가 부모의 상태를 바꾸어야만 하는 상황 => 새로운 트윗 추가 > 상위 컴포넌트의 "상태를 변경하는 함수" 그 자체를 하위 컴포넌트로 전달하고, 이 함수를 하위 컴포넌트가 실행한다 Effect Hook Side Effect 함수 내 어떤 구
Next.js에서 SWR을 사용해 보자 - 1 (Fetch)
이 글은 Next.js에서 SWR을 이용해 데이터를 가져오는 방법에 대해 설명합니다. 다음 지식들을 안다면 문제없이 읽을 수 있습니다. React 기초 문법 Next.js 기초 문법 Typescript w/o SWR Next.js에서 사용자가 페이지에 입장하자마자 정보를 보여주려면 어떻게 해야할까요? 페이지가 처음 렌더링될 때 GET 요청을 api에 보내 DB에서 정보를 가져와서 보여 주면 될 것입니다. 보시다시피 useEffect내에서 api 요청을 보내고 데이터를 가져오는 과정을 진행하는 것을 알 수 있습니다. 하지만 이 과정을 조금 더 편하고 자동으로 만들어주는 hook이 있다면 좋지 않을까요? 이런 이유로 SWR이라는 좋은 모듈이 등장했습니다. SWR SWR은 vercel에서 제작한, 데이터를 가져오기 위한 모듈입니다. SWR을 Next.js에서 활용하는 방법을 알아 보겠습니다. 자세
pre-rendering 체크리스트: CSR SSR SSG ISR
프론트엔드 개발을 하면서 pre-rendering에 대해서 고민해본 적이 있으시겠죠..! 화면을 어디서 그리는지, 인터렉션의 횟수가 많은지, SEO를 고려해야할지 등등 여러 문서를 찾아봐도 저는 잘 모르겠더라구요..! 다들 비슷한 문장들을 조합해서 적은 듯한 기분이라 같은 말만 되풀이되풀이되풀이 되는 것이 답답했습니다. 여전히 풀리지 않은 의문들이 있어 이곳에 정리해보고 피드백을 받아보고 싶습니다. :) 1. 사전 지식 정리 너무 깊지 않게, 필요한 내용만 한 번 짚어보죠! 1-1. pre-rendering? 말그대로 페이지를 미리 렌더링한다는 말입니다. 일반적인 리액트를 예시로 들어보자면, 사용자가 페이지로 접속하고 화면을 그릴 때까지의 시간이 조금 깁니다. 이 로딩 속도를 개선하고 사용자 경험을 더 좋게 하기 위해서 많은 노력들이 있었죠! 1-2. TTV & TTI TTV = Time To View: 유저가 사이트를 볼 수 있는 타이밍 TT
Next.js - Data Fetching
Next.js에서 데이터 요청은 애플리케이션 사용 방식에 따라 다른 방식으로 콘텐츠를 렌더링한다. 이는 사전 렌더링에 속하는 Static Generation 또는 Server-side Rendering 뿐만 아니라 런타임 시에 콘텐츠를 생성 및 변경하는 Incremental Static Regeneration을 포함한다. getServerSideProps 페이지에서 getServerSideProps(Server-side Rendering)을 export하면 Next.js는 매 요청마다 페이지 사전 렌더링 시에 getServerSideProps가 반환하는 데이터를 활용한다. getServerSideProps는 서버 사이드에서만 실행되며, 브라우저 상에서는 실행되지 않는다. 페이지에 getServerSideProps 함수가 정의되어 있다면 페이지를 직접 요청할 때 getServerSideProps는 요청 시마다 실행되며, 페이지는 반환된 p