(번역) Why everyone is talking about Astro and island Architecture? 🚀

원문 링크:  https://dev.to/foxy17/why-everyone-is-talking-about-astro-and-island-architecture-1762

덧붙임을 위한 참고: https://docs.astro.build/en/concepts/why-astro/

 

Astro

• React, Vue, Svelt, Solid.js의 구성요소를 직접 사용할 수 있다.
• JavaScript를 서버 언어 및 런타임으로 사용한다
• 자체 .astro UI 언어가 내장되어있다.
• 기본적으로 브라우저에 0개의 javascript를 제공한다.
  • 서버에 HTML을 렌더링하고 사용되지 않은 자바스크립트를 제거한다. 이렇게 하면 사이트 상호작용 시간이 줄어들어, 웹 로드 시간이 빨라진다.
• 각 경로가 정적 HTML과 CSS만 있는 다른 HTML 페이지라는 것을 의미하는 MPA를 렌더링한다.
  • 자바스크립트가 필요하다면, Partial Hydration이라는 기술을 통해 수행된다.
  • 브라우저에서 실행하려는 구성요소에 대해서만 Javascript를 명시적으로 보낸다.
  • 정적 사이트의 다른 부분들을 중단하지 않고 필요한 필요한 구성 요소만 hydrate 할 수 있다.
• 클라이언트 측 렌더링보다 서버 측 렌더링을 최대한 활용한다.
  • 이는 PHP, WordPress, Laravel, Ruby on Rails 등의 기존 서버 측 프레임워크가 수십 년 동안 사용해 온 것과 동일한 접근 방식이다.

 

Next.js

• React 위에 구축된, static site generation을 위한 framework
• MPA와 SPA를 모두 구축하는 데 사용할 수 있다.
• JS 기반 상호작용이 필요하지 않은 정적으로 생성된 Next.js 사이트를 로드하더라도, 네트워크 탭에서 브라우저가 프레임워크에 필요한 많은 JS를 로드한다.
  • suspense와 lazy loading을 사용하여 최소화 할 수 있다고 하지만, 나중에라도 여전히 로딩된다.
  • 페이지가 바뀔 때 마다 자바스크립트가 로드되는 SPA를 만들기 때문에 자바스크립트가 필요하다.
• SSG 프레임워크는 전체 웹 사이트의 클라이언트측 렌더링이 필요하며 주로 성능 문제를 해결하기 위해 서버측 렌더링을 포함한다.

 

SPA vs MPA

SPA

• SPA 모델에는 이점이 있지만, 그러나 이는 추가적인 복잡성과 성능 절충을 희생해야 한다.
  • TTI와 같은 중요한 메트릭을 포함하여 페이지 성능에 해를 끼친다.
• SPA는 페이지에서 HTML을 렌더링하기 위해 브라우저에서 전체 JavaScript 애플리케이션을 다운로드, 구문 분석 및 실행해야한다.
• 많은 웹 프레임워크에서 개발 중에는 멋지게 보이는 웹 사이트를 쉽게 구축할 수 있지만 배포된 후에는 로드 속도가 매우 느리다. 사용자 휴대폰과 저전력 장치는 개발자 노트북의 속도와 거의 일치하지 않기 때문에 JavaScript가 종종 범인이 된다.
• 대부분의 HTML은 브라우저에서 JavaScript를 실행하여 로컬로 렌더링된다. 이는 사이트 동작, 성능 및 SEO에 큰 영향을 미친다.
• 라우터는 브라우저에서 로컬로 실행되며 서버에 도달하지 않고 새 페이지를 렌더링하기 위해 탐색을 하이재킹한다.
• 페이지 렌더링에 대해 많은 부분을 제어하기 때문에 페이지 탐색에서 보다 강력한 전환을 제공할 수 있다.
• 전체 웹 사이트를 단일 JavaScript 응용 프로그램으로 실행하기 때문에 응용 프로그램이 여러 페이지에서 상태와 메모리를 유지할 수 있다.

MPA

• 대부분 서버에서 렌더링되는 여러 HTML 페이지로 구성된 웹 사이트
• 새 페이지로 이동할 때 브라우저는 서버에서 HTML의 새 페이지를 요청한다.
• SPA보다 빠른 로딩을 제공하지만, 향후 페이지 탐색은 SPA의 장점을 얻을 수 없다.
• MPA에서 서버에 대한 모든 요청은 응답할 HTML을 결정하므로 라우팅 논리는 서버에 상주한다.
• SPA와 비슷한 경험을 제공하기 위해, 브라우저에서 탐색을 제어하여 클라이언트 라우팅을 모방하는 Hotwire의 Turbo 와 같은 도구를 활용한다.
  • HTML은 여전히 서버에서 렌더링되지만 Turbo는 이제 SPA의 클라이언트 라우팅과 유사한 페이지 간 원활한 전환을 표시할 수 있다.
• MPA는 탐색을 위해 표준 <a>요소를 사용한다. 기본적으로 포커스 상태 관리 및 경로 변경 알림과 같은 중요한 접근성 기능을 제공합니다.

 

어디에 적합할까..

• Astro는 콘텐츠 중심 웹사이트의 사용 사례에 가장 적합하기 때문에 MPA의 성능과 단순성을 우선시한다.
• 상호 작용이 많은 웹 사이트는 SPA가 제공하는 앱과 유사한 아키텍처에서 첫 로드 성능을 희생하여 더 많은 이점을 얻을 수 있다.