인프런 커뮤니티 질문&답변

j44s11님의 프로필 이미지
j44s11

작성한 질문수

Next + React Query로 SNS 서비스 만들기

서버 컴포넌트에서 데이터를 가져오는게 좋은 상황

작성

·

240

0

몇주간 계속 공부하면서 고민을 해봤는데... 결과적으로 서버 컴포넌트에서 데이터를 가져왔을때 좋은 상황이 어떤 경우인지 모르겠습니다. 서버 컴포넌트에서 데이터를 가져왔을때, 그 데이터는 SEO에 반영이 되나요? NEXTJS의 공식문서에서는 서버 컴포넌트가 유리한 상황이 'data fetch' 라고 되어 있습니다. 하지만 지난번에 질문했을때 클라이언트 컴포넌트에서 데이터를 가져오는게 보통 더 좋다는 답변을 받았었습니다.

 

클라이언트에서 데이터를 가져오는게 좋은 상황과, 서버에서 데이터를 가져오는게 좋은 상황을 구분을 못하겠어서 조언을 구하고자 질문 드립니다.

답변 2

0

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

한 가지 더 추가하자면, 서버컴포넌트에서 데이터를 불러왔을 때는 클라이언트에 데이터를 불러오는 코드는 전송되지 않습니다. 데이터를 불러온 결과물과 컴포넌트가 합쳐져 HTML으로 만들어져 HTML만 클라이언트 컴포넌트로 전송됩니다. 데이터가 거의 바뀌지 않는다면 이 결과물을 캐싱하여 빠르게 클라이언트로 전달할 수 있습니다.

캐싱을 잘 활용할 수 있다면 서버에서 데이터를 불러와서 클라이언트에게 캐싱된 페이지를 빠르게 전달하는 게 유용하긴 하겠죠. 안 그러면 클라이언트가 HTML, JS 따로따로 받아온 후에 다시 데이터를 백엔드로 요청해야 하니까 느릴 겁니다.

0

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

벡엔드 서버를 따로 마련하지 않는 상황에서는 api route를 사용하지 않고도 서버컴포넌트에서 바로 db조회까지 다 할 수 있으니까 편하죠. 속도도 더 빠릅니다.

seo를 위해서 데이터를 가져와야하는 경우에도 편하고요.(generateMetadata)

그 외의 상황에서는 클라이언트에서 가져오는 경우가 좋습니다. 백엔드 서버가 있으면 ssr 목적 외에는 정말 사용 이유가 많이 줄어듭니다.

j44s11님의 프로필 이미지
j44s11
질문자

답변 정말 감사드립니다!

j44s11님의 프로필 이미지
j44s11

작성한 질문수

질문하기