Sitecore Astro Verticals Demo Website: Feature Comparison with Next.js

We built the demo website with the Astro framework. We used the official Sitecore Next.js demo as a reference. The website looks the same and feels the same. Let’s go through the Next.js and Astro features and compare them side by side. We will compare both Next.js and Astro as well as JSS SDKs for Next.js and Astro.

Field Types

Both frameworks support all Sitecore fields and have samples for all fields: Checkbox, Data, File, Link, Number, Singleline Text, Multiline Text, and RichText. The difference is only with image fields.

Image Fields

There are two approaches to images inside Sitecore headless projects. You can rely on the optimization into CMS or DAM and provide images to the headless parts that are already optimized. Or you do the optimization on the framework side.

If you don’t do optimization in the headless part then images in Next.js and Astro will work the same. React Image component will provide you with img tag that contains a link to the image in the case of Next.js. Astro Image component will provide the same output for img as React Image.

If you do optimization on headless part the result will be very similar, but not the same. Images will be optimized by the serverless functions on the hosting side. The logic differs, but under the hood, both optimization Astro and Next.js use sharp npm package. It means that the result should be very similar.

Placeholders and Dynamic Placeholders

Placeholders are an essential feature of Sitecore. And both Next.js and Astro support it.

Static Site Generation

Both Next.js and Astro support Static Side Generation out of the box. However, there will be differences in how images are handled. Astro will optimize images as part of the build process. Next.js will not optimize images by default. It will create a serverless function. Once you deploy the static Next.js site to Vercel, you will be surprised. Even if the website is static, your image optimization is not static. You need to meet the Image Optimization limits included in your plan.

Btw, if you want to shrink the costs of image optimization for your “static” Next.js Vercel website, check out our article on how to make a website fully static.

That is why, my choice of SSG is Astro. You don’t need to worry about hosting limits on image optimizations.

Server Side Rendering

Next.js includes Server Side Rendering(SSR) inside the library. However, the implementation will differ for different hosting. SSR on Node.js, Vercel, Netlify, Azure, AWS, etc. will use a different code. Astro doesn’t include SSR as part of the main library. If logic will be different from one hosting to another then there is no point to make it part of the framework. It is Astro's hosting-agnostic philosophy. If something is the feature of hosting then it should not be part of the framework. Astro has adapters for all popular hosting. You need to install an additional npm package for the hosting of your choice and configure it.

Incremental Static Regeneration

Next.js supports Incremental Static Regeneration(ISR) out of the box. But, again, this out-of-the-box support is the support for Node.js. Each hosting will implement Next.js ISR differently.

Astro uses a hosting-agnostic approach again. ISR is supported for Vercel and Netlify adapters.

The Sitecore Verticals demo is deployed to Vercel and uses ISR. You can deploy the Next.js version side by side with the Astro version. And you will not notice any difference.

Middleware

Middleware similar to SSR and ISR is the hosting feature. For example, Vercel middleware is different from Netlify or Node.js middleware. Next.js incorporates it inside the main library. And Astro has separate adapters for each hosting.

Multisite

Next.js JSS framework includes multisite as part of the npm package. It has a plugin for it. We decided not to include a multisite plugin inside Astro JSS. We follow the same philosophy for Astro JSS and leave it hosting agnostics. However, we included multisite middleware to Astro Demo, where we know that it will be hosted locally on Docker, and on Vercel in the case of Sitecore Demo Portal. The whole multisite middleware requires only 70 lines of code.

Multilanguage

I like the Sitecore approach for translations. The content is translated on the server side and is provided as part of the layout service output. The elements of the interface are translated as part of the dictionary. You get the list of key-value pairs and use them in your code via the internationalization wrapper. Both Next.js and Astro use the same approach here.

Hosting

Both Next.js and Astro have good support for the most popular hosting. Usually you host Sitecore websites on Vercel, Netlify, and Node.js server.

Next.js is supported by hostings themselves(excluding Node.js). It is due to Next.js is backed by Vercel. And they want to have some advantage when they release new Next.js features.

Astro is supported by the Astro community. They provide open-source adapters for all popular website hostings.

XM/XP Support

Sitecore did the real decoupling of the backend from the frontend. If you follow the same approach for your framework and if use the same API then the result is the same. Next.js JSS is officially supported by Sitecore. Astro is community-driven and supported by the community.

XM Cloud Support

The same is true for XM Cloud. If you follow the same architecture and use the same API then you can use any framework. Next.js supports XM Cloud officially by Sitecore. Astro has community-driven support.

Open Source

Next.js is open source. Astro is open source. Sitecore Next.js JSS is open source. Sitecore Astro JSS is open source. Both demo websites are also open source. The only thing that is not open source: is Next.js Vercel hosting parts. Vercel want to have the advantage when they release new features for Next.js. That is why they keep in secret how these things are working on Vercel. But that is not a big issue. You don’t need the latest Next.js features for Sitecore. Sitecore JSS Next.js doesn’t even support Next.js App Router.

React

Next.js is the React meta-framework. You can use only React components in your Next.js website. Astro allows you to use React components in your website if you need them. But Astro gives you many other options.

Vue, Angular, Astro

Next.js doesn’t support any frameworks except React. Astro uses .astro components by default. But Astro is not limited to the usage of Astro components. You can use React, Vue.js, Angular, Preact, Solid.js, Svelte, and others. Astro JSS has support for Vue JSS, Angular JSS, and React JSS. You can even use all of them on the same website. But, of course, there is no point in doing it.

Experience Editor

All Experience Editor capabilities are supported by both Next.js JSS and Astro JSS.

Sitecore XM Cloud Pages

All page builder features are supported by both Next.js and Astro JSS. Sitecore recently added a lot of new features. They added the ability to edit any content item fields included in a component. And also you can edit all content fields that are associated with the page itself.

All these features became available immediately for Astro as well. No changes in the Astro JSS framework were required. It proves robust XM Cloud support by Astro JSS.

Column and Row Splitters

The splitters are just an approach to how you want to organize your grid on your website. Both Next.js and Astro websites contain samples showing how it could be implemented.

SXA features: Partial Design, Rendering Variants

You can use these SXA features on both Next.js and Astro. Rendering variants for Astro differ a little bit. You place each rendering variant into a separate file in the case of Astro. You place all React variants into the same file in the case of Next.js. But the outcome is the same.

Conclusion

As you can see, Astro JSS supports all essential Next.js JSS features. You don’t have any limitations to build your website with Astro. And if nothing stops you from building with Astro, why you haven’t tried it yet? You will get a more performant website with lower development effort.

P.S. If some feature is not on the list, it doesn’t mean that Astro doesn’t support it. And it doesn’t mean that we hide something intentionally. We listed features that are used for the Verticals Demo website. If you have a question about support of something that is not described here, please let us know. We will be glad to answer.