SPA
SPA란 single page apllication의 약자로 하나의 페이지로 구성된 어플리케이션을 의미한다.
가장 많이 사용하고 즐겨 사용하는 React는 기본적으로 SPA에 속한다.
SPA는 처음 요청을 보냈을 때 필요한 모든 스크립트를 다운로드 하여 라우터를 통해 자연스러운 이동을 나타낸다.
이렇게 SPA 개념을 바탕으로 하나의 앱에서 여러개의 페이지를 보여주는 CSR client side rendering이 나타났다.
CSR - Client Side Rendering
CSR은 최초에 서버에서 전체의 페이지를 로딩해서 보여주고 이후에 사용자의 요청에 따라서 변경 사항을 반영하여 리렌더링 해주는 방식이다. 
위 그림과 같이 HTML 요청을 받으면 필요한 JAVASCRIPT 파일을 다운로드하고 해당 파일에 있는 API를 실행시키며 서버와 통신하여 데이터를 받아와 화면에 렌더링해준다.
동작 과정
1. user가 웹사이트에 요청을 날린다.
2. CDN이 Html과 JS에 연결할 수 있는 링크를 클라이언트로 보낸다.
3. 클라이언트는 링크를 따라 Html과 JS를 다운로드 받고 실행한다.
4. 서버에서 API 호출을 하고 데이터를 받는다.
5. API 결과 데이터를 바인딩하고 화면을 렌더링한다.
장점
때문에 번들링 된 모든 파일들은 정적 파일이므로 CDN을 통해 사용자에게 제공해주기 때문에 자연스러운 페이지 전환을 장점으로 가져 갈 수 있다.
단점
하지만 컴포넌트가 그려지면서 API 통신을 하기 때문에 초기 페이지 로딩이 오래걸린다는 문제점이 있다. 또한 모든 스크립트를 다운로드 받기 전에는 빈 HTML 파일을 받아오기 때문에 크롤러가 무슨 정보를 가지고 있는 사이트인지 모르기 때문에 검색 엔진 최적화 (SEO)에 취약하다는 문제점을 가지고 있다.
언제 사용하면 좋을까?
유저의 개인 정보로 이루어진 페이지와 같이 개인 정보를 관리하는 기능을 담당하는 페이지처럼 검색 엔진 노출이 필요가 없는 경우에 적합하다. 유저와 상호작용이 많을때 사용하면 좋다.
SSR - Server Side Rendering
SSR은 웹 페이지를 서버측에서 렌더링하는 방식이다. 사용자가 웹페이지에 접근하면 서버에서 페이지에 대한 요청을 받고 html,view와 같은 리소스들을 해석하고 렌더링하여 사용자에게 전달해준다.
서버에서 웹 페이지를 브라우저에 보내주기 전에 서버에서 완전히 렌더링을 마치고 보내기 때문에 SSR이라고 불린다.
동작 과정
1. user가 웹사이트에 방문한다.
2. 브라우저는 서버에 콘텐츠를 요청한다.
3. 서버는 렌더링을 마친 Html과 JS를 브라우저에 전달한다.
4. 화면에 렌더링한다.
장점
검색 엔진 최적화 (SEO)에 유리하다. SSR을 이용하여서 미리 빌드된 페이지를 받아와서 나타내주면 크롤러는 많은 정보를 받을 수 있기 때문이다. 그리고 CSR에 비해 첫 로딩 속도가 빠르다.
단점
페이지가 이동하거나 요청을 할때마다 새로고침이 되기 때문에 사용자 경험이 떨어질 수 있고 요청이 많으면 서버에 부담이 간다. CSR 같은 경우에는 페이지 이동시 고정되어 있는 헤더나 푸터를 제외하고 변화한 컨텐츠만 업데이트해서 가져와서 부드러운 화면 전환을 보여주지만 SSR은 전체 파일을 한번에 가져오기 때문에 느려진다.
언제 사용하면 좋을까?
홈페이지로 상위 노출이 필요하고 규칙적인 업데이트가 필요한 사이트인 경우 사용하면 좋다. 예를 들면 매주 업데이트와 새로운 공지 사항을 올려줘야 하는 게임 홈페이지를 예로 들 수 있을 것 같다.
SSG - Static Site Generation
SSR은 요청이 들어오면 서버에서 요청 받은 시점에 파일을 만들고 브라우저에 보내주지만 SSG는 페이지들을 서버에 미리 다 만들어 놓고 요청이 들어오면 응답해주는 형식이다. 그렇기에 정적인 사이트를 만들때 유용하다.
장점
검색 엔진 최적화 (SEO)에 매우 유리하고 렌더링 속도가 빠르다.
언제 사용하면 좋을까?
홈페이지로 상위 노출이 필요하고 규칙적인 업데이트가 필요 없는 사이트에 적합하다.
