ChatGPT 3.5 turbo
SSG (Static Site Generation)
정적 사이트 생성은 미리 빌드된 HTML 파일을 생성하여 서버에 저장하고, 클라이언트 요청에 따라 해당 정적 파일을 제공하는 방식입니다. 정적 파일이 미리 생성되므로 서버 사이드 렌더링보다 빠른 응답 속도를 제공합니다. 주로 정적 컨텐츠가 자주 변경되지 않는 사이트에 적합합니다.
정적 사이트 생성의 특징
초기 로딩 속도가 매우 빠르며, CDN을 통한 전송으로 더욱 최적화될 수 있습니다.
컨텐츠 업데이트마다 사전에 빌드해야 하므로 업데이트에는 시간이 소요될 수 있습니다.
동적 컨텐츠의 경우 추가적인 데이터 로딩이 필요할 수 있습니다.
일반적으로 선택하는 방식은 앱의 특성에 따라 다릅니다. 정적 사이트 생성은 컨텐츠가 자주 변경되지 않는 블로그나 정보 사이트에 유용하며, 서버 사이드 렌더링은 동적인 요소가 많은 앱에 적합합니다. 최근에는 이 두 방식을 혼합한 Hybrid Approach나 Next.js와 같은 프레임워크의 기능을 사용하여 필요에 따라 동적 또는 정적 렌더링을 선택하는 방식도 자주 사용됩니다.
CRS(Client Side Rendering)
클라이언트 사이드 렌더링은 브라우저에서 초기 HTML을 렌더링하고, 그 후에 자바스크립트를 사용하여 클라이언트 측에서 동적으로 컨텐츠를 생성하는 방식입니다. 초기 로딩 속도는 빠르지만, 자바스크립트가 실행되어 컨텐츠를 렌더링하는 동안 사용자에게 빈 화면이 보일 수 있습니다.
CSR의 특징
초기 로딩 속도가 빠르며, 자바스크립트 실행으로 인한 인터랙션도 빠릅니다.
검색 엔진 최적화(SEO)에는 문제가 있을 수 있습니다. 초기 HTML에는 정적 컨텐츠만 포함되므로, 검색 엔진은 동적으로 생성되는 컨텐츠를 인식하지 못할 수 있습니다.
SSR (Server Side Rendering)
서버 사이드 렌더링은 서버에서 초기 HTML을 생성하고 이를 클라이언트로 전송하여 브라우저에서 HTML을 받아와 보여주는 방식입니다. 이로써 초기 로딩 속도를 개선하고 검색 엔진 최적화(SEO)에 유리한 페이지를 생성할 수 있습니다.
서버 사이드 렌더링의 특징
초기 로딩 속도가 빠르며, 사용자는 바로 컨텐츠를 볼 수 있습니다.
검색 엔진 크롤러가 페이지의 컨텐츠를 인식하고 인덱싱할 수 있습니다.
서버 자원이 필요하므로 서버 부하가 증가할 수 있습니다.
ISR (Incremental Static Regeneration)
증분적 정적 재생성은 정적 사이트 생성과 서버 사이드 렌더링을 결합한 개념으로, 페이지를 미리 빌드하고 필요에 따라 동적으로 업데이트할 수 있는 방식입니다. ISR은 정적 페이지를 미리 생성하되, 페이지가 사용자에게 보여질 때마다 필요한 부분만 업데이트하여 최적의 사용자 경험을 제공합니다.
ISR의 특징
초기 로딩 속도가 빠르며, 정적 페이지의 장점과 동적 업데이트의 유연함을 모두 제공합니다.
동적으로 변경될 수 있는 부분만 미리 생성하므로, 빌드 시간과 자원 소모를 최소화합니다.
정적 페이지 갱신 주기를 지정하여 일정 시간마다 페이지를 재생성할 수 있습니다.
CSR과 ISR은 각각의 장단점을 가지고 있으며, 앱의 목적과 요구 사항에 따라 선택됩니다. 최근에는 Next.js와 같은 프레임워크에서 ISR을 활용하여 블로그나 동적 컨텐츠가 포함된 페이지를 효율적으로 렌더링하는 방식이 많이 사용됩니다.
