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 최적화와 페이지 성능 향상을 위해 사용 가능하며, 인증된 콘텐츠 표시나 지역별 정보 제공 등에 유리한 패턴