CSR, SSR, SSG 셋 모두 랜더링에 관한 방식이다.
CSR(Client Side Rendering): 클라이언트 측, 랜더링
SSR(Server Side Rendering): 서버 측, 랜더링
SSG(Static Site Generation): 서버 측, 만들어진 랜더링정말 간단하게 단어 풀이와 요약을 보면
어디에서 랜더링을 하느냐, 언제 랜더링을 하느냐로 3가지로 나뉜다.
좀 더 구체적으로 하나씩 알아보자
SPA & MPA
갑자기 3가지 랜더링 얘기 중 다른 단어가 나왔는데
SPA와 MPA을 알아야 3가지 랜더링 방식을 깊이 있게 알 수 있다.
☑ SPA(Single Page Applicaiton)
하나의 페이지 안에서 화면이 바뀌거나 이동하는 것
웹 어플리케이션에 필요한 모든 정적 리소스를 최초 한번에 다운로드 하고,
그 이후에 요청이 있을 때 페이지 갱신에 필요한 데이터만 받아서 페이지를 구성한다.
리소스를 다운받아 클라이언트 쪽에서 랜더링 하기 때문에 CSR 랜더링 방식이 사용된다.
장점 : 부드러운 화면 이동(화면 깜빡임 없음)
단점 : 초기 랜더링 시 필요한 리소스가 상대적으로 많아 로딩시간이 길어질 수 있다.
☑ MPA(Multi Page Application)
여러개의 페이지를 구성하여 화면이 바뀔때마다 다른 페이지를 보여주는 것
페이지 갱신이 필요 할때, 서버에 요청하여 랜더링 된 HTML을 받게 된다.
서버에서 랜더링을 하기 때문에 SSR 방식이 사용된다.
장점 : 초기 진입 시 로딩이 빠르다. 또한 SEO 검색엔진 최적화에 유리하다
단점 : 페이지 이동 혹은 새로고침 시, 전체 페이지를 다시 받아온다. (화면 깜빡임 생김)
CSR, SSR, SSG
SPA 혹은 MPA 에서 3가지 랜더링 방식이 자연스럽게 쓰이고 있는데
서로의 장점으로 단점을 보완 할 수 있다.
SPA을 구성하되 CSR을 사용하면 초기 랜더링 시간이 길어 질 수 있기에
SSR 방식으로 초기 랜더링을 하여 검색엔진 최적화(SEO)에 유리하게 하며 동시에 로딩 시간도 빠르게 할 수 있다. 그 이후 다시 CSR 방식을 사용하여 화면이 이동 될 때에 부드럽게 화면을 전환하게 만드는 방법이 있다.
만약 초기에 받아오는 데이터가 자주 바뀌는 데이터가 아니라면 SSG 방식으로 대체해도 무방할 것이라 본다.
