Astro Verticals <span class='bg-gradient-to-l from-exdstBrightRed to-exdstRed rounded-full text-white text-2xl lg:text-5xl uppercase font-bold lg:px-12 px-5 py-1 lg:py-5 lg:top-0 lg:-right-4 lg:absolute'>Demo</span> Website Case Study

Astro Verticals Demo Website Case Study

Astro
Demo
Astro
Demo
Astro
Demo
Astro
Demo
Astro
Demo
Astro
Demo
Astro
Demo
Astro
Demo
Astro
Demo
Astro
Demo
Astro
Demo
Astro
Demo
Astro
Demo
Astro
Demo
Astro
Demo
Astro
Demo
Astro
Demo
Astro
Demo
Astro
Demo
Astro
Demo
Astro
Demo
Astro
Demo
Astro
Demo
Astro
Demo
Astro
Demo
Astro
Demo
Astro
Demo
Astro
Demo
Astro
Demo
Astro
Demo
Motivation

Motivation

Astro is faster. Astro is more performant. Astro is more satisfying to work with. Astro is the future!

We built JSS Astro SDK for Sitecore to help businesses unlock the full potential of modern headless solutions.

And what better way to prove its power than the website used for the official Sitecore Demo?

Feature Parity
Feature

Astro is feature-parity to Next.js

Astro JSS is functionally equivalent to Next.js JSS. Everything built with Sitecore on Next.js JSS can be built on Astro. However, you can build the same website on Astro faster. And this website will be more performant.

In addition, you will get awesome Astro features: Islands, Zero JS by default, UI agnostics, and Server-first.

Astro vs Next.js Features Comparison

Feature
Static Site Generation
Server Side Rendering
Incremental Static Regeneration
Multisite
Multilanguage
Vercel hosting
Netlify hosting
Sitecore XM/XP support
XM Cloud support
XM Demo Portal support
React
Vue.js
Angular
Astro
Middleware
Dynamic Placeholders
Rendering Variants
Partial Designs
Column/Row Splitters
Sitecore CDP Integration
Images Optimization

Process

Astro supports React components, allowing us to start our demo Astro website in less than a week. We then rebuilt each component in Astro while adding middleware and Demo Portal support. Automated testing confirmed the results, and we ran a final performance comparison.

1

Development

Anyone familiar with HTML, JavaScript, and CSS will can start development in Astro in a few hours. The less complex code means faster development speed and lower implementation and maintenance costs.

2

Testing process

We used automated testing for quality assurance. Backstop.js enabled pixel-perfect screenshot comparisons with the original Next.js website.

3
65FCP+2LCP+1TBT+30CLS+24SI+7Next.js
80FCP+7LCP+9TBT+30CLS+24SI+10Astro

Performance

Astro's implementation is significantly faster than Next.js, delivering an average improvement of two seconds in First Contentful Paint(FCP) and three seconds Largest Contentful Paint(LCP), resulting in a 15-point increase in the Lighthouse score.

4
Astro
Demo
Astro
Demo
Astro
Demo
Astro
Demo
Astro
Demo
Astro
Demo
Astro
Demo
Astro
Demo
Astro
Demo
Astro
Demo
Astro
Demo
Astro
Demo
Astro
Demo
Astro
Demo
Astro
Demo

Table with Scores

Criteria
Next.js
Astro
Difference
First Contentful Paint (FCP), score
1.96
7.14
+5.18
First Contentful Paint (FCP), ms
4297
2384
-1913
Large Contenful Paint (LCP), score
1.3
8.56
+7.26
Large Contenful Paint (LCP), ms
7846
4807
-3039
Speed Index (SI), score
7.3
9.72
+2.42
Total Blocking Time (TBT), score
29.72
30
+0.28
Cumulative Layout Shift (CLS), score
24.35
24.32
-0.03
Total, score
64.66
79.78
+15.12

Astro's First Contentful Paint (FCP) is approximately two seconds faster than Next.js, while its average Largest Contentful Paint (LCP) improves by about three seconds. Every Astro page in the test demonstrated better performance. The general trend shows that the more complex the page, the greater the performance boost when switching to Astro.

Lighthouse performance score increase per page

Cost

Implementing your Sitecore website on Astro helps reduce costs, both during development and ongoing maintenance, thanks to its simplicity. However, the biggest advantage is improved website speed, which leads to higher conversion rates.

Conclusion

We've developed an open-source Astro SDK for Sitecore, enabling the creation of faster, high-performance websites. To validate its production readiness, we rebuilt the official Sitecore Demo using Astro. The ability to replicate the same functionality confirms feature parity, while improved Lighthouse scores demonstrate Astro’s superior performance. Additionally, our development experience revealed that working with Astro components is simpler compared to React.

By switching to Astro, businesses can improve site performance, reduce infrastructure costs, and accelerate development cycles - resulting in higher customer engagement and lower Total Cost of Ownership (TCO).

Try Astro for yourself! Deploy the Verticals Astro Demo on the Sitecore Demo Portal or locally, explore the code on GitHub, and make an informed decision about using the right tools for your Sitecore website. Or contact us for more information and assistance in making the decision.

Contact us for development on Astro!

contact us