사전 학습
SPA : 컴포넌트 단위로 개발하는 방법
MPA : 화면 단위로 개발하는 방법
CSR
Client Side Rendering의 약자로, 클라이언트에서 페이지를 렌더링 하는 방식을 말합니다.
HTML 파일로 배포되는 정적 웹사이트를 대상으로 렌더링하며, 주로 페이지 특성에 검색 우선 최적화(SEO)가 없는 경우 사용 합니다. 사이트에 풍부한 상호작용이 있는 경우 CSR은 빠른 라우팅으로 좋은 UX를 제공합니다.
CSR 작동방식
유저가 웹사이트를 방문하면 클라이언트는 서버에 콘텐츠를 요청하고 서버는 빈 뼈대가 있는 HTML이 연결된 JS 링크를 응답하게 됩니다.
클라이언트는 브라우저에 있는 JS를 서버로부터 받은 JS 파일로 다운로드해서 동적인 DOM을 생성하여 화면에 렌더링 합니다.
CSR 장단점
화면이 렌더링 되기 위해선 동적인 DOM이 필요한데 서버에 콘텐츠를 요청하고 서버로부터 JS 링크를 받아 브라우저에서 다운로드 하여 렌더링하므로 초기 렌더링 시간이 오래 걸린다는 단점이 있습니다.
하지만 초기 로딩 이후 페이지 일부를 변경할 때는 해당 데이터만 요청하면 되기 떄문에 이후 구동속도는 빠르다는 장점이 있습니다.
또한 서버에서 빈 뼈대의 HTML 파일을 전송하기 때문에 검색 엔진이 색인 할 만한 데이터가 없어 SEO에 불리하다는 단점이 있습니다.
또한 서버는 빈 뼈대의 HTML 링크만 넘겨주는 역할을 수행하기 때문에 서버 부하가 적다는 장점이 있습니다.
이 외에도 클라이언트에서 작용하는 연산, 라우팅 등을 직접처리 하기 때문에 반응속도도 빠르고 UX가 좋다는 장점이 있습니다.
SSR
Server Side Rendering의 약자로 서버에서 페이지를 렌더링하는 방식을 말합니다.
서버에서 요청 시 HTML을 이용해 만드는 동적 사이트를 만들기 때문에 데이터가 달라져서 페이지를 미리 만들어두기 어려운 경우 해당 렌더링 방식이 적합합니다.
SSR 작동방식
유저가 웹사이트를 방문하면, 클라이언트에서 서버로 콘텐츠를 요청하고, 서버는 렌더링 준비를 마친 HTML과 JS 파일을 응답합니다.
브라우저에서는 받은 HTML을 렌더링하고 JS 코드를 다운로드합니다. 그 다음 HTML에 JS 로직 연결합니다.
SSR 장단점
서버에서 요청에 대한 정보가 담긴 HTML 파일을 보내주기 때문에 SEO에 유리합니다.
또한 CSR과 달리 브라우저에서 js 코드 다운로드 없이 바로 렌더링하므로 초기 구동 속도가 빠릅니다.
단점으로는 초기 렌더링 시 유저와 페이지가 상호작용할 수 없습니다. 그저 내용과 스타일이 입혀진 껍데기에 불가능한 페이지에 불과합니다.
SSG
Static Site Generation의 약자로 서버에서 정적 웹사이트를 렌더링하는 방식 입니다.
그렇기 때문에 서버에서 동적 웹사이트를 렌더링하는 SSR과는 차이점이 있습니다.
