Ajax에 대해서 (비동기적인 웹페이지 구성)

Ajax(Asynchronous JavaScript and XML)를 사용한 웹페이지를 방문했을 때, 웹페이지가 새로운 데이터로 갱신되었다면 필요한 부분에 필요한 데이터만 비동기적으로 받아와 렌더링 된다.

Ajax는 자바스크립트와 DOM, 그리고 Fetch라는 핵심 기술로 구성된다.

과거 웹페이지는 form 태그를 통해 서버에 데이터를 전달하고 서버는 요청에 대한 응답으로 새로운 웹페이지를 제공해야 했다.
(즉, 매번 새로운 웹페이지(HTML)를 제공했다.)

하지만, 자바스크립트를 통해 DOM을 제어할 수 있고, Fetch를 통해서 사용자가 웹페이지에서 작업하는 동안 서버와 통신할 수 있게 됨으로써, 필요한 부분만 변경할 수 있게 되었다.

Ajax 기술의 발전으로, 서버와 데이터 통신을 원활하게 할 수 있게 되었고 이는 SPA(Single Page Application)를 등장시켰다.

🥥 Fetch가 등장하기 전에는 XHR(XMLHttpRequest)를 사용했었는데, Fetch는 XHR의 단점을 보완한 Web API로 더 가볍고, Promise 객체를 지원하며, 자바스크립트와 호환되는 JSON을 사용한다.
🍚 그 외에도 추가적인 기능을 제공하는 Axios, got, ky, superagent와 같은 라이브러리도 존재한다.

Ajax의 장단점

장점

• 서버에서 HTML을 완성해 보내주지 않아도 웹페이지를 만들 수 있다.
• 과거에는 데이터가 변할 때 마다 서버에서 완성된 HTML받아 렌더링했어야 했다.
  때문에 많은 데이터를 가져와야 해서 더 큰 대역폭이 필요했는데, Ajax의 사용으로 JSON이나 XML등의 텍스트 형태 데이터만 보내면 되기에 서버에 요청하는 데이터의 크기가 작아졌다.
• 데이터를 비동기적으로 가져와 브라우저에서 필요한 일부분만 렌더링하기에 더 빠르고 더 많은 상호작용이 있는 어플리케이션을 만들 수 있게 되었다.
• XHR의 표준화 이후 어떤 브라우저를 쓰던 AJAX를 쓸 수 있게 되었다.

단점

• SEO(Search Engine Optimization)에 불리하다.
  검색 사이트가 본 Ajax가 사용된 웹 어플리케이션의 HTML은 HTML의 틀만 있고 내부에 데이터가 비어있을 수 있기 때문이다.
• Ajax는 이전 상태를 기억하지 않기 때문에 뒤로가기 버튼이 사용자의 의도대로 작동하지 않을 수 있다.
  따라서 뒤로가기 등의 기능을 구현하기 위해서 History API를 추가적으로 사용해야 할 수 있다.

SSR과 CSR

• SSR : server side rendering
• CSR : client side rendering
  만약, 검색 기능이 우선시 된다면, SSR 방식으로 웹페이지를 구현하는 것이 좋다.

대표적인 SSR 웹사이트를 개발할 수 있는 프레임워크로 NextJs가 있다.

과거에 서버에서 HTML 파일을 통신받던 방식이 SSR이다.

🍭 서버에서 HTML 방식으로 웹사이트에 접근하면, 클라이언트와 서버의 도메인이 항상 일치하게 되므로, 이 경우에는 CORS 에러가 발생하지 않는다.

🍭 즉, CORS 에러는 SPA 방식의 등장에 따라 다른 도메인의 서버에 Ajax 요청을 하는 경우가 발생하여 자주 유발된다.