HTML-first web framework Astro recently released Astro 2.0 and complements previously available static and dynamic server rendering with new hybrid rendering capabilities. Hybrid rendering allows the prerendering of specific pages for faster performance.
The Astro web framework which seeks to popularize a front-end architecture known as Island Architecture explained the motivation for hybrid rendering as follows:
For almost a year now, Astro has let you choose between static (SSG) and server (SSR) build output. Static websites offer incredible performance, yet they lack the ability to generate HTML on-demand for each request.
Astro 2.0 brings together the best of both worlds with Hybrid Rendering.
Mixing static and dynamic content together unlocks new possibilities:
- Improve render performance of popular pages
- Improve build performance of large sites
- Add an API to your existing static site
In previous versions, Astro developers had to choose between either static rendering (targeting static, content-dominated sites) or server-side rendering for all web pages. With hybrid rendering, developers can prerender specific pages or server endpoints at build time without giving up on their deployed server.
Large sites often feature sections that are suitable for pre-rendering, while other sections do require generating their content at request time. An e-commerce site may for instance benefit from pre-rendering its homepage and miscellaneous marketing-focused content while products, pricing, or discount pages may continue to be server-rendered to incorporate the latest available data. The hybrid approach may reduce the volume of computing resources required to deliver web pages, and, with that, the associated costs.
Other optimizations valuable for large sites in a Jamstack context include Incremental Static Regeneration as popularized by the application framework Next.js.
The new Astro release also includes redesigned error overlays, improves support for hot module reloading in development, and builds content with the newly released Vite 4.0.
Astro is a web framework primarily targeting optimal user experience for content-focused websites. To that purpose, Astro strives to send the minimal amount of JavaScript necessary to ensure interactive pages. For entirely static pages, no JavaScript is sent at all. Astro named the architecture it uses to achieve its aim Island Architecture. Web pages can be seen as divided into static HTML content interspersed with otherwise interactive UI components termed Astro islands. Islands render in isolation and can use any UI framework (e.g., React, Preact, Svelte, Vue, Solid, Lit).
Astro self-describes as “the all-in-one web framework designed for speed.” According to its own benchmark based on performance data measured in the wild (The Chrome User Experience Report [CrUX], The HTTP Archive, and the Core Web Vitals Technology Report), Astro often outperforms a selected set of compared web frameworks (SvelteKit, Gatsby, Remix, WordPress, Next, Nuxt).
Astro is an open-source project distributed under the MIT license. Contributions and feedback are welcome.