Next.js + Apollo Client + RSC 테스트

React Server Components에서 PreloadQuery로 데이터를 미리 로드하고, 클라이언트 컴포넌트에서 useSuspenseQuery로 데이터를 사용하는 테스트입니다.

게시글 목록

Next.js App Router에서 Apollo Client를 사용하는 방법에 대해 알아보겠습니다.

작성자: 김철수2024. 1. 15.

GraphQL을 사용하면 필요한 데이터만 요청할 수 있어 효율적입니다.

작성자: 이영희2024. 1. 16.

RSC를 활용하여 서버에서 데이터를 미리 로드하는 방법을 살펴보겠습니다.

작성자: 김철수2024. 1. 17.

게시글을 불러오는 중...

이메일: kim@example.com

나이: 30세

이메일: lee@example.com

나이: 25세

이메일: park@example.com

나이: 35세

사용자를 불러오는 중...

1. React Server Components (RSC): 이 페이지는 서버에서 렌더링되며,PreloadQuery 컴포넌트를 사용하여 GraphQL 쿼리를 미리 실행합니다.

2. 클라이언트 컴포넌트: PostsList와UsersList 컴포넌트는 클라이언트에서 실행되며,useSuspenseQuery를 사용하여 서버에서 미리 로드된 데이터를 가져옵니다.

3. 데이터 흐름: 서버에서 데이터를 미리 로드 → 클라이언트로 전달 → 클라이언트 컴포넌트에서 추가 네트워크 요청 없이 데이터 사용

4. GraphQL API: /api/graphql엔드포인트에서 GraphQL Yoga를 사용하여 API를 제공합니다.