RSC (React Server Compoment)

리액트 서버 컴포넌트는 react 18에 나온 아주 강력한 기능 중 하나이다.

https://react.dev/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components

Server side rendering을 상호보완해주는 기술인데, Next.js 서버 컴포넌트도 RSC에 기반한다고 한다.

Next에서 권장하는 방법론 !
1. server component를 이용하여 서버측에서 데이터를 fetching 합니다.

2. data fetching을 병렬적으로 수행하는것이 좋습니다.

3. layout 및 page의 경우 데이터를 사용하는 곳에서 데이터를 가져오는것이 좋습니다.

4. Suspense, Loading UI를 이용해 점진적으로 렌더링을 수행하는것이 좋습니다.

revalidate는 뭐지 ?? 하다가 ISR과 관련된거라고 알게되었따
특정한 간격마다 캐시된 데이터를 재검증하기 위해 리소스의 캐시 수명을 설정하는 것이다.

https://velog.io/@seungchan__y/NextJS%EC%99%80-ISR

리액트 쿼리를 SSR 환경에서 사용하기 위해서

공식문서에서 추천하는 방법이 있습니다.

두가지 방법이 존재하는데

initialData 속성을 이용한 방법과

Hydration을 이용한 방법이 있습니다.

튜토리얼은 요기

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