<aside>

</aside>

웹 렌더링 개념

웹 개발을 시작하면서 가장 혼란스러웠던 개념 중 하나가 바로 렌더링 방식이었다. 특히 Next.js를 접하면서 CSR, SSR, SSG, ISR, SPA 같은 용어들이 한꺼번에 등장해 처음엔 무엇이 뭔지 감도 안 잡혔다. 이번 글에서는 이 핵심 개념들을 하나씩 풀어보고, 언제 어떤 방식을 쓰면 좋은지도 함께 정리해보려 한다.

1. CSR (Client-Side Rendering)

<aside>

CSR(Client-Side Rendering)은 말 그대로 클라이언트(브라우저)에서 렌더링을 담당하는 방식이다.

</aside>

출처: https://www.youtube.com/watch?v=YuqB8D6eCKE

1-1. 동작 방식

1. (브라우저) 웹사이트 방문
2. (브라우저 → 서버) 콘텐츠 요청
3. (서버 → 브라우저) 빈 뼈대의 HTML과 연결된 JS 링크 응답
4. (브라우저) JS 다운로드
5. 동적 DOM 생성

1-2. 장점

• 페이지 간 전환이 빠르다.

  초기에 필요한 모든 자바스크립트 파일을 받아온 후에 동적으로 페이지를 그리기 때문에 서버로 별다른 요청을 진행하지 않는다.

• 서버 부하가 적다.

  서버에서는 웹 페이지 렌더링을 위해 따로 준비과정 없이 빈 HTML과 JS 링크만 제공하기 때문에 서버의 부하가 크지 않다.