[원티드 프리온보딩 챌린지] 사전과제

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

1. CSR(Client-side Rendering)이란 무엇이며, 그것의 장단점에 대하여 설명해주세요.

💡 CSR(Client Side Rendering)이란?

: 클라이언트 사이드 렌더링이란 사용자의 요청에 따라 필요한 부분만 응답 받아 렌더링을 처리하는 방식입니다. (= 클라이언트측에서 렌더링)

 

👍 CSR의 장점

• 화면 깜빡임이 없다.
• 초기 로딩 이후 구동 속도가 빠르다.
• TTV(Time To View)와 TTI(Time To Interact)사이 간극이 없다.
• 서버 부하가 클라이언트로 분산되서 부하가 적다.

👎 CSR의 단점

• 초기 로딩 속도가 느리다.
• SEO(검색 엔진 최적화)에 불리하다.

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

SSR을 사용하면 모든 데이터가 매핑된 서비스 페이지를 클라이언트(브라우저)에게 바로 보여줄 수 있습니다. 서버를 이용해서 페이지를 구성하기 때문에 클라이언트에서 구성하는 CSR(client-side rendering)보다 페이지를 구성하는 속도는 늦어지지만 전체적으로 사용자에게 보여주는 콘텐츠 구성이 완료되는 시점은 빨라진다는 장점이 있고 더불어 SEO(search engine optimization) 또한 쉽게 구성할 수 있습니다.

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

• https://nextjs.org/docs/getting-started (다음.js 세팅 가이드)
• https://github.com/vercel/next.js/ (다음.js Github 레포지토리)

---

CSR, SSR에 대한 이야기를 하기 전에 먼저 SPA와 MPA에 대한 이야기를 해보려고 합니다.

오늘날 웹 어플리케이션 개발을 한다고 하면 대부분 React, Angular, Vue와 같은 자바스크립트 기반 프레임워크를 사용해서 SPA를 개발하게 됩니다.

SPA란 Single Page Application의 약자로 이름에서도 파악할 수 있듯이, 어떤 웹 사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 표현하는 것을 의미합니다. 

반면 MPA란 Multi Page Application의 약자로 탭을 이동할 때마다 서버로부터 새로운 html을 새로 받아와서 페이지 전체를 새로 렌더링하는 전통적인 웹 페이지 구성 방식입니다.

이러한 MPA는 새로운 페이지로 이동할때마다 화면이 깜빡이고, 새로운 페이지를 요청할 때마다 전체 페이지를 다시 렌더링하기 때문에 리로딩이 발생하게 되며 그에 따른 서버의 부하가 많이 걸려 사용하는 사람들이 많아질수록 더욱 느려지는 현상을 겪을 수 있어 AJAX가 등장하면서부터는 원하는 부분만 클라이언트에서 동적으로 갈아끼울 수 있고 화면 깜빡임도 없는 SPA를 사용하게 되었습니다.

---

SPA와 MPA에 대해 먼저 이야기 한 이유는 이 두 가지 개념이 밀접한 연관이 있기 때문입니다.

이제 본격적으로 CSR과 SSR에 대해 알아보며 어떤 연관이 있는지 알아보겠습니다.

 

일반적으로 SPA에서는 렌더링 방식으로 CSR을, MPA에서는 렌더링 방식으로 SSR을 채용합니다.

SPA는 웹 어플리케이션을 필요한 정적 리소스를 초반 한 번에 모두 다운로드 하고 그 이후 새로운 요청이 있을 때 페이지 갱신에 필요한 데이터만 전달받아서 클라이언트에서 페이지를 갱신하기 때문에 자연스럽게 렌더링 방식으로 CSR을 사용하게 되고 MPA는 새로운 요청이 있을 때마다 서버에서 이미 렌더링 된 정적 리소스를 받아오기 때문에 렌더링 방식으로 SSR을 사용하게 됩니다.

React, Angular, Vue를 사용해서 SPA를 만들고 특별한 목적을 가지고 렌더링 방식을 변경하지 않는다면 자연스럽게 CSR을 사용하게 되고, PHP나 JSP로 MPA를 만들면 자연스럽게 SSR을 사용하게 되는 것 입니다.

 이러한 특징 때문에 SPA는 CSR, MPA는 SSR이라는 오해가 생겨나기도 했지만 이 두 개념은 페이지가 몇 개인지, 렌더링을 어디서 하는지에 따라 달라지는 다른 개념이라는 것을 기억해야 합니다.

 

 

