브라우저의 작동 원리
AJAX
Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)
웹페이지에서 일부 정보가 달라졌음에도 전체 페이지를 리로드하는 것은 효율적이지 않다. Ajax는 리로드 없이 웹서버에게 정보를 요청해서 부분적으로 정보를 갱신해주는 기술이다.
Ajax를 한마디로 정의하자면 JavaScript를 사용한 비동기 통신, 클라이언트와 서버간에 데이터를 주고받는 비동기 처리 기술이라고 할 수 있다.
서버와는 다양한 형태의 데이터를 주고받을 수 있다
- JSON, XML, HTML, 텍스트 파일 등
Ajax 기술에는 XMLHttpRequest API, fetch API 등이 있다.
CSR
react는 CSR 방식으로 동작한다
유저가 처음 사이트에 들어왔을 때, 서버는 비어있는 html을 response하고, client에서 js파일을 읽어 DOM 화면을 읽어준다.
url이 바뀌어도 다시 내려받지 않고, 클라이언트에서 알아서 그린다.
- Client Side Rendering
- CSR은 브라우저(클라이언트)에서 페이지를 렌더링합니다.
- 브라우저의 요청을 서버로 보내면 서버는 웹 페이지를 렌더링하는 대신, 웹 페이지의 골격이 될 단일 페이지와 JS파일을 클라이언트에 보낸다.
- 클라이언트가 웹 페이지를 받으면, 웹 페이지와 함께 전달된 JS파일은 브라우저에서 웹 페이지를 완전히 렌더링 된 페이지로 바꾼다.
- 데이터베이스가 저장된 데이터가 필요하다면 필요한 데이터를 API요청을 한다.
- 브라우저가 다른 경로로 이동할 때, 서버가 웹 페이지를 다시 보내는 것이 아닌, 브라우저는 브라우저가 요청한 경로에 따라 페이지를 다시 렌더링한다. 이때 보이는 웹 페이지의 파일은 맨 처음 서버로부터 전달받은 웹 페이지 파일과 동일하다.
특징
- SEO 가 우선순위가 아닌 경우, CSR을 이용할 수 있다.
- 사이트에 풍부한 상호 작용이 있는 경우, CSR 은 빠른 라우팅으로 강력한 사용자 경험을 제공한다.
- 웹 애플리케이션을 제작하는 경우, CSR을 이용해 더 나은 사용자 경험(빠른 동적 렌더링 등)을 제공할 수 있다.
단점
- 모든 HTML과 static파일이 로드될 때까지 기다려야 한다.
- SEO(검색엔진 최적화) 문제가 발생할 수 있다.
(검색엔진이 크롤링을 하는데 어려움을 겪기 때문에, 구글 검색엔진은 javascript까지 크롤링을 하지만 다른 검색엔진의 경우 그렇지 않다.)
SSR
완전하게 만들어진 HTML파일을 받아오고 Rendering하게 된다.
- Server Side Rendering
- 웹 페이지를 브라우저에서 렌더링하는 대신에, 서버에서 렌더링
- 브라우저가 서버의 URI로 GET 요청을 보내면, 서버는 정해진 웹 페이지 파일을 브라우저로 전송
- 서버의 웹 페이지가 브라우저에 도착하면 완전히 렌더링된다.
- 서버에서 웹 페이지를 브라우저로 보내기 전에, 서버에서 완전히 렌더링했기 때문에 Server Side Rendering
- 웹 페이지의 내용에 데이터베이스의 데이터가 필요한 경우, 서버는 데이터베이스의 데이터를 불러온 다음 웹 페이지를 완전히 렌더링 된 페이지로 변환한 후에 브라우저에 응답으로 보낸다.
- 웹 페이지를 살펴보던 사용자가, 브라우저의 다른 경로로 이동하면, 브라우저가 다른 경로로 이동할 때마다 서버는 이 작업을 다시 수행
특징
- SEO(Search Engine Optimization) 가 우선순위인 경우, 일반적으로 SSR(Server Side Rendering) 을 사용
- 웹 페이지의 첫 화면 렌더링이 빠르게 필요한 경우에도, 단일 파일의 용량이 작은 SSR 이 적합
- 웹 페이지가 사용자와 상호작용이 적은 경우, SSR 을 활용할 수 있다.
SSR CSR 비교
start coding