인프런 커뮤니티 질문&답변
작성한 질문수
CSR, SSR 렌더링 방식 문의
작성
·
10
0
안녕하세요~
설명해주신 CSR, SSR 렌더링 강의보고 CSR, SSR 렌더링 방식에 대해 궁금한점 두가지 남겨봅니다!
(유사한 질문이 있는지 찾아봤는데 글이 많아서 찾질 못해서 중복 감안하고 올려봅니다🙏🏻)
질문1
CSR은 bundle js 다운로드 레이턴시 만큼 FCP가 느리고 반대로 SSR은 bundle js 다운로드 레이턴시만큼 CSR보다 FCP가 빠르다고 이해했는데요.
TTI 기준으로 보면 결국 CSR, SSR모두 차이가 없는게 맞을까요? (gzip압축 해제, js parse, hydration등의 처리에서 드는 비용의 차이가 있겠지만 이런 부분들은 크게 영향을 주진 않을거라고 생각하여 문의드립니다. 혹시 두 방식에 영향을 미치는 큰 요소가 있다면 그 부분도 고려해서 알려주시면 감사하겠습니다.)
질문2
CSR의 장점으로 초기 렌더링이 느리고 이후에 페이지 이동시 빠르게 화면을 그릴 수 있다고 하셨는데요, CSR에서 초기 렌더링의 속도를 높이기 위해 코드 스플리팅 전략을 취할 수 있을거 같습니다.
이렇게 CSR에서 코드 스플리팅 방식을 취한 경우 페이지 이동시 결국 bundle js 다운르드 레이턴시가 또 발생할거 같은데요. prefetch, preload같은 전략을 취하지 않고 코드스플리팅만 적용한 CSR방식은 단점만 남는 렌더링 전략이 맞을까요?
유일한 장점은 CSR이지만 코드 스플리팅을 했기 때문에 초기 FCP가 조금 빠르다정도일거 같은데 이해한게 맞는지 문의드려봅니다.
답변 2
0
안녕하세요 이정환입니다.
순서대로 답변드리겠습니다 😃
질문1)
네 TTI를 기준으로는 CSR과 SSR의 방식의 큰 차이는 없습니다. 다만 기존 리액트 앱의 경우 JS Bundle을 페이지 단위로 스플리팅 하는 기능이 자동 제공되지 않기 때문에 페이지 단위로 코드가 자동 스플리팅 되는 Next.js가 조금 더 빠를 가능성이 있습니다.
질문2)
네 맞습니다. CSR에서 코드스플리팅 전략을 채택해 초기 접속 속도를 높일 수 있습니다. 그러나 이럴 경우 이후의 페이지 이동시 추가적으로 JS Bundle을 불러와야하기 때문에 향후의 페이지 이동이 오히려 느려지게 될 수 있습니다. 따라서 이런 문제까지 해결하시려면 프리페칭 기능도 함께 적용해주셔야 합니다.
그러나 코드스플리팅만 채택한 CSR이 단점만 남는 렌더링 전략 이냐고 물으신다면 그렇다고 말씀드리기에는 조금 애매합니다. 페이지 이동 속도보다 초기 접속 속도가 훨씬 중요한 서비스의 경우 (이를 테면 인덱스 페이지에서 거의 모든 기능을 처리하는 등의 서비스...) 좋은 전략이 될 수 있습니다.
0
안녕하세요, 인프런 AI 인턴입니다. 슈퍼장님!
Next.js 강의를 들으시면서 CSR(클라이언트 사이드 렌더링)과 SSR(서버 사이드 렌더링)에 대해 궁금한 점이 있으신 것 같아서, 이에 대해 아래와 같이 답변을 드리겠습니다.
질문 1: TTI 기준으로 CSR, SSR 차이
CSR vs SSR의 FCP와 TTI
- FCP(First Contentful Paint): CSR에서는 브라우저가 서버로부터 HTML과 JS Bundle을 다운로드하고, JS를 실행해야 화면에 내용이 처음 보입니다. 반면 SSR은 서버가 HTML을 구성해서 보내기 때문에 초기 표시(FCP)는 더욱 빠르게 진행됩니다.
- TTI(Time to Interactive): TTI는 해당 페이지가 사용자와 상호작용이 가능한 상태가 되는 시점을 의미합니다. 이 시점은 다양한 요소에 의해 결정됩니다.
큰 요소의 차이
- CSR과 SSR 모두 hydration 및 JS 실행을 거치게 되지만, TTI에서 큰 차이를 보이지 않을 수 있습니다. 그러나 SSR을 사용하면 초기 로딩이 화면에 더 빠르게 보일 가능성이 있어 사용자 경험 측면에서 긍정적일 수 있습니다.
질문 2: CSR에서 코드 스플리팅 전략의 효과
CSR의 장점과 코드스플리팅
- 초기 로딩 시간: CSR은 처음 페이지 로드시 JS 실행을 중요시합니다. 코드 스플리팅을 통해 초기 번들의 크기를 줄여 빠른 로딩을 가능하게 합니다.
- 페이지 이동시 로딩 지연: 이후 페이지 이동 시에 필요한 JS 번들을 다시 요청하게 되며, 이는 추가적인 레이턴시의 원인이 될 수 있습니다.
전략적 비교
- 코드 스플리팅만 적용한 CSR: 이는 초기 로딩이 빠를 수 있으나, 페이지 이동 시마다 추가 JS 로드를 필요로 하여 지연될 수 있습니다. 코드 스플리팅을 통해 초기 FCP가 빨라지기는 하나, 페이지 전환 시 최적의 사용자 경험을 위해 prefetch나 preload와 같은 전략이 함께 사용될 수 있습니다.
결론
- CSR에서 코드 스플리팅을 적용하면서도, 사용자 경험을 극대화하기 위해서는 다양한 전략(prefetch, preload 등)을 병행하는 것이 중요합니다.
이를 통해, CSR, SSR 각각의 방식에서 사용자 경험을 가장 긍정적으로 이끄는 방법에 대해 고찰하실 수 있을 것입니다. 질문자님의 이해를 돕고자, 관련된 유사한 질문을 아래 링크에서 확인하시기 바랍니다:
현재 베타 기능 제공으로 인해, 답변이 만족스럽지 않을 수 있습니다. 이에 대해 양해 부탁드리며 추가적으로 궁금한 점이 있다면 언제든지 질문해 주십시오. 지식공유자께서 빠르게 답변해 주실 것입니다. 🙏
추가 질문이 있으시면, 망설이지 말고 계속 질문해 주시기 바랍니다.