CSR
csr은 클라이언트 사이드 랜더링을 의미한다. 클라이언트 사이드 렌더링 이란 사용자의 요청에 따라 필요한 부분만 응답 받아 렌더링 하는 방식이다.
csr에 랜더링 과정을 보면 먼저 클라이언트에서 초기화면을 로드하기 위해 서버에 요청을 보낸다. 그럼 서버는 화면에 표시하는 데 필요한 완전한 리소스의 응답을 한다. 그런데 여기서 클라이언트 사이드 렌더링 방식이 서버사이드 렌더링 방식과 다른 점은 모든 js 파일을 다운받아 하기 때문에 초기 로딩 시간의 더 오래 걸린다는 점입니다. 즉, 모든 파일들을 다운을 받고 한 페이지 안에서 사용자가 요청하는 것을 서버에 요청하지 않고 그 폴더에서 바로 불러와서 보여준다.
csr의 장점은 속도가 빠르다. 요청을 받을 때 서버에게 요청을 보내지 않고 이미 받아온 내용을 보여주기 때문이다.
단점으로는 초기에 랜더링을 할 때 모든 파일들을 불러오기 때문에 초기의 랜더링이 느리다는 단점이 있다.
SSR
ssr은 서버에서 페이지를 만들어서 클라이언트에게 보여주는 방식이다. 기존의 웹개발에서 주로 사용되던 방식으로 브라우저에 렌더링되는 형태를 HTML문서로 만들어서 보내주는 식으로 진행이 된다. 이 방식은 요청시 새로고침을 해야하고 클라이언트 사이드 렌더링 에 비해서 처음 렌더링되어 보여주기 까지의 시간이 길다. 요청마다 새로고침이 발생하고, 한 페이지에서 보여주는 정보가 무수히 많은 웹 페이지에서는 오히려 사용자 경험을 떨어뜨리는 경우가 있어서 그런 경우 클라이언트 사이드 렌더링을 하는 경우가 있다.
ssr의 장점은 검색 엔진의 최적화가 가능하다. 크롤러가 잘 돌아간다. 초기에 html만 렌더링해서 보여주기 때문에, 초기 로딩 속도는 빠르다.
srr은 단점은 서버 트래픽을 사용한다. 과부화를 대비한 성능 최적화가 필요하다. 코드 스플리팅이나, 라우터 등의 문제로 코드가 복잡해진다.
SSG
ssg는 한 마디로 정의를 한다면 ssr과 csr를 동시의 쓸 수 있도록 하는 것이다. 물론 완벽한 건 아니다.
Static-Rendering 이라고도 하는 해당 방식은 클라이언트에서 필요한 페이지들을 사전에 미리 준비해뒀다가, 요청을 받으면 이미 완성된 파일을 단순히 반환하여 브라우저에서 뷰를 보여지게 된다.
