- 1) CSR(Client-side Rendering)이란 무엇이며, 그것의 장단점에 대하여 설명해주세요.
- 2) SPA(Single Page Application)로 구성된 웹 앱에서 SSR(Server-side Rendering)이 필요한 이유에 대하여 설명해주세요.
- 3) Next.js 프로젝트에서
yarn start(or npm run start)스크립트를 실행했을 때 실행되는 코드를 Next.js Github 레포지토리에서 찾은 뒤, 해당 파일에 대한 간단한 설명을 첨부해주세요.
CSR
- Client Side Rendering
- SPA(Single Page Application)에서 쓰인다.
Steps(간략하게 요약해본 동작순서)
Step1.
요청과 함께 index.html을 다운로드 -> 모든 코드가 들어있는 index.js파일도 다운
따라서 다운로드 시간이 길 수 있다. -> 첫 화면까지 시간이 걸릴 수 있음
Step2.
JS가 실행 -> data API 호출 -> 유저는 placeholder를 보게됨
Step3.
서버의 응답 -> data가 placeholder자리로 들어감
Step4.
페이지가 상호작용 가능해짐
장점
필요한 부분만 다시 읽어들이기 때문에 조금 더 빠른 상호작용이 가능하다
변경된 부분의 데이터만 가져와 화면의 깜빡임이 없다
단점
자바스크립트 다운 및 실행이 끝나기 전까진 사용자가 볼 수 있는 게 없다.
앱이 커지면 필요한 자바스크립트 양이 증가하는 경향으로 인해 첫 다운 번들사이즈도 증가
=> 첫 화면 속도 저하
검색엔진 망에 걸리지 않음 -> SEO에 취약함
검색엔진: index.html을 기준으로 판단
CSR의 HTML은 비어있으므로.
단, 구글의 검색엔진은 JS까지 실행하기 때문에 제외.
SPA, SSR
- Server Side Rendering
서버에서 렌더링 준비가 완료된 HTML파일을 클라이언트에 전달
자바스크립트를 다운받는 동안 사용자에게 화면을 보여줌
웹 페이지 요청마다 새로고침이 일어남 => 화면 깜빡임이 있음
SPA의 SEO 취약점을 해결해 줄 수 있음
해뜰날