Client side - Server side rendering

 

■ Client Side Rendering

1) 정의:

모든 작업을 Client side에서 수행하는 것

> React / Vue / Angular 등등 요즘 핫한 Single Page Application 의 프레임워크가 해당

 

2) 과정:

(a) 서버에서 client의 request에 의해 index html 파일 Client에 전송

(b) body 내부에 script loading script tag만 들어있음 ( 가장 추상적인 예시 )

(c) 기본적으로 빈 html이기 때문에 순간적으로 client는 빈 화면을 보여주고, app.js를 서버에 요청

    서버는 다시 app.js를 client에 보내줌

    (app.js 안에 다른 source 코드까지 모두 포함)

(d) 추가 데이터 필요시, request로 통신을 하여 최종적으로 화면을 동적으로 그려냄

---

> TTV TTI 과정, 한번에 V/I가 이루어지기 때문에, 효율적인 loading을 고민해야 함

[Time to View] / [Time to Interact]

---

3) 문제점

(a) 초기 로딩이 오래 걸릴 수 있음

 

(b) Low SEO( Search Engine Optimization)

> Parsing bot들이 세상에 존재하는 웹페이지의 index.html들을 구조를 분석하여 Search Engine에 검색력을 높여주는 데 도움을 줌(parsing한 사이트의 index를 어떤 검색어를 통해 보여줄지 등...!)

> CSR 은 body가 대부분 비어있어서 SEO가 잘 동작하지 않음, 구글/네이버 등의 검색 노출이 잘 안될 수 있다

 

---

 

■ Serverside rendering

1) 정의 :

Server 단에서 data 등을 이용, index.html과 제어용 JS를 만들고 client에 넘겨주어

대부분의 계산을 서버에서 부담하는 방식

---

> TTV TTI 과정, I 이전에 JS 파일을 가져오는 기간동안 interaction이 불가하므로, 이 time 구간을 줄이는 것이 목표

---

2) 장단점 :

(a) 장점 :

(1) initial page load가 훨씬 빠름

(2) 컨텐츠가 html에 담겨있기 때문에 SEO( Search Engine Optimization )이 잘 동작

 

(b) 단점

(1) Blinking issue, Non-rich site interations

(2) Serverside overhead → 과부화 발생할 수 있음...!

(3) html로딩은 빠른데 interation을 못하는 경우가 생길 수 있음

    ( short TTV, long TTI )

 

 

■ SSG ( Static Site Generation )

> React + Gatsby 등을 사용하여 SPA에 CSR 이더라도, 

static site를 compile하여 서버에 저장하고, preloading 시킬 수 있음

 

> React + Next.js 조합도 사용

Next.js는 원래 강력한 serverside rendering용이었음

---

■ 결론

 

> 렌더링의 과정

• Loader 가 서버로 부터 정보들을 불러옴
• 파싱을 통해 문서를 DOM 트리로 만든다.
• DOM 트리가 구축되는 동안 브라우저는 렌더 트리를 구축
• CSS 설정/레이아웃 위치 지

> 차이나는 부분

페이지 rendering을 모두 서버에서 하는 경우 : SSR

페이지 정보를 모두 건네주고, 동적으로 ServerSide OS의 클라이언트에서 rendering 하는 경우 : CSR(SPA-Single page application)

 

 

추가 참조:

https://velog.io/@ash3767/%EC%84%9C%EB%B2%84%EC%82%AC%EC%9D%B4%EB%93%9C-%EB%A0%8C%EB%8D%94%EB%A7%81-%ED%81%B4%EB%9D%BC%EC%9D%B4%EC%96%B8%ED%8A%B8-%EC%82%AC%EC%9D%B4%EB%93%9C-%EB%A0%8C%EB%8D%94%EB%A7%81

서버사이드 렌더링(ssr) & 클라이언트 사이드 렌더링(csr)

https://oneroomtable.tistory.com/entry/%EC%84%9C%EB%B2%84-%EC%82%AC%EC%9D%B4%EB%93%9C-%EB%A0%8C%EB%8D%94%EB%A7%81%EA%B3%BC-%ED%81%B4%EB%9D%BC%EC%9D%B4%EC%96%B8%ED%8A%B8-%EC%82%AC%EC%9D%B4%EB%93%9C-%EB%A0%8C%EB%8D%94%EB%A7%81%EC%9D%B4%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80%EC%9A%94

서버 사이드 렌더링과 클라이언트 사이드 렌더링이란 무엇인가요?

---

참조 :

velog.io/@haileyself/SPA-Client-Side-Rendering-%EA%B7%B8%EB%A6%AC%EA%B3%A0-Server-Side-Rendering-90k4ar8is1

SPA / Client Side Rendering 그리고 Server Side Rendering

www.youtube.com/watch?v=iZ9csAfU5Os

---