How the web works
사용자가 domain name을 검색창에 엔터 하는 순간 서버는 사용자가 요청한 화면을 전달해 주어야 한다. 이때 화면을 렌더링 하는 위치, 유저의 요청에 따른 데이터 변화로 해당 데이터가 변화된 화면을 만들어 주는 위치가 어디인지에 따라 서버 사이드 렌더링, 클라이언트 사이드 렌더링으로 나뉜다.
서버사이드 렌더링이란 서버 단에서 변화된 데이터로 화면을 미리 만들어서 완성본을 전달해 주는 것이고, 클라이언트 사이드 렌더링은 변화된 UI를 유저의 브라우저에서 만들게 한다.
Static Website
- 정적인 웹사이트로 화면에 보이는 컨텐츠 그대로 html 파일에 작성되어 있어서 서버에 저장된 html파일 그대로 브라우저에 보여진다.
Dynamic Website
- 서버에 저장된 html 파일이 그대로 브라우저에 그려지는 것이 아니라 동적으로 html 파일이 만들어진다.(ex: airbnb 사이트에서 어제 접속하고 오늘 접속할 때 마다 추천 숙소 목록이 바뀐다. 디자인은 그대로 이지만 데이터가 변경된다.)
렌더링이란?
- 요청받은 내용을 브라우저 화면에 표시하는 것
SSR(Server Side Rendering)
- 새로운 웹 페이지를 보고 싶을 때 마다 새로운 페이지 요청이 필요하며 view가 어떻게 보여질지 또한 서버에서 해석하여 보내준다.
- 서버 측에서 hmtl과 view를 생성하여 응답하는 방법
- view를 서버에서 렌더링 하여 가져오기 때문에 첫 로딩이 짧다.
- 유저가 처음으로 컨텐츠를 접하게 되는 시점을 당길 수 있고 서버와 클라이언트를 ㅏㄸ로 작성하던 코드가 하나로 합쳐지며 SEO 적용도 문제가 없지만, 사용자와 인터렉션 하는 부분에 있어서 매번 서버에 request 요청을 통해서 해결해야 하는 단점이 있고, DOM 조작에 있어서도 요청하는 과정과 엄청난 탐색 비용이 든다.
CSR(Client Side Rendering)
- client side에서 html을 반환한 후에 js 가 동작하며 테이터만을 주고 받아 클라이언트에서 렌더링을 진행한다.
- 서버에서 view를 렌더하지 않고 html을 다운 받은 다음 js 파일이나 리소스를 다운 받은 후 브라우저에서 렌더링하여 보여주기 때문에 SSR보다는 초기 로딩이 길지만 view가 보여진 시점에서 바로 interaction이 가능하다.
- 대부분의 웹 크롤러, 봇들이 js파일을 실행시키지 못하고 html에서만 콘텐츠를 수집하기 때문에 클라이언트 사이트 렌더링 되는 페이지를 빈 페이지로 인식하게 된다.
SPA(Single Page Application)
- 한번 페이지 전체를 로딩하면 그 이후에는 테이터만 변경하여 사용할 수 있는 웹 어플리케이션.
- 처음에 하나의 빈 페이지만 서버측에서 제공하고 view에 대해서는 client에서 js를 통해 렌더링 하는 방식이다.
SEO (Search Engine Optimization)
- 검색 엔진 최적화
- CSR 방식으로 이루어진 사이트는 view를 생성하는데 js가 필요하고 그 전까지는 html의 내용은 비어있기 때문에 웹 크롤러들은 내용을 알 수 없고 제대로된 데이터를 수집할 수 없다.
- SSR의 경우 초기 로딩 속도가 빠르고 SEO에 유리하지만 view 변경시 서버에서 계속 요청을 해야하므로 서버에 부담이 크다.
