[CS] 브라우저의 작동 원리 Day-38

SPA를 만드는 기술 (AJAX)

AJAX 란?

웹 페이지에 필요한 데이터만 비동기적으로 받아와 화면에 그려낼 수 있습니다.

(Asynchronous JavaScript And XMLHttpRequest의 약자로 JavaScript, DOM, Fetch, XMLHttpRequest, HTML 등 다양한 기술을 사용하는 웹 개발 기법입니다.)

AJAX의 두가지 핵심 기술

핵심 기술은 JavaScript, DOM, Fetch 입니다.

전통적인 웹 어플리케이션에서는 요청에 대한 응답으로 새로운 웹 페이지를 제공해주고 매번 새로운 페이지로 이동해야 했습니다.

Fetch를 사용하면, 페이지를 이동하지 않아도 서버로부터 필요한 데이터를 받아올 수 있습니다. Fetch가 서버에 요청을 보내고 응답을 받을 때 까지 모든 동작을 멈추는 것이 아니라 계속해서 페이지를 사용할 수 있게 하는 비동기적인 방식을 사용합니다.

Fetch를 통해 전체 페이지가 아닌 필요한 데이터만 가져와 DOM에 적용시켜 새로운 페이지로 이동하지 않고 기존 페이지에서 필요한 부분만 변경할 수 있습니다.

XHR과 Fetch

Fetch는 XHR의 단점을 보완한 새로운 웹API이며, XML보다 가볍고 JavaScript와 호환되는 JSON을 사용합니다. 따라서 오늘날 Fetch를 더 많이 사용합니다.
(Fetch 이전에는 XHR를 사용했습니다.)

ex) Fetch 사용법

fetch('http://kakao.gg/messages')
	.then(function(response){
    	return response.json();
    })
    .then(function(json){
    	...
});

AJAX 장,단점

AJAX 장점

• 서버에서 HTML을 완성하여 보내주지 않아도 웹페이지를 만들 수 있습니다. AJAX를 사용하면 서버에서 완성된 HTML을 보내주지 않아도 필요한 데이터를 비동기적으로 가져와 브라우저에서 화면의 일부만 업데이트 하여 렌더링 할 수 있습니다.

• AJAX를 사용하면 필요한 일부분만 렌더링하기 때문에 빠르고 더 많은 상호작용이 가능한 어플리케이션을 만들 수 있습니다.

AJAX 단점

• SEO 불리 (AJAX 방식은 비동기적으로 데이터를 가져와 사이트 정보를 긁어가기 어렵습니다.)

SSR

Server Side Rendering의 줄임말입니다.
웹 페이지를 브라우저에서 렌더링하는 대신 서버에서 렌더링합니다. 브라우저가 서버의 URI로 GET 요청을 보내면 서버는 정해진 웹 페이지 파일을 브라우저로 전송합니다. 서버에서 완전 렌더링 해 보내기 때문에 브라우저에서 렌더링 할 필요가 없습니다.

CSR

Client Side Rendering의 줄임말입니다.
클라이언트에서 페이지를 렌더링합니다. 브라우저의 요청을 서버로 보내면 서버는 웹 페이지를 렌더링하는 대신, 단일 페이지를 클라이언트에 보냅니다. 이때 서버는 웹페이지와 함께 JavaScript 파일을 보냅니다. 클라이언트가 웹 페이지를 받으면 렌더링합니다.

정리

SEO가 우선 순위인 경우 SSR, 사용자와 상호 작용이 풍부한 경우 CSR을 적용하는 것이 좋습니다. CSR을 이용할 때 사용자가 더 풍부한 경험을 할 수 있습니다.