WEB Trands (SSR & CSR? & SSG?) 이란

 

1. Static Sites

 1990 중반까진 서버에 만들어진 HTML 문서를 계속 불러오는 방식

 페이지내에서 다른 링크를 클릭하면 계속 문서를 새로 받아와서 문제..

 

2. iframe 태그 도입

1996 페이지에서 부분적으로 문서를 불러와 업데이트 할 수 있게 되었음.

 

 

3. XMLHttpRequest

1998 HTML 문서 전체가 아니라 JSON 같은 포멧으로 필요한 데이터만 받아올 수 있게 되었음

 

4. AJAX

2005 SPA (Single Page Application) 등장

 

5. CSR (Client Side Rendering )

- 클라이언트에서 모든 것을 처리 함 

큰 문제점 : 첫 화면을 보기까지 시간이 걸릴 수 있음, Low SEO (Search Engine Optimization) 문제

• SEO(Search Engine Optimization) = 검색엔진최적화
  웹 크롤러, 봇들은 html에서 컨텐츠를 수집해서 검색을 도와준다.

HTML 을 분석할때 문제 발생 (텅 빈 HTML 에 JS 파일을 넣는 방식이라..)

 

6. SSR (Server Side Rendering)

- 서버에서 필요한 데이터를 모두 가져와서 html 을 만들고 클라이언트에 보냄

장점 : 첫번째 페이지 로딩이 빠르고 컨텐츠가 모두 html 에 담겨있음

문제점 : Blinking Issue 사용자가 클릭시 전체적인 웹사이트를 다시 불러오는 것과 동일..

   서버에서 다 처리하기 때문에 과부화가 걸릴 수 있음

   동적으로 처리하는 JS 를 다 받지 못했다면 클릭시 이동이 안될 수 있음. (공백기간이 생김..)

 

TTV (Time To View),

TTI (Time To Interact)

 

7. SSG (Static Site Generation)

SSR와 CSR 중 하나만을 선택해서 사용해야 하는가? 굳이 그런 것은 아니다. SSG로 서로의 단점을 줄여줄 수 있다.

 

React + Gatsby

리액트(일반적으로 CSR)로 만든 앱을 Gatsby로 정적으로 웹페이지를 미리 생성해두고 서버에 배포해둘 수 있다. 이렇게 만들어 두면 CSR의 단점을 최소화 할 수 있게 된다. 또한 정적 사이트에 JS 파일을 가지고 있을 수 있어 동적인 이벤트도 해결할 수 있다.

React + NEXT.js

Next.js는 SSR를 지원하는 라이브러리이다. Next의 장점은 리액트로 SSR를 작성할 수 있다는 것이고, SSG 또한 지원해서 SSR의 장점과 CSR의 장점을 동시에 누리며 활용할 수 있다.