Session-How the web works? - advanced (SPA,CSR,SSR)

Keyword

- SPA(Single Page Application) : 하나의 HTML파일로 이루어져 있음.

- CSR(Client Side Rendering) : 클라이언트 쪽 위주로 해서 웹페이지가 구성이 됨. 빈 html에서 클라이언트의 요청(?)에 따라 비어진 부분이 채워지는 개념

- SSR(Server Side Rendering) : 서버에서 이미 렌더링이 된 화면을 보내는 것.

- MPA(Multi Page Application) : 여러 html파일로 페이지마다 구성하는 것

- SEO(Search Engine Optimization) :  검색 엔진(ex.구글, 네이버)회사에서 봇으로 웹사이트를 평가하여 점수를 내려 점수에 의해 검색에 노출되게 하는 것

 - Hydration : CRA와 같은 client-side framework가 서버에서 전송한 정적 문서(html)를 데이터 변경에 반응할 수 있는 동적 형태(dom수정한다는 말)로 변환하는 client 측 process를 말한다.

 - CRA(Create React App) : 리액트 앱으로 만듦.

 - isomorphic javascript: SSR과정 중 한 JS코드가 node에도 돌아가고 broswer에서도 돌아갈 때

 

Static Website

정적인 웹사이트

예) 게츠비 블로그

그냥 모든 데이터가 html안에 다 들어가 있는 것

적절한 사이트는 회사 소개 페이지

SSR

Dynamic Website

Static Website와 반대

 

 - CSR

 - SSR

 

 

 

SPA(Single Page Application) - HTML이 한개, CSR임.

SPA 장점

1. 자연스러운 사용자 경험(UX)
2. 필요한 리소스만 부분적으로 로딩(성능)
3. 서버의 탬플릿 연산을 클라이언트로 분산(성능)
4. 컴포넌트별 개발 용이(생산성)
5. 모바일 앱 개발을 염두에 둔다면 동일한 API를 사용하도록 설계 가능(생산성)

SPA 단점

1. JavaScript 파일을 번들링해서 한 번에 받기 때문에 초기 구동 속도 느림(webpack 의 code splitting으로 해결)
2. 검색엔진최적화(SEO)가 어려움 (SSR 로 해결)
3. 보안 이슈 (프론트엔드에 비즈니스 로직 최소화)

MPA(Multi Page Application) - 페이지마다 HTML이 존재, SSR임.

SSR 의 장점

1. 검색 엔진 최적화
2. Search Engine Optimization
3. SEO

다 같은 말입니다. 전통적인 MPA 의 경우 브라우저에서 JavaScript 코드가 동작하기 전에도 완성된 형태의 탬플릿(HTML에 데이터가 삽입된 상태)을 서버로 부터 전달받습니다. 이 때문에 JavaScript 를 구동하지 않는 모르는 검색 로봇이 페이지를 크롤링하기에 매우매우 적합합니다.

SSR 의 단점

1. 페이지 이동시 화면 깜빡임(UX)
2. 페이지 이동시 불필요한 탬플릿도 중복해서 로딩(성능)
3. 서버 렌더링에 따른 부하(성능)
4. 모바일 앱 개발시 추가적인 백엔드 작업 필요(생산성)

 

https://developers.google.com/web/updates/2019/02/rendering-on-the-web

 

이런거 11번가 처럼 CSR로 돌려야하지만 SEO에 노출이 많이 되어야 하는 웹사이트라면 SEO를 위한 SSR을 준비하고 내부는 CSR로 돌린다. 이러한 것을 NEXT.JS를 요즘 많이 쓴다.

 

 

다 같은 분류의 개념은 아닌데 연동이 많이 되는 개념들이기 때문에 많이 말하여진다. 개념들을 잘 이해하여 구분하여 써야한다.