AJAX
Asynchronous JavaScript And XMLHttpRequest
JavaScript, DOM, Fetch, XMLHttpReqest, HTML 등 다양한 기술을 사용하는 웹 개발 기법으로 비동기적으로 특정 데이터만 화면에 그려낼 수 있다.
핵심기술
JavaScript, DOM, Fetch
이전에는 <form> 태그를 이용하여 서버에 데이터를 요청하면, 새로운 페이지를 불러왔다. 지금은 Fetch를 통해 페이지를 이동하지 않고 데이터를 요청하고 받아오는 사이, 다른 작업을 할 수 있게 되었다. 또한 JS와 DOM을 통해 페이지를 부분적으로 수정할 수 있다.
장점
- 서버에서 HTML을 완성하지 않아도 AJAX가 필요한 데이터를 가져와 화면에 렌더링할 수 있다.
- 브라우저 상관없이 AJAX 사용 가능하다.
- 유저 중심 어플리케이션 개발에 용이하다.
- 작은 대역폭
단점
- Search Engine Optimization(SEO)에 불리하다.
AJAX로 만든 웹페이지의 경우, HTML뼈대만 있고 데이터가 없기에 정보 수집이 어렵다. - 뒤로가기 에러
AJAX에서는 이전 상태를 기억하지 않는다. 별도로 History API를 사용해야 한다.
SSR
Server Side Rendering
브라우저가 서버로 GET 요청을 보내고 -> 서버에서 웹페이지를 렌더링하여 -> 브라우저에 웹페이지를 보낸다.
- SEO(Search Engine Optimization)가 우선 순위인 경우, SSR 사용
- 첫 화면 렌더링이 빠르게 필요한 경우, SSR 적합
- 웹 페이지와 사용자의 상호작용이 적은 경우, SSR 활용
CSR
Client Side Rendering
브라우저가 서버로 GET 요청을 보내고 -> 서버에서 웹페이지, JS, 데이터 (API 활용) 등을 브라우저에 보내면 -> 브라우저가 웹페이지를 렌더링한다.
- SEO(Search Engine Optimization)가 우선 순위가 아닌 경우, CSR 사용
- 웹 페이지와 사용자의 상호작용이 있는 경우, CSR로 빠른 라우팅 사용
- 웹 애플리케이션 제작의 경우, 더 나은 사용자 경험을 제공
Log