22/12월 TIL (Q.서버사이드 렌더링이 무엇인가요?)

Server Side Rendering은 서버에서 모든 데이터를 작성해서 클라이언트로 전송 -> 클라이언트는 해당 데이터를 웹사이트에 표시하는 방법의 웹 통신 방법입니다. 라고 하면 좀 관념적이니까

 

=>서버에서 페이지 내용을 다 그려서 브라우저로(클라이언트) 던져준다 고 생각하자.

장점으로는 HTML에 모든 내용이 담겨있어 효율적인 SEO(검색최적화)가 가능하고.

웹 사이트에 접속하면 서버에서 내용을 다 그려서 브라우저로 주니까 속도는 빠른데 HTML 파일만 가져온 상태고 자바스크립트는 다운받는데 시간이 조금 더 걸리게된다. 그래서 화면이 보여지는 시간(TimeToView)과 동작 시간(TimeToInteract) 이 달라 사용자가 버튼 같은거 클릭하면 작동 안하는 등 안좋은 사용자 경험이 있을 수 있다.

또, 랜더링의 많은 과정이 서버 사이드에서 일어나기 때문에 사용자가 많을 수록 서버 부담이 커진다.

 

렌더링 방법의 등장 순서

HTML을 이용한 웹이 시작되고 앵커 태그 <a href ="URL"/> 를 이용한 통신은 기본적으로 아래 과정을 거치는 정적 static sites 이었다. (서버와 클라이언트가 HTML파일을 주고받아 매번 페이지 전체가 새로고침됨.)

근데 쓰다보니까 새로고침이 사용자에게 많이 거슬려서 CSR -> SSR -> SSG이 나오게 됐다.

(CSR 개발을 위한 라이브러리로는 React, 프레임워크로는 Angular, Vue.js 등이 있다.)

(SSG 대표 라이브러리는 Gatsby, NEXT.js)

프로젝트에 SSR을 도입하려면 TTV와 TTI의 시간차이를 줄이기 위해 어떻게 할지 새로고침을 조금더 매끄럽게해서 더 나은사용자 경험을 하는데에 고민하는 것이 좋을듯하다.

 

추가

 React는 CSR에 최적화 되어있지만 Gatsby 라이브러리와 함께 사용하면 정적으로 웹페이지를 미리 생성해두고 서버에 배포할 수 있다. 이 웹사이트는 정적으로 보이지만, 추가적으로 서버에서 데이터를 받거나 동적으로 처리해야 하는 로직은 자바스크립트 파일을 함께 가지고 있을 수 있어서 동적인 요소도 충분히 추가 가능하다.

NEXT.js는 강력한 SSR을 지원하는 라이브러리였는데, 요즘에는 CSR과 SSR을 섞어서 목적에 맞게 사용할 수 있다.

 

 

 

12/15 

춥다  Winter is coming.. 아침부터 눈와서 마음이 꺾일뻔했다 스터디 카페에 도착하니 젖은 신발이 바닥을 검은 진흙으로 물들였다. 뭐 그것도 잠시고 커피마시면서 책좀 읽으니까 금방 평온해졌다. 1984 보고있는데 재미가 쏠쏠하다. '공산주의 멸망편'으로 과장스러운 장면도 많지만 과거 공산주의나 지금의 중국 북한과 크게 다르지 않은 생각도 들어 지금 커피마시면서 독서 할 수 있는 사실이 감사하게 느껴졌다.

연말이라 송년회 약속이 이것저것 잡혀있다. 간만에 얼굴 보느라 좋기는 한데 한편으론 좀 부담스럽다. 빨리 취업해야지