Fresh 2가 Island Architecture와 Zero-JS 기본값으로 클라이언트 JavaScript 번들 0바이트 달성

Context

Next.js와 Remix는 기본적으로 클라이언트에 JavaScript 번들을 전송한다. 이로 인해 상호작용이 최소한인 콘텐츠 위주의 페이지에서도 불필요한 JavaScript가 로드되어 페이지 성능에 영향을 미친다.

Technical Solution

• Zero-JS 기본값 적용: 모든 Fresh 페이지를 서버에서 HTML로 렌더링하여 클라이언트에 JavaScript 번들을 전송하지 않음
• Island Architecture 도입: /islands/ 디렉토리에 위치한 컴포넌트만 클라이언트에서 하이드레이션되도록 분리
• Preact Signals 상태 관리: Interactive 컴포넌트 내에서 useSignal을 활용한 클라이언트 상태 관리
• Handlers를 통한 데이터 로딩: 라우트별로 async GET 핸들러를 정의하여 서버에서 데이터를 사전 로드하고 ctx.render()로 페이지에 전달
• Deno 런타임 기반: Node.js 대신 Deno를 사용하여 모던 JavaScript/TypeScript 지원

Key Takeaway

Island Architecture는 정적 콘텐츠와 Interactive 영역을 명확히 분리함으로써 불필요한 JavaScript 전송을 근본적으로 제거한다. 이 패턴은 콘텐츠 위주 사이트의 초기 페이지 로드 성능을 극대화하는 설계 원칙이다.