CSR, SSR, … Next.js

과제 내용

• 1. CSR(Client-side Rendering)이란 무엇이며, 그것의 장단점에 대하여 설명해주세요.
• 1. SPA(Single Page Application)로 구성된 웹 앱에서 SSR(Server-side Rendering)이 필요한 이유에 대하여 설명해주세요.
• 1. Next.js 프로젝트를 세팅한 뒤 yarn start 스크립트를 실행했을 때 실행되는 코드를 nextjs github 레포지토리에서 찾은 뒤, 해당 파일에 대한 간단한 설명을 첨부해주세요.

과제 정답

1. CSR ( Client - side Rendering )이란 무엇인가?

CSR 흐름

-> HTML Download -> Javascript Download -> JavaScript Evaluation -> Data Fetching -> Content watching

CSR의 특징

일반적인 SPA (Single Page Application)에서 사용되는 기법인데 클라이언트의 자바스크립트 다운로드에따라 렌더링이 가능하므로 SEO(Search Engine Optimization에) 취약합니다. 그리고 자바스크립트 번들 이 무거워질수록 사이트가 느려 보입니다.

1. SPA로 구성된 웹앱 에서 SSR이 필요한 이유는?

SSR(Server-Side Rendering) 이란?

CSR과는 제일 큰 차이점을 가진것이, 서버가 페이지를 제작해서 보내준다. 서버가 미리 보내주기 때문에 클라이언트쪽에서는 제어권을 많이 덜어서 제출한다. 다만 서버측에서 주로 작업을 시행하기때문에 한가지 큰 이슈를 볼 가능성이 높아진다.

TTV와 TTI의 공백

TTI(Time to View) -사용자가 처음 웹페이지를 확인하는 시간 TTI(Time to Interact) -사용자가 웹페이지랑 상호작용을 하는시간 SSR의 경우 서버쪽에서 HTML작업을 미리하고 CLIENT쪽으로 보내기 때문에, TTV까지의 기간이 짧은 반면에 자바스크립트가 로딩이 되기전까지 TTI가 불가능하므로 TTV와 TTI까지의 공백이 큰 편이다.

1. Next.js 프로젝트에서 yarn start 스크립트를 실행했을때 실행되는 코드는? next.js 는 시작할때 index.js -> __document.js-> __app.js순으로 실행된다.