Astro Server Islands: 작동 방식과 사용 시기

Astro Server Islands: 작동 방식과 사용 시기

카테고리

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

서브카테고리

웹 개발

대상자

Astro 프레임워크를 사용하는 개발자, 웹 애플리케이션에서 정적 및 동적 콘텐츠를 혼합하여 렌더링하고자 하는 개발자

핵심 요약

  • Server Islands는 페이지의 일부만 서버에서 동적으로 렌더링하여, 전체 페이지 로딩을 방해하지 않고 부분적인 서버 렌더링을 가능하게 함
  • server:defer 지시어를 사용하여 Astro 컴포넌트에 적용하고, 서버에서 HTML을 비동기적으로 요청하여 렌더링
  • 정적 콘텐츠동적 콘텐츠를 혼합하는 데 유리하며, SEO 최적화와 성능 향상을 위해 사용 가능

섹션별 세부 요약

1. Server Islands 개요

  • Server Islands는 페이지의 일부만 서버에서 렌더링하여, 전체 페이지의 로딩 속도에 영향을 주지 않도록 설계됨
  • 정적 콘텐츠는 캐시된 HTML로 제공되고, 동적 콘텐츠는 서버에서 필요 시 렌더링됨
  • 예시: 사용자 맞춤 인사, 로그인한 사용자 정보, 지역별 콘텐츠 등

2. Server Islands vs. 전통적인 SSR

  • 전통적인 SSR은 전체 페이지가 서버에서 렌더링되어야 하므로, 데이터 로딩이 느릴 수 있음
  • Server Islands는 부분적 렌더링을 지원하여, 첫 렌더링 속도 향상동적 콘텐츠 최적화 가능

3. Server Islands의 작동 방식

  • server:defer 지시어를 사용하여 Astro 컴포넌트에 적용
  • 컴포넌트는 서버에서 HTML로 렌더링되며, 페이지 로딩 후 비동기적으로 요청됨
  • 예시 코드:

```astro

```

  • 서버에서 요청한 HTML은 페이지에 해당 위치의 플레이스홀더를 대체하여 렌더링됨

4. 클라이언트 측 실행 로직

  • replaceServerIsland 함수를 통해 서버에서 받아온 HTML을 렌더링
  • 해당 컴포넌트의 HTML을 삽입하고, 기존 스크립트는 제거
  • 사용자 환경에서 JavaScript가 활성화되어야 정상 작동

5. Server Islands 사용 제한 사항

  • Astro 컴포넌트만 지원하며, React, Vue, Svelte 등 클라이언트 컴포넌트는 직접 사용 불가
  • output: "server" 설정이 필요하며, 배포 시 Netlify, Vercel, Node 등 서버 어댑터 필요
  • JavaScript가 비활성화된 환경에서는 작동하지 않음
  • 전체적으로 동적인 페이지나, 페이지 로딩 전에 완전한 클라이언트 인터랙티브성이 필요한 컴포넌트는 적합하지 않음

결론

  • Server Islands는 정적 콘텐츠와 동적 콘텐츠를 혼합하여 렌더링하는 데 최적화된 패턴
  • server:defer 지시어를 사용하여 Astro 컴포넌트에 적용하고, 서버에서 HTML을 비동기적으로 요청하여 렌더링
  • SEO 최적화와 페이지 성능 향상을 위해 사용 가능하며, 인증된 콘텐츠 표시지역별 정보 제공 등에 유리한 패턴