- Ajax(Asynchronous JavaScript and XML)를 사용한 웹페이지를 방문했을 때, 웹페이지가 새로운 데이터로 갱신되었다면 필요한 부분에 필요한 데이터만 비동기적으로 받아와 렌더링 된다.
- Ajax는 자바스크립트와 DOM, 그리고 Fetch라는 핵심 기술로 구성된다.
- 과거 웹페이지는 form 태그를 통해 서버에 데이터를 전달하고 서버는 요청에 대한 응답으로 새로운 웹페이지를 제공해야 했습니다.
(즉, 새로운 웹페이지를 제공했어야 했습니다.)- 하지만, 자바스크립트를 통해 DOM을 제어할 수 있고, Fetch를 통해서 사용자가 웹페이지에서 작업하는 동안 서버와 통신할 수 있게 됨으로써, 필요한 부분만 변경할 수 있게 되었다.
🥥 Fetch가 등장하기 전에는 XHR(XMLHttpRequest)를 사용했었는데, Fetch는 XHR의 단점을 보완한 Web API로 더 가볍고, Promise 객체를 지원하며, 자바스크립트와 호환되는 JSON을 사용한다.
🍚 그 외에도 Axios와 같은 라이브러리도 존재한다.
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 방식으로 웹페이지를 구현하는 것이 좋다.
🙌🙌🙌🙌