What is Astro?
Astro is a framework for building websites with “islands” of interactivity. It shines when used for content-heavy websites (marketing sites, documentation sites, or eCommerce sites) like the Firebase blog, but can be used for building applications.
What is Next?
Next.js is a framework for building websites and applications with React.js. It really shines when building interactive applications like TikTok, but it can be used for content-heavy websites, like marketing sites, documentation sites, or eCommerce sites.
How do they compare?
Comparison of Astro & Next
|
Feature
|
Astro | Next |
|---|---|---|
|
Static Site Generation
Allows you to build static pages perfect for performant, content-heavy websites |
|
|
|
Incremental Static Site Generation
Allows you to build static pages on the server when they change. Perfect for performant, content-heavy websites where content is created and curated by end-users. |
|
|
|
Server-side rendering
Allows you to build pages on the server. Perfect for features that require sessions. |
|
|
|
Client-side rendering
Allows you to build UI that's only rendered in the browser. Perfect for features that take a long time to load or require browser-specific functionality. |
|
|
|
Server-only pages
Allows you to build pages generated entirely on the server. This is critical for creating performant, SEO-friendly websites. |
|
|
|
Content management
Allows authoring of content-driven pages without using a content management system. |
|
|
|
Single page application
Allows authoring of an interactive experience, like a mobile app, where the UI updates without a page reload |
|
|
|
Multi page application
Allows authoring of an traditional multi-page web experience, like a documentation site |
|
|
|
Data fetching
Allows fetching data from third-party sources to generate pages or add interactive components. |
|
|
|
API Routes
Allows designing RESTful APIs and GraphQL APIs without the need of a separate server |
|
|
|
Image optimisation
Allows optimizing high-resolution images to be sized visually and physically for the design of a page on-demand, with a simple developer API |
|
|
|
Framework
|
Astro | Next |
|
HTML
Allows you to write "vanilla" HTML, CSS, and Javascript |
|
|
|
React.js
Allows you to build interactive functionality, like animated elements, forms, and more |
|
|
|
Vue.js
Allows you to build interactive functionality, like animated elements, forms, and more |
|
|
|
Svelte
Allows you to build interactive functionality, like animated elements, forms, and more |
|
|
|
Solid.js
Allows you to build interactive functionality, like animated elements, forms, and more |
|
|
|
Alpine.js
Allows you to build interactive functionality, like animated elements, forms, and more |
|
|
When would we choose Astro?
We choose Astro when we’re building websites, full-stop. While Next is capable of building websites, Astro is purpose-built for the task.
When working with other development teams, we can pull in their existing UI components and allow them to be compiled to HTML and CSS at build time, allowing for on-brand designs that those teams feel confident maintaining, but offering the best in house Lighthouse scores, performance, and ensure the website is technically up to chops with accessibility and SEO.
We’re building a website with more than a few pages
While Next allows us to build highly interactive websites, it comes with a serious cost for page performance and SEO: it can ship fair bit of Javascript.
Even though Next offers server-only React components, they’re new and they require us to structure our code in a way that makes it less reusable.
Astro on the other hand ensures all of our code is re-usable, and can be made interactive when the design calls for it, shipping the least amount of Javascript possible and allowing our pages to stay fast and performant.
When SEO is a priority for our client
When SEO is a priority (and it should be for any public-facing website), page performance, the time it takes for the server to render the page HTML, CSS, and Javascript, and the time it takes the page to load all images, CSS, and Javascript is paramount. We aim for all over our client’s public-facing pages to load in less than 1000 milliseconds (1 second).
Astro allows us to do this with almost zero effort, either by pre-rendering pages that are quick to generate at build time, or enabling server-side rendering when the user attempts to load the page. We can render complex UI components on the server and dictate which components ship Javascript to the page for interactivity on a per-component basis with the Astro islands feature.
This allows us to hit our performance and SEO goals every single time.
When would we choose Next?
We use Next to build web applications and desktop applications. The power Next offers to build highly interactive applications using the industry standard of React is unparalleled.
When the client needs a real web application
When we say “real web application”, we mean an app that does CRUD (Create, Read, Update, Delete) actions on every page. Think of apps like TikTok, Instagram, or developer services like Sentry, DataDog, etc.
Next.js provides a rich API of features for making extremely performant, high-quality web applications, and provides a user experience that can feel like a native desktop or mobile application when executed well.
Sprinkling in a few public-facing pages
When the client only needs a dozen or so public-facing pages, such as login pages, terms of service, privacy policies, etc, server components allow us to ship server-rendered HTML and CSS to the client that hits our performance goals.
Then, with client components we can sprinkle in the interactivity we need without shipping all of the Javascript for the application.
What are Astro’s best features?
Astro islands
For a long time, when building a website you had to choose between using a heavy framework for building web applications, like Next, to get highly interactive content and maintainable code, a full-stack CMS or static site generator that only supported server-rendered HTML, or building something extremely custom.
None of these options lead to a great experience for developers. Astro islands allow you to get the server-rendered, simple setup of a full-stack CMS or static site generator, and sprinkle in the Javascript necessary to render highly interactive UI components. As they say, it’s the “best of both worlds”.
Not only that, islands allow you to build these interactive UI components with pretty much all of the major UI frameworks, so no matter what your development teams preference is, you can build beautiful, interactive, and performant websites by using Astro and Astro islands.
Hybrid rendering
Astro supports a few ways of generating web pages:
Pre-rendering: generating the HTML, CSS, and Javascript for one or many pages when you’re deploying your website to your hosting provider, or;
Server-side rendering: generating the HTML, CSS, and Javascript for one or many pages when a user requests the page
Client-side rendering: generating the HTML for a given piece of UI with Javascript using the user’s browser
The best part is you can use both in the same site, allowing you to deliver the best solution for the page.
Pre-rendering is great for content that doesn’t change often, such as marketing pages, pricing pages, and documentation.
Server-rendering is great for content that does change often, such as user-generated content or features that are user-specific, like a cart in an eCommerce site.
Client-side rendering is great for offloading expensive UI work to after the page has loaded, with a loading state while the necessary data is being requested, to offer a very performant and responsive experience to your users. Think of how content “lazily loads” in social media sites like Facebook and Instagram as you scroll.
Learn more about pre-rendering server-side rendering, and client-side rendering
Content Collections
Astro allows you to pre-render or server-side render pages that are generated using content stored in Git, using a feature called content collections.
Static site generators have allowed this for a long time, which offers a phenemenal developer experience. Astro takes it up a level by making this API “type-safe” — meaning you can define which data your content should have, and ensure the site won’t build and deploy if someone makes a mistake. This creates an editorial experience for technical content writers and developers that has only been available when using a content management system.
You can use the following to author type-safe content:
HTML
Markdown
MDX
YAML/TOML/JSON
Anything you can import with a Vite plugin
It’s just so great.
What are Next’s best features?
Single Page application
Next lets you build single page applications, either client-side rendered, or server-side rendered using HTML streams.
This allows you to create a user experience on the web indistinguishable from a native desktop app or mobile app — an experience with a page refresh — with ease.
Users have come to expect the polish and quality of native apps from every application they use, so this makes Next extremely useful for building high-quality web applications.
The two features they offer best-in-class support for this are:
Hybrid Rendering
Like Astro, Next also supports a few ways of rendering pages:
Pre-rendering: generating the HTML, CSS, and Javascript for one or many pages when you’re deploying your website to your hosting provider, or;
Server-side rendering: generating the HTML, CSS, and Javascript for one or many pages when a user requests the page
Client-side rendering: generating the HTML for a given piece of UI with Javascript using the user’s browser
The best part is you can all of them in the same application, allowing you to deliver the best solution for the page.
Pre-rendering is great for content that doesn’t change often, such as marketing pages, pricing pages, and documentation.
Server-rendering is great for content that does change often, such as user-generated content or features that are user-specific, like a cart in an eCommerce site.
Client-side rendering is great for offloading expensive UI work to after the page has loaded, with a loading state while the necessary data is being requested, to offer a very performant and responsive experience to your users. Think of how content “lazily loads” in social media sites like Facebook and Instagram as you scroll.
Learn more in the documentation
Incremental Static Regeneration (ISR)
A feature Next beats Astro on is Incremental Static Regeneration (ISR). ISR allows you to pre-render pages at build time, but re-render them on the server when the content changes, giving you the best of both worlds.
This is phenemal for getting changes to content to your users as soon as possible, like when you update the copy for a part of your web application in your CMS.
In Conclusion
We love Astro, and we love Next. When we build websites, we use Astro (this website is an Astro site). When we build web applications, we use Next (unless the client doesn’t like React 😳).
This isn’t an either or argument, it’s all about choosing the best tool for the job at hand.