개발하는데 다 이유가 있겠지

사실 TIL을 처음 써 보는거라 어떤 내용을 작성해야 할지는 모르겠다.

글을 잘 쓰는 편이 아니라 매일 조금이라도 뭐가 됐던 작성을 해야 실력이 늘것같다.

---

Rendering(렌더링)

개발자가 작성한 코드를 웹 브라우저를 통해 사용자가 상호작용을 할 수 있는 인테페이스로 표현하는 과정

어떠한 방법으로 렌더링 하는지에 따라 웹페이지 반응 속도에 영향을 주고 사용자 경험에 큰 영향을 줌

렌더링 방식 : CSR(클라이언트 사이드 렌더링), SSR(서버 사이드 렌더링), SSG(스태틱 사이트 제너레이션)

 

CSR(클라이언트 사이드 렌더링)

1. 사용자 웹페이지 주소로 접속하면 서버가 실제 웹페이지의 콘테츠가 아닌, 그 콘텐츠가 렌더링 될 껍데기만 보냄(ex. html..)
2. 먼저 껍데기만 렌더링한 뒤, Javascript를 활용해 동적으로 콘텐츠를 렌더링 함(필요한 데이터 서버에 추가로 요청할 수 있음)

서버가 빈 껍데기와 Js를 응답으로 주면, Js가 모두 다운로드 되고 실행될 때 까지 유저는 의미없는 콘테츠 또는 로딩 인디케이터만 보게됨
Js번들 사이즈가 클수록 수행속도가 느려짐

 

장점 : 서버로부터 초기 전송되는 페이지의 속도가 빠름
단점 : 페이지를 구성하기 위한 데이터를 클라이언트에서 서버측으로 추가로 요청하여 재구성해야 되기 때문에 페이지 구성 완료시점이 느림
예시 : React, Vue, Angular 등 UI 라이브러리

SSR(서버 사이드 렌더링)

1. 사용자가 웹페이지에 접속하면, 서버가 웹페이지의 모든 콘텐츠를 포함한 HTML 문서를 생성해 응답을 보냄
2. 브라우저에서는 HTML을 표시해 사용자가 빠르게 콘텐츠를 볼 수 있게 함
3. 동시에 Js를 다운로드받아 실행해 웹페이지가 실행되도록 함

서버에서 컨텐츠를 포함한 HTML문서를 응답했지 떄문에 CSR과 다르게 유저는 Js가 로드되기 전에도 의미있는 콘텐츠를 볼 수 있음
Js가 모두 로드되고 실행되기 전까지는 웹페이지와 상호작용은 불가(하지만 사용자 입장에서는 빈 화면을 보는 것보다는 웹페이지가 빠르게 응답하고 있다는 느낌을 줌)

 

장점 : Js가 모두 다운로드되고 실행되기 전에도 모든 콘텐츠를 볼 수 있음(상호작용 불가)
단점 : 서버에서 데이터를 처리해 렌더링 한 후 응답을 보내기 때문에 첫 응답까지 걸리는 시간이 CSR보다 늦음
예시 : React, Vue, Angular / Next.js, Nuxt.js 등