CSR, SSR, ISG, SSG 렌더링이란
CSR(Client Side Rendering)
비어 있는 HTML와 JS 파일만 서버가 클라이언트로 보내주고, 클라이언트(브라우저)가 JS로 DOM을 조작하여 HTML과 JS를 추가한다.
장점: 서버에 부담이 적다. 페이지 전체가 재로드 되지 않으므로 UX가 부드럽다.
단점: 첫 로드 때 시간이 오래 걸린다. JS가 비활성화 되어 있는 경우에는 웹사이트가 제대로 동작하지 않는다.
SSR(Server Side Rendering)
서버가 HTML을 최대한 렌더링한 후 브라우저로 보내주고, 클라이언트는 필요한 인터랙션 등의 JS 동작을 받은 HTML에 붙여 완성한다(hydration).
장점: 페이지 첫 로드가 빠르다. SEO 유리. JS 비활성화되어 있어도 보다 많은 콘텐츠를 제공할 수 있다.
단점: 서버에 부담이 많이 간다. 페이지 로드 시 깜빡임이 많다.
SSG(Static Site Generation)
빌드(개발자가 작성한 소스 코드(React, TypeScript 등)를 브라우저나 서버가 실제로 실행할 수 있는 형태로 변환·생성하는 과정)/배포 시점에 모든 HTML을 서버에서 렌더링해놓고, 이것을 CDN에 저장해놓은 뒤 브라우저에 제공한다. 이후 브라우저가 hydration한다. 이 점에서는 SSR과 같지만, SSR은 페이지를 요청 시마다 생성한다는 차이가 있다.
장점: 페이지 첫 로드가 가장 빠르다. SEO 유리. 서버 부담이 적다.
단점: 콘텐츠가 바뀔 때마다 빌드/배포를 다시 해야 한다.
ISR(Incremental Static Regeneration)
SSG 설명을 읽어 보면 항상 재배포를 해야 한다는 치명적인 단점이 있다는 걸 알 수 있다. 그래서 나온 게 ISR이다. ISR은 Next.js에서 개발한 렌더링 기술로, 개발자가 설정한 revalidate 시간이 지나면 유저 요청시 SSR로 새 HTML을 만들어 브라우저에게 제공해 보다 최신의 정보를 제공할 수 있다. SSG + SSR의 조합이라고 생각하면 된다.
장점: SSG처럼 빠른 속도를 유지하면서도 어느 정도 최신 정보를 제공할 수 있다. 항상 새로 빌드/배포할 필요가 없다.
단점: ISR도 실시간으로 최신 정보를 제공할 수는 없다. 몇몇 프레임워크에서만 사용할 수 있다.