nextjs

Next.js 리액트 서버 컴포넌트

✔️ 기존 SSR의 한계 및 Next.js 서버 컴포넌트의 개념에 대해서 살펴보자 React Server Component는 리액트 18 버전에서 도입이 되었다. 기존의 서버 사이드 렌더링과는 완전히 다른 개념이다. 기존 리액트 컴포넌트와 SSR의 한계 기존의 React 컴포넌트는 클라이언트에서 작성이 되고 브라우저에서 자바스크립트 코드에 대한 처리가 이루어지게 된다. 그래서 React로 만들어진 페이지는 유저가 웹사이트를 방문했을 때 React 실행에 필요한 코드를 먼저 다운로드 받고 React 컴포넌트 트리를 브라우저에서 만들어주게 된다. React 컴포넌트 트리를 바탕으로 DOM에서 렌더링을 진행하게 된다. 기존의 이런 클라이언트 사이드 렌더링 방식에서 여러 가지 한계들이나 성능상의 이슈들을 마주했..

useSWR로 API 호출 재사용성 높이기

SWR란? React-Query와 비슷한 개념으로 서버에서 데이터를 가져와서 사용하는 Vercel이 개발한 React hooks이다. 더 자세한 개념이랑 사용 방법은 전 글을 참고하자 https://voyage-dev.tistory.com/158 이번에는 SWR hooks로 데이터를 프리렌더링 하며 axios를 이용해 호출 재사용성 높이는 방법을 알아보자. useSWR 함수 SWR 함수는 기본적으로 1개의 인자를 필수로 받는다. key : fetcher 함수에게 전달되는 인자 ⇒ 보통 URL을 넣는다 fetcher : 데이터를 실질적으로 fetch하는 함수이다 option : revalidate , mutate, initialData 등 옵션을 넣어줄 수 있다 사용 순서는 다음과 같다. fetcher를 ..

[Next.js] React-Query로 쿼리 캐싱한 데이터 가져오기

리액트 쿼리는 서버사이드 렌더링을 지원한다. NextJS에서 React-Query를 연동하는 방법을 지난번에 소개했었다. 그러나 나 조차도 프로젝트를 하면서 내가 캐싱에 대해서 잘못 생각하고 있었나?라는 사실을 깨닫게 되었다. 그래서 이번에는 React-Query에 캐싱개념을 좀 더 공부해 볼려고 한다. 지난번에도 말했지만 이번에도 한 번 더 개념을 짚어보고 가보자. NextJS에서는 getStaticProps 또는 getServerSideProps에서 props 객체를 페이지로 전달한 후에 리액트 쿼리의 initialData 옵션을 이용해서 SSR을 구현할 수도 있다. 이렇게 하는 방식이 잘못된 것은 아니지만 공식문서에서는 권장하지 않는다. 이유는 깊이 있는 컴포넌트 단에서 서버 사이드 렌더링한 데이터..

[NextJS] Hydrate?

Next.js 프레임워크의 동작원리를 알고있다면 Hydrate에 대해서는 이미 익숙하게 들었을 거다. 하지만, 놓치기도 쉬운 개념인 만큼, 이번에 제대로 공부하고 정리 해보려고 한다. 일단 React에서 렌더링 되는 과정과 Next에서 렌더링 되는 과정의 차이점에 대해서 정리 해 보자. React.js HTML과 JS파일을 한꺼번에 보내고 클라이언트에서 JS 코드를 통해 웹 화면을 렌더링한다. React는 JS파일만을 이용하여 웹 화면을 구성하는 원리를 가지고 있기 때문에 실제 HTML 코드는 안에 내용이 하나도 없는 상태이다. (CSR이 SEO에 적합하지 않은 원리) // public/index.html 단순 뼈대만 있는 HTML document와 Js 파일들을 클라이언트로 모두 보낸 뒤, 클라이언트 ..