웹 앱을 위한 10가지 렌더링 패턴

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

웹 개발자, 프론트엔드 개발자, 백엔드 개발자

핵심 요약

• 정적 사이트는 빠르고 가볍지만, 상호작용이 부족하다.
• SSR은 동적 콘텐츠를 제공하지만, 초기 로딩 속도는 SSG보다 느릴 수 있다.
• Qwik 프레임워크는 Resumability을 통해 Hydration 없이 빠른 초기 로딩을 가능하게 한다.

섹션별 세부 요약

1. 정적 사이트

• HTML, CSS, JavaScript 파일을 미리 렌더링하여 제공.
• 모든 페이지가 별도의 파일로 구성되어 있음.
• 상호작용 및 동적 콘텐츠 부족.

2. 단일 페이지 애플리케이션(SPA)

• 하나의 HTML 파일로 처음 로딩되고, 이후 DOM 업데이트로 페이지 전환.
• 사용자 경험 향상 가능.
• SEO 최적화가 어려움.

3. 서버사이드 렌더링(SSR)

• 서버에서 HTML을 동적으로 생성하여 제공.
• SSG보다 동적 콘텐츠 제공 가능.
• 초기 로딩 속도는 느릴 수 있음.

4. 정적 사이트 생성(SSG)

• 모든 페이지를 미리 생성하여 제공.
• 템플릿 엔진과 데이터 소스를 사용하여 동적 콘텐츠 포함 가능.
• JAMStack 사이트로도 불림.

5. 점진적 정적 재생성(ISR)

• SSG와 SSR의 중간 형태로, 캐시가 만료되면 데이터를 업데이트.
• 사용자가 새로운 콘텐츠를 즉시 볼 수 있음.

6. 하이드레이션(Hydration)

• 서버에서 제공된 HTML을 클라이언트에서 JavaScript로 실행하여 SPA로 전환.
• 초기 로딩 시 앱이 멈춘 듯한 느낌을 줄 수 있음.

7. 부분 하이드레이션(Partial Hydration)

• 전체 페이지가 아닌, 상호작용이 필요한 부분만 하이드레이션.
• 대규모 페이지의 성능 향상.

8. 섬(Islands)

• 웹 애플리케이션의 독립적인 부분으로, 클라이언트에서 병합 가능.
• 변경된 부분만 재렌더링하여 효율성 향상.

9. 스트리밍 SSR(Streaming SSR)

• 서버가 HTML을 생성하는 즉시 클라이언트에 전송.
• 느린 네트워크 환경에서도 사용자 경험 개선.
• Next.js 13의 app 디렉토리에서 지원됨.

10. Resumability

• Qwik 프레임워크가 도입한 새로운 렌더링 패러다임.
• HTML에 JavaScript 이벤트 리스너를 직렬화하여 초기 로딩 시 하이드레이션 없이 제공.
• JavaScript는 필요 시에만 로딩.

결론

• 각 렌더링 패턴의 장단점을 고려하여 선택해야 하며, SSG와 SSR은 성능과 SEO 최적화에 유리함.
• Qwik 프레임워크는 Resumability을 통해 하이드레이션 없이 초기 로딩 성능을 극대화할 수 있음.