[Network] AJAX, SSR, CSR, SSG

1. AJAX (Asynchronous Javascript And XMLHttpRequest)

JavaScript, DOM, Fetch, XMLHttpRequest, HTML 등의 기술을 사용하는 웹 개발 기법

웹 페이지에서 필요한 데이터만 비동기적으로 받아와 유저의 요구에 따라 변화해야 하는 부분만 렌더링한다.

1-1. AJAX를 구성하는 핵심 기술

• Fetch

  • 이전에 사용하던 XHR(XMLHttpRequest)의 단점을 보완한 새로운 Web API로 XML보다 가볍고 간편하며 promise를 지원하고 javascript와 호환되는 JSON을 사용한다.
  • 페이지 이동 없이 서버로부터 필요한 데이터를 받아온다.
  • 브라우저는 Fetch가 서버에 요청을 보내고 응답을 받을 때까지 멈추지 않고 다른 동작들을 비동기적으로 수행한다.

• Javascript와 DOM

  • Fetch를 통해 필요한 데이터를 가져와 javascript를 통해 DOM을 조작해 필요한 부분만 변경한다.

1-2. AJAX의 장단점

• 장점

  • 서버에서 HTML을 완성하여 보내주지 않아도 필요한 데이터만 비동기적으로 받아와 화면의 일부만 업데이트하며 웹페이지를 렌더링 할 수 있다.
  • 브라우저에 상관 없이 적용할 수 있다.
  • 필요한 일부분만 렌더링 할 수 있어 더 많고 빠른 상호작용이 가능한 유저 중심 어플리케이션을 개발할 수 있다.
  • 필요한 데이터만 JSON 등의 텍스트 형태로 보내기 때문에 대역폭(네트워크 통신 한 번에 보낼 수 있는 데이터 크기)이 작다.

• 단점

  • 브라우저가 처음 받는 HTML 파일에는 데이터를 채우기 위한 틀만 작성된 경우가 많아 SEO(Search Engine Optimization)에 불리하다.
  • AJAX에서는 이전 상태를 기억하지 않기 때문에 뒤로가기 구현이 불가능하다. 뒤로가기 구현을 위해서는 별도의 History API가 필요하다.

2. SSR vs CSR

2-1. SSR (Server Side Rendering)

브라우저가 서버의 URI로 GET 요청을 보내면 서버에서 웹페이지를 브라우저로 보내기 전에 서버에서 완전히 렌더링한다. 데이터베이스의 데이터가 필요한 경우, 서버가 데이터베이스의 데이터를 불러와 완전히 렌더링 된 페이지로 변환한 후에 브라우저에 응답으로 보낸다.

사용자가 브라우저의 다른 경로로 이동할 때마다 서버는 이 작업을 반복한다.

2-2. CSR (Client Side Rendering)

브라우저가 서버로 요청을 보내면 서버는 웹 페이지의 골격이 될 단일 페이지와 JS만을 클라이언트에게 보내준다. 데이터베이스의 데이터가 필요한 경우, 브라우저가 데이터베이스에 저장된 데이터를 가져와서 웹 페이지에 렌더랭해야 한다. 이 과정은 API 요청으로 이루어진다.

사용자가 브라우저의 다른 경로로 이동할 때에도 서버는 웹 페이지를 다시 보내지 않는다. 브라우저는 맨 처음 서버로부터 받은 웹페이지 파일과 동일한 파일 위에서 페이지를 재 렌더링한다.

2-3. SSR vs CSR

• Use SSR

  • SEO가 우선순위인 경우
  • 첫 화면 렌더링이 빠르게 필요한 경우, 단일 파일의 용량이 작은 SSR이 적합
  • 사용자와 상호작용이 적은 경우

• Use CSR

  • SEO가 우선순위가 아닌 경우
  • 사용자와 상호작용이 풍부한 경우, 빠른 라우팅으로 강력한 사용자 경험 제공
  • 웹 앱 제작시 더 좋은 사용자 경험 제공