✨ CSR (Client-side Rendering)

클라이언트 브라우저에서 JavaScript를 사용하여 동적으로 페이지를 렌더링하는 방식

🟢 장점

• 클라이언트 측에서 동적으로 콘텐츠를 렌더링하고 업데이트하므로, 빠른 인터렉션 구현이 가능함
• 브라우저 내에서 렌더링되기 때문에 클라이언트에서 동적으로 상호 작용할 수 있는 기능을 사용할 수 있음

🔴 단점

• 초기에 검색 엔진이 페이지의 컨텐츠를 크롤링하지 못할 수 있어 SEO에 영향을 줄 수 있음
• JavaScript 파일을 다운로드하고 실행하는 시간이 소요되어 초기로딩 속도가 SSR에 비해서 느림

✨ SSR (Server-side Rendering)

서버에서 초기에 페이지를 완전히 렌더링하여 클라이언트에 전달하는 방식

🟢 장점

• 서버에서 페이지를 완전히 렌더링하므로 검색 엔진이 페이지 컨텐츠를 수집하기 용이
• 서버에서 렌더링되어 클라이언트에 이미 완성된 페이지를 전달하므로 초기 로딩이 빠름

🔴 단점

• 모든 요청마다 서버에서 페이지를 렌더링해야 하므로 서버 부하가 증가
• 클라이언트에서 추가적인 동적 상호 작용이 필요한 경우, 추가적인 네트워크 요청이 필요하므로 사용자 경험이 제한될 수 있음

✨ SSG (Static Site Generation)

미리 페이지를 정적 파일(HTML 파일)로 생성하고 CDN에 캐싱하여 서버에 리퀘스트가 들어오면 이미 만들어진 HTML 파일을 읽어서 리스폰스로 보내 제공하는 방식

🟢 장점

• 미리 페이지를 렌더링하여 정적 파일로 저장하므로 초기 로딩이 매우 빠름
• 정적 파일을 CDN에 캐싱하여 전 세계의 사용자에게 빠르게 서비스할 수 있으며, 서버 부하가 낮아짐

🔴 단점

• 사용자에게 항상 최신 정보를 제공하기 어려우며, 변경된 데이터를 반영하려면 재빌드가 필요
• 동적인 기능이 필요한 경우, 클라이언트에서 추가적인 API 호출이 필요하며, 사용자 상호 작용이 제한될 수 있음