AJAX

Asynchronous JavaScript And XMLHttpRequest의 약자
JavaScript, DOM, Fetch, XMLHttpRequest, HTML 등의 다양한 기술을 사용하는 웹 개발 기법

웹페이지에서 필요한 부분에 필요한 데이터만 비동기적으로 받아와 화면에 띄울 수 있음

AJAX 핵심 기술

• JS, DOM
• Fetch

전통 웹 애플리케이션의 경우 <form> 태그를 이용해 서버에 데이터를 전송해야했고
요청이 있을 때마다 새로운 웹 페이지를 제공해야했음

현재 Fetch를 사용, 페이지 이동없이 서버로부터 필요한 데이터를 받아온다
JS로 DOM을 조작해 Fetch를 통해 받아온 데이터를 반영한다

장점

• 서버에서 HTML을 완성하여 보내주지 않아도 웹페이지를 만들 수 있습니다.
  완성된 HTML만 렌더링 가능했지만 AJAX를 사용해 비동기적으로 가져온 데이터를 화면 일부만 업데이트하여 렌더링이 가능합니다
• 표준화된 방법
  브라우저에 상관없이 AJAX를 사용할 수 있음
• 유저 중심 애플리케이션 개발
  필요한 부분만 렌더링하니 때문에 더 많은 상호작용 가능
• 더 작은 대역폭
  대역폭 : 네트워크 통신 한 번에 보낼 수 있는 데이터의 크기

단점

• Search Engine Optimization(SEO)에 불리
• 뒤로가기 버튼 문제

SSR과 CSR

SSR

SSR은 Server Side Rendering의 줄임말
웹 페이지를 브라우저에서 렌더링하는 대신에 서버에서 렌더링

• SEO(Search Engine Optimization) 가 우선순위인 경우, 일반적으로 SSR(Server Side Rendering) 을 사용합니다.
• 웹 페이지의 첫 화면 렌더링이 빠르게 필요한 경우, 단일 파일의 용량이 작은 SSR 이 적합합니다.
• 웹 페이지가 사용자와 상호작용이 적은 경우, SSR 을 활용할 수 있습니다.

CSR

CSR은 Client Side Rendering

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

https://www.youtube.com/watch?v=iZ9csAfU5Os&ab_channel=%EB%93%9C%EB%A6%BC%EC%BD%94%EB%94%A9