렌더링이란?
Next.js로 블로그를 만들다 보니, 렌더링 방식에 대해서 지식이 부족하다는 것을 깨닫고,
깊게 알아보고자 포스팅하게 되었습니다. 먼저 렌더링이란 무엇일까요?
서버로부터 요청 받은 내용을 브라우저 화면에 그리는 것
따라서 렌더링이란 표시해줄 화면을 어디서 어떻게 그리는지에 따라 개념을 구분할 수 있습니다.
CSR (Client-Side-Rendering)
클라이언트 사이드 렌더링은 화면을 클라이언트에서 처리하는 것으로,
사용자가 요청할 때마다 리소스를 서버에서 제공받아 렌더링하는 방식입니다.
<body>
<div id="root"></div>
<script src="app.js"></script>
</body>처음에 body가 텅 비어있으므로 빈화면만 보이게되고 링크된 자바스크립트를 다운받아 동적으로 화면을 구성하게 됩니다.
따라서 SEO에 불리하게 됩니다. 리액트와 같은 SPA은 CSR 방식으로 화면을 렌더링하고 있습니다.
- ✨장점
- 새로고침 없이 빠르게 동적인 화면을 보여줄 수 있다.
- 맨 처음 렌더링 이후, 요청이 필요 없어 서버의 부담이 적다.
- ✨단점
- SEO에 불리하다.
- 초기 로딩시간이 길다.
SSR (Server-Side-Rendering)
서버 사이드 렌더링은 서버에서 내용을 다 그려서 브라우저에게 전달해주는 것을 말합니다.
웹 사이트에 접속하면 서버에서 HTML 파일을 만든 후, 만들어진 HTML 파일을 동적으로 제어할 수 있는 소스코드와 함께 클라이언트에게 전달해줍니다. 따라서 body에 모든 내용이 담겨져 있기 때문에 SEO에 유리하며, 페이지 로딩이 빨라집니다.
하지만 서버의 부담이 커지게 됩니다.
- ✨장점
- SEO에 유리하다.
- 사용자에게 빠르게 화면을 보여줄 수 있다.
- ✨단점
- 서버의 부담이 크다.
- 사용자 이벤트가 있을때마다 blinking issue가 있다.
SSG (Static-Site-Generation)
정적 사이트 생성은 빌드 시점에 페이지를 생성해두는 것을 말합니다.
SSG를 사용하면 서버가 항상 HTML을 모두 만들 필요가 없기 때문에 미리 생성해둔 HTML 파일을 전달만 하면 되는 것입니다. 따라서 사전에 만들어 놓은 페이지를 CDN에 제공해 둠으로써 사용자가 웹 사이트를 더 빨리 로드할 수 있습니다.
SSR의 단점이었던 서버의 과부하를 덜 수는 있지만 정적으로 파일을 생성해두기때문에 빌드를 새로하지 않는 이상 데이터가 변경되어도 반영되지 않습니다.
하지만 SSR은 항상 서버가 페이지를 만들어주기 때문에 최신의 데이터를 반영하여 파일을 생성하게 됩니다.
- ✨장점
- 서버의 부담을 덜 수 있다.
- 사용자에게 빠르게 화면을 보여줄 수 있다.
- ✨단점
- 새로운 데이터 반영이 어렵다.
ISR (Incremental Static Regeneration)
ISR은 SSG가 변동된 데이터를 반영하지 못한다는 단점을 보완해줍니다.
next.js에서는 revalidate라는 옵션을 통해서 지정된 시간을 정하고, 시간이 지나지 않았다면 미리 만들어두었던 정적 파일을 제공합니다. 시간이 지난 후에도 새롭게 정적 파일을 만들어 제공하게 됩니다.
따라서 새로운 데이터가 반영된 정적 파일을 제공할 수 있습니다.
