웹 애플리케이션을 위한 렌더링 패턴 10가지

웹 애플리케이션은 콘텐츠를 표시하고 사용자와 상호 작용하기 위해 다양한 렌더링 패턴을 활용합니다. 정적 웹사이트는 기본적인 미리 렌더링된 HTML 파일로, 빠르지만 상호 작용성이 부족합니다. 싱글 페이지 애플리케이션(SPA)은 페이지 새로 고침 없이 DOM을 업데이트하여 높은 상호 작용성을 제공하지만, 느릴 수 있고 SEO에 어려움이 있을 수 있습니다. 서버 사이드 렌더링(SSR)은 더 빠른 초기 로드 시간과 향상된 SEO를 위해 서버에서 HTML을 동적으로 생성합니다. 정적 사이트 생성(SSG)은 JAMStack 사이트에 이상적인 템플릿을 사용하여 페이지를 미리 렌더링합니다. 점진적 정적 재생성(ISR)은 미리 생성된 페이지를 주기적으로 업데이트하여 SSG와 SSR을 결합합니다. 하이드레이션은 미리 렌더링된 HTML을 상호 작용적인 SPA로 변환하여 초기 로드 지연을 유발할 수 있습니다. 부분 하이드레이션은 더 나은 효율성을 위해 페이지의 상호 작용적인 부분만 하이드레이트합니다. 아일랜드는 성능 향상을 위해 애플리케이션의 독립적인 부분을 개별적으로 렌더링합니다. 스트리밍 SSR은 HTML이 사용 가능해짐에 따라 클라이언트에 전송하여 인지 속도를 향상시킵니다. Qwik이 개척한 재개성(Resumability)은 모든 것을 HTML로 직렬화하고 JavaScript를 지연 로드하여 하이드레이션을 제거합니다.