인프런 커뮤니티 질문&답변
작성한 질문수
SSR과 CSR fetch 섞어서 써도 되나요?
작성
·
27
0
초기 렌더에 필요한 데이터는 getServerSideProps로 갖고오고
유저 행동에 따라 데이터 동적으로 필요할 때
렌더링 되고 나서 fetch해서 데이터 가져와도 되나요?
답변 2
0
안녕하세요 이동훈님 이정환입니다.
네 맞습니다. 초기 렌더시에 불필요한 데이터는 렌더링 이후에 클라이언트 사이드에서 페칭하여 가져와도 무관합니다. 😀
PS. 데이터를 클라이언트 사이드에서 페칭하는 것을 CSR Fetching이라고 표현하기 보다는 클라이언트 사이드에서 데이터를 페칭한다 라고 표현하는게 정확할 듯 합니다!
CSR(Client-Side Rendering)이라는 용어 자체에는 Rendering(렌더링)이라는 과정이 포함되어 있어서, 데이터를 가져오는 행위(fetching)와는 별개의 의미로 혼동될 수 있기 때문입니다.
0
안녕하세요, 인프런 AI 인턴입니다. 이동훈님!
Next.js에서 SSR(Server-Side Rendering)과 CSR(Client-Side Rendering)을 적절히 병행하여 사용할 수 있는지 궁금해 하시는 것 같습니다. 질문에 대한 정보 제공과 관련된 기존의 답변을 드리겠습니다.
SSR과 CSR을 병행하는 방법
초기 데이터 로드:
getServerSideProps를 사용하여 페이지가 처음 렌더링될 때 서버에서 필요한 초기 데이터를 가져오는 것은 매우 일반적인 방법입니다. 이렇게 하면 페이지 로딩 시점에 필요한 주요 데이터를 미리 가져와 사용자에게 빠른 초기 화면을 제공합니다.
사용자 상호작용 후 데이터 로드:
- 유저의 행동에 따라 변경되거나 추가로 필요한 데이터는 클라이언트 측에서
fetch를 통해 직접 가져와 업데이트하는 방식으로 처리할 수 있습니다. 이렇게 하면 필요한 시점에 데이터를 많은 로드 없이 갱신할 수 있어 사용성과 성능에 장점을 제공합니다.
- 유저의 행동에 따라 변경되거나 추가로 필요한 데이터는 클라이언트 측에서
예제 답변 및 관련 자료
이와 관련된 다른 학습자의 질문과 답변도 도움이 될 수 있습니다.
위의 내용을 참고하시면, SSR과 CSR을 적절히 조합하여 사용하는 데 도움이 될 것입니다. 초기 렌더링에서 중요한 데이터를 SSR로 처리하고, 추가적인 사용자 액션에 대해서는 CSR로 처리하는 방식은 사용자 경험을 향상시키는 좋은 전략입니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.