콘텐츠로 이동

Ajax, CSR, SSR

처음 게시하는 TIL..

기존에는 Ajax 개념에 대해서 정확히 알고 사용하지 않았는데

어쩌다보니 궁금해서 다시 찾아보게 되었다.

Ajax..

Asynchronous Javascript and XML 으로 말 그대로 비동기 자바스크립트와 XML 이다.

과거 SSR(Server Side Rendering) 구조에서 CSR(Client Side Rendering) 로의 대 격번을 가져왔다.

이후 SPA(SinglePage Application) 프레임워크들이 인기를 끌었고.

이어서 나또한 AngularJs, VueJs 를 사용하게 되었다.

Ajax 가 CSR 이라는 개념을 가져 왔는지는 잘 모르겠다.. 공부 필요

다시 돌아가서..

Ajax 는 필요한 데이터만 웹 서버에 요청해서 받은 후 클라이언트에서 데이터에 대한 처리를 할 수 있다.

웹 서버의 응답을 처리하기 위해 자바스크립트를 사용하며, 일부의 데이터만 클라이언트에서 처리하기 때문에 애플리케이션 응답성이 좋아진다.

SSR: Server-Side Rendering

서버에서 렌더링을 작업하는 렌더링 방식, 전통적인 웹 어플리케이션 렌더링 방식으로 사용자가 웹 페이지에 접근할 때, 서버에 각각의 페이지에 대한 요청을 하며 서버에서 html, js 파일 등을 다 다운로드해서 화면에 렌더링하는 방식

장점

  • 사용자가 처음으로 컨텐츠를 볼 수 있는 시점을 앞당길 수 있음
  • 검색엔진최적화(SEO) 적용이 용이

단점

  • 모든 요청에 관해 필요한 부분만 수정하는 것이 아닌, 완전히 새페이지를 로딩하고 렌더해줌(새로고침)
  • 전체를 로딩하다보니 CSR보다 느리고, bandwitdh를 많이 쓰고, 사용자 경험 좋지 않음
    (사용자가 처음으로 컨텐츠를 볼 수는 있으나, 화면단에는 html요소들이 나오나 js파일이 다 다운로드 되지않아서 버튼이 클릭되지않는 등의 현상이 있을 수 있음)