💡 CSR(Client Side Rendering)이란?

: 클라이언트 사이드 렌더링이란 사용자의 요청에 따라 필요한 부분만 응답 받아 렌더링을 처리하는 방식입니다. (= 클라이언트측에서 렌더링)

1. User가 Website 요청을 보냄.
2. CDN이 HTML 파일과 JS로 접근할 수 있는 링크를 클라이언트로 보낸다.
    CDN : aws의 cloudflare를 생각하면 됨. 엔드 유저의 요청에 '물리적'으로 가까운 서버에서 요청에 응답하는 방식
3. 클라이언트는 HTML과 JS를 다운로드 받는다. (이때 SSR과 달리 유저는 아무것도 볼 수 없다.)
4. 클라이언트가 자바스크립트를 다운받는다.
5. 다운이 완료된 JS가 실행된다. 데이터를 위한 API가 호출된다.(이때 유저들은 placeholder를 보게된다. )
6. 서버가 API로부터의 요청에 응답한다.
7. API로부터 받아온 data를 placeholder 자리에 넣어준다. 이제 페이지는 상호작용이 가능해진다.

👍 CSR의 장점

• 화면 깜빡임이 없다.
• 초기 로딩 이후 구동 속도가 빠르다.
• TTV(Time To View)와 TTI(Time To Interact)사이 간극이 없다.
• 서버 부하가 클라이언트로 분산되서 부하가 적다.

👎 CSR의 단점

• 초기 로딩 속도가 느리다.
• SEO(검색 엔진 최적화)에 불리하다.

 

💡 SSR(Server Side Rendering)이란?

: 서버로부터 완전하게 만들어진 html파일을 받아와 페이지 전체를 렌더링 하는 방식입니다.(= 서버측에서 렌더링)

1. User가 Website 요청을 보냄.

2. Server는 'Ready to Render'. 즉, 즉시 렌더링 가능한 html파일을 만든다. (리소스 체크, 컴파일 후 완성된 HTML 컨텐츠로 만든다.)

3. 클라이언트에 전달되는 순간, 이미 렌더링 준비가 되어있기 때문에 HTML은 즉시 렌더링 된다. 그러나 사이트 자체는 조작 불가능하다. (Javascript가 읽히기 전이다.)

4. 클라이언트가 자바스크립트를 다운받는다.

5. 다운 받아지고 있는 사이에 유저는 컨텐츠는 볼 수 있지만 사이트를 조작 할 수는 없다. 이때의 사용자 조작을 기억하고 있는다.

6. 브라우저가 Javascript 프레임워크를 실행한다.

7. JS까지 성공적으로 컴파일 되었기 때문에 기억하고 있던 사용자 조작이 실행되고 이제 웹 페이지는 상호작용 가능해진다.

👍 SSR의 장점

• SEO(검색 엔진 최적화)에 유리하다.
• 초기 구동 속도가 빠르다.

👎 SSR의 단점

• 화면 깜빡임이 있다.
• TTV(Time To View)와 TTI(Time To Interact) 사이 간극이 있다.
• 페이지 로딩할 때마다 매번 서버에 요청하기 때문에 서버 부하가 있다.

---

그리고 이 두 가지 개념에 대해 학습할때 SSG도 함께 언급되는데요.

SSG는 Static Site Generation의 약자로 Static Rendering 이라고도 불립니다.

서버에서 HTML을 보내준다는 측면에서는 SSR과 비슷하지만 언제 만들어 주는지에 따른 차이가 있습니다.

SSR은 요청 시 서버에서 즉시 HTML을 만들어서 응답하기 때문에 데이터가 달라지거나 자주 바뀌어서 미리 만들어 두기 어려운 페이지에 적합하고 SSG는 페이지들을 서버에 모두 만들어 둔 뒤에 요청 시 해당 페이지를 응답하는 것이기 때문에 바뀔 일이 거의 없어서 캐싱 해두면 좋은 페이지에 사용하면 적합합니다.