[네트워크] 브라우저의 작동 원리 2 (보이는 곳)

🔎 SPA를 만드는 기술 : AJAX

AJAX가 나오기 이전에는 페이지 전환으로 인해 필요한 부분뿐만 아니라 페이지 전체를 로딩했다.

이후 Dynamic web page가 등장하고 이는 서버와 자유롭게 통신할 수 있고, 페이지 깜빡임 없이 seamless하게 작동되었다.

또한 이것은 단순한 web page가 아닌 web app의 등장을 의미하기도 했다.

 

• 서버와 자유롭게 통신
  • XMLHttpRequest (XHR)의 등장
• 페이지 깜빡임 없이 seamless 하게 작동
  • JavaScript와 DOM 이용

이 두 가지 요소를 합쳐서 AJAX(Asynchronous JavaScript and XML)라고 부르기 시작했다.

Using XMLHttpRequest

var xhr = new XMLHttpRequest();
xhr.open('get', 'http://216.58.220.110:80/messages');

// 요청의 상태 변화를 추적한다
xhr.onreadystatechange = function() {
    if(xhr.readyState !== 4) return;
    // readyState 4: 완료
    
    if(xhr.readyState !== 200) {
    // readyState 200: 성공
    	console.log(xhr.responseText); // 서버로부터 온 응답
    } else {
    	console.log('에러:  ' + xhr.status); //요청 도중 에러 발생
	}
}

xhr.send(); // 요청 전송

Using XMLHttpRequest(Using Jquery)

$.get('http://216.58.220.110:80/messages', function(response) {
 // response: 서버로부터 온 응답
});

fetch API

fetch('http://216.58.220.110:80/messages')
    .then(response => response.json())
    .then(function(json) {
    	// json 형태로 전달받은 서버로부터의 응답)
    });

🔎 SSR과 CSR

What is SSR?

SSR은 Server Side Rendering의 줄임말로, 웹 페이지를 브라우저에서 렌더링 하는 대신에 서버에서 렌더링 하는 것을 말한다. 브라우저가 서버의 URI로 GET 요청을 보내면, 서버는 정해진 웹 페이지 파일을 브라우저에 전송한다. 그리고 서버의 웹 페이지가 브라우저에 도착하면 완전히 렌더링 된다. 서버에서 웹 페이지를 브라우저로 보내기 전에, 서버에서 완전히 렌더링 했기 때문에 SSR이라고 한다. 웹 페이지의 내용에 데이터베이스의 데이터가 필요한 경우, 서버는 데이터베이스의 데이터를 불러온 다음 웹 페이지를 완전히 렌더링 된 페이지로 변환 후에 브라우저에 응답으로 보낸다. 웹 페이지를 살펴보던 사용자가 브라우저의 다른 경로로 이동할 때마다 서버는 이 작업을 반복한다.

 

What is CSR?

CSR은 Client Side Rendering을 의미한다. 일반적으로 CSR과 SSR은 반대로 여겨진다. CSR은 클라이언트에서 페이지를 렌더링한다. 웹 개발에서 사용하는 대표적인 클라이언트는 웹 브라우저이다. 브라우저의 요청을 서버로 보내면 서버는 웹 페이지를 렌더링 하는 대신 웹 페이지의 골격이 될 단일 페이지를 클라이언트에 보낸다. 이때 서버는 웹 페이지와 함께 JavaScript 파일 보낸다. 클라이언트가 웹 페이지를 받으면 웹 페이지와 함께 전달된 JS 파일을 브라우저에서 웹 페이지를 완전히 렌더링 된 페이지로 바꾼다. 웹 페이지에 필요한 내용이 데이터베이스에 저장된 경우에는 브라우저는 데이터베이스에 저장된 데이터를 가져와서 웹 페이지 렌더링을 해야 한다. 이를 위해 API가 사용된다. 웹 페이지를 렌더링 하는 데에 필요한 데이터를 API 요청으로 해소한다. 마지막으로 브라우저가 다른 경로로 이동한다면 서버가 웹 페이지를 다시 보내지 않는다. 브라우저는 브라우저가 요청한 경로에 따라 페이지를 다시 렌더링 한다. 이때 보이는 웹 페이지의 파일은 맨 처음 서버로부터 받은 웹 페이지 파일과 동일한 파일이다.

 

Use SSR

• SEO(검색 엔진 최적화)가 우선순위인 경우, 일반적으로 SSR을 사용한다.
• 웹 페이지의 첫 화면 렌더링이 빠르게 필요한 경우, 단일 파일의 용량이 적은 SSR이 적합하다.
• 웹 페이지가 사용자와 상호작용이 적은 경우, SSR을 활용할 수 있다.

Use CSR

• SEO 가 우선순위가 아닌 경우, CSR을 사용할 수 있다.
• 사이트에 풍부한 상호 작용이 있는 경우, CSR은 빠른 라우팅으로 강력한 사용자 경험을 제공한다.
• 웹 애플리케시션을 제작하는 경우, CSR을 이용해 더 나은 사용자 경험(빠른 동적 렌더링 등)을 제공할 수 있다.