SSR & CSR

Pre-onBoarding challenge

→ Git-Hub

SSR

• 서버로부터 모든 데이터가 HTML에 렌더링된 화면으로 브라우저에 전달
• 초기 구동 속도가 빠름
• JavaScript 로직이 모두 연결될때까지 view - interaction 간의 시간차 발생
• 서버에 부하 발생 가능성
• HTML파일만 크롤링하는 검색엔진최적화(SEO)에 유리

CSR

• JavaScript 파일들을 다운로드하고 DOM 생성
• 초기 로딩속도가 느리다는 단점
• 이후 페이지 변경시점부터는 서버에 데이터만 요청하면 되므로,
• 동적 구동속도는 빠름
• 서버는 빈 껍데기 HTML를 넘겨주는 역할만 수행하므로 부하가 적음
• 클라이언트측에서 연산과 라우팅을 처리하는 역할
• 빠르고 화면깜빡임이 없는 UX측면에서 유리

React와 Next.js 어떤 상황에서 각각을 선택해야 하나요?

React

• CSR 구현방식일때 선택하는 하나의 방법으로, 클라이언트가 브라우저에서 페이지를 만들기 때문에,
• 화면 컴포넌트가 많거나 복잡해도 UI를 쉽고 빠르게 만들어내는 데 효율적입니다.

Next.js

• CSR이 SEO에 불리하다는 비즈니스상의 큰 단점을 보완하기 위해,
• SSR으로 구현시키고자 할때 사용하는 리액트 프레임워크입니다.
• Code splitting 을 통해 초기 로드시 필요한 최소한의 코드만 다운로드할 수 있기때문에,
• SSR 의 초기구동속도가 느리다는 단점도 보완합니다.

PWA를 구현할 때 Service Worker의 역할은 무엇인가요?

• Service Worker는 브라우저-웹서버 사이의 가상 프록시로,
• 오프라인에서의 요청과 응답을 처리가능하게 하는 미들웨어 역할을 수행합니다.

SSR, CSR, SPA, PWA, Electron등 다양한 전략이 있는데, 각 전략들은 어떤 상황에 사용되는 것이 적합하며 비즈니스에 어떤 이점을 가져다줄까요?

• SSR
  • 웹사이트 검색엔진 노출 등의 비즈니스 전략, 서버 역할을 보다 더 부여하고자 할때 적합
• CSR
  • 화면 컴포넌트가 많고, 깜빡임 없이 부드럽게 이동, 초기 빠른 속도 필요시 적합
• SPA
  • CSR 방식으로 개발할 때, 전체페이지를 하나의 화면에 담아 동적으로 렌더링, 빠른 interaction 필요시 적합
• PWA
  • 웹과 네이티브 앱의 기능을 모두 갖춘 형태로, 웹에서도 데이터를 캐싱하여 앱처럼 사용가능하도록 할 때 적합
• Electron
  • 웹개발한 소스를 데스크탑 환경에서 애플리케이션처럼 사용할 수 있게 할 때 적합