SSR과 CSR fetch 섞어서 써도 되나요?
86
6 asked
초기 렌더에 필요한 데이터는 getServerSideProps로 갖고오고
유저 행동에 따라 데이터 동적으로 필요할 때
렌더링 되고 나서 fetch해서 데이터 가져와도 되나요?
Answer 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로 처리하는 방식은 사용자 경험을 향상시키는 좋은 전략입니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
모달 관련 질문
0
20
3
렌더링 관련 질문
0
73
2
중복으로 하나의 api를 요청할 때 캐싱 옵션 통일화
0
56
2
라우트 세그먼트 옵션 강좌 노트에 사소한 제보 남깁니다.
0
57
2
SSR시 context에 params말고 query를 사용하면 안되나요?
0
68
2
npx prisma db push 시 에러가 뜹니다.
0
89
3
vercel 배포를 실패하였습니다.
0
90
3
Image 컴포넌트 사용시 브라우저 콘솔에 경고는 왜 뜨는걸까요?
0
53
2
getServerSideProps 함수와 SSR의 관계
0
74
6
없는 페이지인데 풀라우트캐시로 저장이 되는 이유가 궁금합니다
0
55
2
실제 프로젝트에서 SSR 사용에 관해서 질문드립니다.
0
111
2
일반적인 nextjs project architecture에 대하여..
0
83
2
2.14 Search에서 작성한건 static이긴하지만 CSR이 아닌가요?
0
70
2
배포 시 오류 발생
0
83
2
백엔드 서버 오류납니다.
0
79
2
취약점 제거시 nestjs 버전 문제가 생길까요?
0
89
1
eslint.config.mjs 내 rules 어떻게 설정 하나요?
0
101
1
[book]/[id]/page.tsx 모달 띄울 때 성능 하락 현상은 ReviewList를 불러오면서 발생하는 문제 같습니다.
0
60
2
빨간줄 설정
0
74
2
익스텐션 질문
0
58
1
강의 들으면서 궁금한 부분 질문드립니다.
0
108
1
서버 배포 에러입니다.
1
96
2
[5.2) 풀라우트 캐시 2] fetch의 cache 옵션 기본값 질문: no-store/force-cache
1
102
2
백엔드 prisma 연결
0
92
2