Sitecore Astro Verticals Demo Website: The Process
We released the public Sitecore JavaScript Software Development Kit for Astro more than one year ago. It doesn’t become very popular for now. One of the possible reasons is the absence of proof that it is ready for usage. Yes, it has a sample page with all Sitecore editing use cases: fields, images, edit frames, and placeholders. Yes, that sample page shows better performance than Next.js. Yes, that page has less code compared to Next.js. But that is only one page. Will Astro scale for a big project?
We decided to make a bigger Astro demo. There was an option to take some of Sitecore Demo projects as a basis or write our own. We decided to use the existing Sitecore Demo for a few reasons. It will require to write less code. It will give us the ability to compare one to one each page and one to one each component.
Stage 0: Project Selection
Sitecore made a great decision when they published their demo projects to be open source. It allows you to learn from their code. It allows you to prepare your own custom demo. It allows you to teach your AI model on the Sitecore demo code.
Sitecore has a bunch of Demo projects. All of them have different purposes. We consider only JSS projects to avoid additional work. There are two of them Play Summit and Verticals. Both look decent and fit our needs. But we decided to stop on the recent one: Verticals. We predict that Verticals will have a longer life than Play Summit based on recent Sitecore Github activities. And we want to have a longer life for our Astro demo as well.
It is designed to work with XM Cloud and Sitecore Demo Portal. Wouldn't be awesome if we were able to run our Astro demo on XM Cloud and Sitecore Demo Portal in the same way as the Next.js demo?
Stage 1: Astro with React Components
Next.js is React meta-framework. It works only with React. Astro works with Astro components. But it also works with React, Vue, and Angular (and many others) UI frameworks. In the first stage, we can leave all React components as is and create only a page layout based on Astro.
And it was done very quickly. After less than 1 week of work of 1 developer, who had no previous experience with Astro, we got the Verticals Astro demo website that was running on React components.
Stage 2: Astro on Astro Components
There are almost no benefits from Astro, if we have only layout running on Astro and all components are React-based. The performance will be about the same as Next.js. The amount of code will be the same. The complexity will be the same. And also, it doesn’t prove our initial goal: showing how Astro JSS works with bigger projects.
98% of Verticals Demo website content is static content. There are just a few user interactions where you can get benefits from the usage of rich UI frameworks like React. This means that 98% of React code could be replaced with Astro code. Astro code will be faster. Astro code will be cleaner. It will be easier to support Astro code. There is no need to write 100% of the website on Astro. It is still possible, but there is no need to do it, some components in this case may have more code than React components. We use proper tools for proper tasks. If a component is mainly static with a small amount of user interaction then we use Astro. If a component has some rich user interaction then we can leave React for it.
We took components one by one and migrated them from .tsx to .astro format. The Astro JSS SDK was missing a few things that we needed, e.g. dynamic placeholders. We extended Astro JSS SDK to provide essential parts as part of SDK and not as part of the demo.
Verticals website uses .scss for styling. It makes styling of Astro components straightforward. We need to make sure that HTML elements have the same classes.
Stage 3: Sitecore Demo Portal, XM Cloud and Vercel
You can run the Verticals demo either locally or on the Sitecore Demo Portal. Sitecore Demo Portal uses XM Cloud to host the Sitecore Verticals Demo project. Sitecore Demo Portal uses Vercel to host the website itself. We know, that we can run Astro on Vercel. And we know that we can run Astro on XM Cloud. But the tricky part is that the Sitecore Demo Portal is a black box. We know about CI/CD only by logs. And don’t know the details. That is why, it took a bunch of attempts and quite a while of time. But, finally, we managed to run the Astro website on Sitecore Demo Portal. The Sitecore Demo Team helped us a lot. They added the ability to view logs. It speeded up the progress. We got more information and it became much more easy to troubleshoot. Also, they added the ability to set up environment variables. It was essential because previously Next.js was hardcoded as a framework. We needed to reconfigure the Vercel project manually for each new Astro Demo. Special thanks to Alexander Doroshenko!
Vercel deployment was straightforward. We decided to use the same rendering mode as it is used on Verticals Next.js Demo: Incremental Static Regeneration(ISR). It will allow us to compare websites in the same conditions.
Stage 4: Middleware: Multisite and Multilanguage
Verticals demo has three websites: Basic, Financial, and Services. Websites are configured to use different domains. Next.js has a multisite plugin to configure it. This plugin is based on middleware. We will use the same approach for Astro. Middleware defines a website by hostname and passes it to the webpage. Pretty straightforward.
The basic website is almost empty. The financial website contains 100 pages in 3 languages. The services website contains 44 pages in 3 languages. Languages are the first segment of the path. We also used middleware to define language and pass it to the page.
Both Next.js and Astro websites will rely on the same technology under the hood: Vercel middleware. It means that no one of the frameworks will have benefits here.
Stage 5: Testing
In our case, testing could be fully automated with a small level of effort. We have an etalon website on Next.js. And we can compare the Astro website with Next.js. We can not compare HTML code because Next.js+React produce different HTML output compared to Astro. But we can compare screenshots of the Next.js+React website with the Astro website. We decided to use Backstop.js for this task. The challenging part was the presence of different animations and videos on the website.
Stage 6: Bug Fixing
We got surprisingly decent results after testing by Backstop.js. But, it is not possible to write code completely without bugs. We had some visual differences between Next.js+React and Astro. All of them were quite minor and we easily fixed them.
Stage 7: Performance Testing
When we started this project, we aimed to measure the performance difference. We used the same hosting setup. XM Cloud + Vercel, multisite on Vercel driven by Vercel middleware, ISR caching with 5 minutes revalidation. And we got great improvement! +15 Lighthouse score, but more on this later.
Conclusion
We made the open-source Sitecore Astro Demo that could be run on the Sitecore Demo portal. Feel free to try it, and evaluate it for your needs! We are waiting for your feedback and ready to help you with your Astro adventures. Choose the right tools for your tasks, decrease the time to launch, get more performant websites, and get a better conversion with the Astro web framework together with Sitecore!