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

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