SSR, CSR 질문 있습니다.

Question

안녕하세용.아까 질문드렸던 사람인데,여기저기 찾아보니까 요즘 웹에서는 리액트랑 뷰 때문에 대부분 CSR 쓰는 거 같더라고용.근데 또 검색엔진이 중요하다고 생각하는 곳에선 CSR, SSR ( 주로 Next.js나 Nuxt.js ) 섞어서하이브리드 형식으로 만든다고 하는데, 그렇게 하는 곳이 실제로 많나요?

kimhwanhoon · Answer

네 많습니다. 한국에선 좀 덜 한 느낌이 있긴해도요. 리액트는 단순히 CSR만 지원하는게 아닙니다. Next.js만 주로 써서 다른 프레임워크는 모르겠지만, 서버사이드(SSR)에서 컴포넌트 만들걸 배포가능하단 얘기는 즉, 유저가 웹사이트에 방문해서야 클라리언트에서 랜더링하는것이 아니라 서버단에서 가능하단 이야기입니다. 그럼 클라이언트에서는 어떤 엔드포인트로 데이터를 가져오는지 알 수 없고, 이걸 이용한게 SSG(Static Site Generation)입니다. 그렇다면 애초에 다이나믹하지 않은 데이터는 빌드할 때 미리 요청해서 미리 사이트를 완성시켜버림으로써 사용자가 웹사이트 방문 시 서버에서도 클라이언트에서도 api요청을 할 필요가 없어져 서버부하를 상당히 줄여줍니다. 여기에서 얘기한 SSR, SSG 앞글자가 S들어가면 서버라고 생각하시면 되는데 이들은 미리 빌드되기에 SEO에 좋습니다. (메타 태그 등 미리 설정가능하므로) 그리고 또 장점으로는 캐시를 브라우저단의 캐시를 사용하므로 CSR이었으면 새로고침이나 강제 새로고침하면 새롭게 데이터 요청을 해서 가져오게 되는데 서버에서 브라우저 캐시로 등록됨으로 새로고침하더라도 요청 시 cache hit처리가 되기 때문에 요청없이 캐시된 데이터를 바로 가져오게 됩니다. 여기에서 더 나아간게 바로 ISR(Incremental Static Regeneration)점진적 정적 재 생성인데, 캐시된것을 서버단에서 무효화 처리하여 다시 받게 하던가 일정 기간을 두고 자동으로 새로운 데이터를 받게하면 모든 이점을 다 챙겨갈 수 있습니다. 폰으로 생각없이 쓰느라 장황하게 쓴거 이해해주세요

nippori · Answer

제로초님 영상이 괜찮은 답이 될것 같아서 링크 남겨 두겠습니다.https://youtu.be/XfuYV2JxVWk?si=1Twb6ng8SYRD576s

SSR, CSR 질문 있습니다.

2개의 답변

#ssr 목록