Rendering

1. rendering 이란?

✏️ 서버로부터 HTML 파일을 받아 브라우저에 뿌려주는 과정.

1. 브라우저에 www.google.com을 치면 웹 브라우저에서 url에 있는 호스트명을 추출해서 IP로 변환한다.
2. url에 포트 번호가 있다면 포트 번호를 추출한다. (기본 포트 번호는 80이다.)
3. 브라우저가 서버와 TCP 커넥션을 맺어 HTTP 요청을 보낸다.
4. 서버에서 HTTP 응답을 보낸다.
5. 커넥션이 닫히면 브라우저에서 문서를 띄우고, 유저는 문서를 확인할 수 있게 된다.

❗이 때, 서버가 어떤 문서를 전달해주는지에 따라 SSR과 CSR로 나뉜다.

1) CSR (Client side redering)

✏️ 서버에서 응답으로 받은 리소스에서 자바스크립트엔진이 HTML 파일을 생성한다. 이후 브라우저가 파일을 화면에 보여주는 방식이다. 그렇기 때문에 이 과정에서 서버는 리소스를 넘겨주는 것 이외에는 그 어떤 관여도 하지 않게 된다. 그렇기 때문에 초기에 브라우저는 아래와 같은 HTML 파일을 처음에 가지고 있다가 점차 element들을 채워나가게 된다. 브라우저가 화면을 보여주기 전까지 유저는 빈 페이지를 보게 된다. 즉, 빈 HTML을 브라우저가 채워나가는 것이다. 결론적으로 완성된 형태를 마지막에 한 번에 보여주게 된다.

2) SSR (Server side rendering)

✏️ 빈 HTML 을 브라우저가 채워나갔던 상황(CSR)과는 달리 꽉 채워진 HTML 파일을 커넥션 때 전달한다. root element가 blank가 아닌, 요소들이 채워져서 넘어오는 것이다. 그렇기 때문에 브라우저는 static page인 HTML을 렌더링하는데 시간을 쏟을 필요가 없고, interaction 을 하기 위한 자바스트립트 파일만 다운받아서 실행하면 된다.

💡 요약하자면, (CSR vs SSR)

• CSR은 (브라우저에서 HTML을 채워넣고 자바스크립트 파일을 다운받은 뒤 화면 띄움.) 완성된 형태를 마지막에 한 번에 보여주기 때문에 보여지는 시간과 인터랙션이 이루어지는 시간이 동일하지만, SSR은 (이미 완성된 HTML 페이지를 보내주기 때문에 브라우저가 화면을 바로 띄울 순 있지만 아직 자바스크립트 파일을 다운받지 않은 상태.) 보여지는 시간과 인터랙션이 이루어지는 시간 사이에 공백이 생기게 된다.

🔗🔗🔗 참고

https://www.reason-to-code.com/blog/why-do-they-ask-about-browser-rendering/