원티드 프리온보딩 챌린지 10월_사전과제

원티드 프리온보딩 챌린지 10월 (CSR / SSR with Next.js)

1. CSR(Client-side Rendering)이란 무엇이며, 그것의 장단점에 대하여 설명해주세요.
   • 모든 데이터를 client로 전달하여 client의 브라우저에서 데이를 해석하고 렌더링하는 방식
   • 장점: client의 행동에 따라 필요한 부분만 다시 읽어서 변경시키기에 전체 페이지를 다시 읽어오는 것보다 빠르다.
   • 단점:
     • client로 전달하는 데이터가 클 수록 첫 로딩화면이 느림.
     • 검색 엔진은 주로 HTML구조를 인식하지만 JS의 용량이 커서 빈 페이지 또는 덜 완성된 페이지로 인식하여 검색 엔진에 최적화가 안되어 있음

2. SPA(Single Page Application)로 구성된 웹 앱에서 SSR(Server-side Rendering)이 필요한 이유에 대하여 설명해주세요.

   • 검색 엔진 최적화를 위해서이다. 예를 들어, 만약 사이트의 목적이 온라인 판매라며 사람들에게 접근성이 있어야 한다. 이를 위해 상위 노출이 필수 인데 초기 렌더링씨 SSR은 HTML 구성을 미리 주기에 검색 엔진 최적화를 만족하고 이후 JS를 읽어서 CSR방식의 빠른 화면 전환이 가능하게 만들어준다.

3. Next.js 프로젝트를 세팅한 뒤 yarn start 스크립트를 실행했을 때 실행되는 코드를 nextjs github 레포지토리에서 찾은 뒤, 해당 파일에 대한 간단한 설명을 첨부해주세요.

   • page폴더의 _app.js가 실행되고 그다음 index.js가 실행된다.