[General] AJAX,CSR,SSR,SSG

cho yunsu·2021년 8월 2일
0

동적앱이란 데이터베이스 등으로부터 정보를 받아와서 변하는 정보를 보여주는 것. 이 동적앱을 구현하기 위한 대표적인 것이 MVC모델. 다수의 MVC프레임워크가 존재함.(파이썬 장고, 자바 스프링 등..)

AJAX : XMLHttpRequest : HTML문서 전체가 아닌 JSON의 포맷으로 서버에서 "데이터"만 받아오고 자바스크립트를 통해 "동적"으로 HTML을 생성해 페이지 업데이트하는 방식. = SPA : 사용자가 한 페이지에서 머무르면서 필요한 데이터를 서버에서 받아와서 부분적으로 업데이트.

AJAX 기술과 사용자 컴퓨터 성능향상에 따라 CSR 등장.

CSR(Client-Side-Rendering) : 처음에 서버로부터 빈 HTML과 JS파일을 받아오고, 이후 받아온 JS을 이용하여 사용자의 브라우저에서 HTML을 그려냄.
단점 : 사용자가 첫 화면을 보기까지 시간이 걸릴 수 있다. 낮은 SEO(Search-Engine-Optimization)

SSR(Server-Side-Rendering) : 서버에서 HTML을 만들고 이를 동적으로 제어할 수 있는 JS파일과 함께 사용자에게 보냄.
장점 : 첫번째 페이지로딩이 빨라진다. 효율적 SEO.
단점 : blinking issue 사용자가 클릭하면 전체적 웹사이트를 서버에서 다시 받아온다. 나쁜 user experience. 서버 과부하. view와 interaction 사이 시간차가 존재함.

SSG(Static-Site-Generator) : Gatsby, NextJS 등의 라이브러리를 활용하면 CSR에 특화된 리액트로 정적으로 웹페이지를 생성하여 서버에 미리 배포해둘 수 있다. 동적요소 추가가능함. 페이지들이 많이 있기는 하지만 내용들이 변할 일은 크게 없고 동적요소들은 적은 블로그 같은 것에 활용. pre-rendering, decoupling

  • NextJS는 리액트의 SSR을 지원하기 위해 만들어졌으나 SSG 또한 지원.
profile
Growing Developer!!

0개의 댓글