Video: Sitecore Astro Demo Website
Anton Tishchenko presented the Astro Demo Sitecore website on Sitecore Headless Development User Group #16. He told Astro, Sitecore Astro SDK, Sitecore Demo website on Astro, and compared it with Next.js.
You can check presentation here.
Autogenerated transcription
00:40:01 Astra. Uh, I was looking forward to it. Uh, okay. Verticals. I just played with verticals framework over content SDK. Um, now it's time to see Astra in action. Okay. Unfortunately, the main fluffy presenter isn't here, but probably once I start to talk, cat will come back. Okay. So uh today I will uh tell you about Sitecore Astro demo website and uh initially I wanted to present it on bigger event uh on Sitecore Symposium but unfortunately this uh presentation
00:40:56 was not selected for Sitecore Symposium. So here it is. So today we will talk about sitecore Astro demo website. Why did we do it? How did we do it? And what results did we achieve compared to traditional NexJS approach? Let me introduce myself. My name is Santon Tishchenko. I'm uh CTO and co-founder of uh Sitecore development company named EXDST and uh I'm already 12 years in Sitecore development and I started as Sitecore employee. I was recognized as sore MVP for last seven years in a row starting from 2019.
00:41:53 And uh you probably heard about me if you read some articles about Sitecore Industro or about Sitecore MCP server. Now let's uh let's start with demo. Uh I will show you Sitecore demo portal. If you haven't seen it before, it is a Sitecore service that allows you to run custom uh and not custom and default Sitecore demos. Uh it's usually used by sitecore sales and sitecore uh partners to show sitecore uh products. In uh my case I will deploy custom demo for XM cloud. So I will select XM cloud uh uh the
00:42:58 latest one vertical uh demo and uh let me name it vertical and uh let it be let it be today's time stamp and uh I want to run custom demo so I need to use uh my own GitHub repository. Uh you can see that uh you can add different uh uh teams different different companies to say core demo portal. I will use my account where I have uh vertical repository and I will select main branch. The next step uh as it is custom demo I need to configure vercel and uh for vercel you can see that I need to add token as uh
00:44:03 it's uh online and uh it will be on recording I don't want to share token that's why I will move it to another screen for a second create my own token. Uh select uh one day expiration. It will be enough for my demo. Apply it back. Uh validate. And now I'm able now I'm able to back to main screen. And you can see that uh vercel was configured. Another configuration that should be done it is uh type of project that should be deployed on vercel. It is configured using environment variables. So I need
00:44:57 to add uh vercel project framework variable and it should have uh value Astra. Uh the default is uh as you probably guess uh NexJS. Now everything is ready. I can click next. Here is here options. It's uh when this demo should be turned off. And uh I will hide my screen uh for one more second because summary page contains vercel token as well. So uh I'm on summary page. I clicked deploy and now you can see that uh uh deployment is in progress. It's uh usually quite fast. It takes uh
00:45:57 from 15 to 20 minutes uh to deploy. So we will see results uh at the end of this presentation and uh meanwhile let me back to presentation itself and uh firstly small refresher about Astro SDK. Astro SDK for Sitecore was released quite a long time ago. It was released in October 2023 and uh I already uh presented Astro SDK on Sitecore user group Latin America and my colleague was Gabriel presented it on SUGCON 2024. That's why I will not repeat myself here. Uh if you want to learn more about
00:47:05 Astro SDK for sitecore, please watch this presentation. But in order to remind you about Astro and uh uh why it could be good together with Sitecore, I will make some small recap. So the key advantages of Astro are speed, UI agnostics, island architecture, easiness to use and content focused. How do they achieve it? Please review presentations uh mentioned before. And uh the main thing uh for us here today is that Astro is content focused. And uh what else is content focused, right? It's sitecore.
00:48:06 That's why the Astro and Sitecore could be the perfect match for your content website. So we created Astro SDK uh quite uh a long time ago and uh it's uh feature equal and uh it's much more faster than NexJS but uh it didn't get big uh popularity. So we decided that we need to improve awareness and easiness to try. That's why we decided to build Astro demo website and uh fortunately for us sitecore demo portal has ability to run custom demos that's why we took official NexJS verticals
00:49:00 vertical demo and decided to migrate it on Astra. We decided not to reinvent something new, some new demo with new components. We decided to took the existing one because uh in this way we will be able to compare NexJS website with Astro website one to one and uh how we were working on it. We divided our work uh into different stages. Uh the first stage was getting rid from NexJS. Uh Astro is UI agnostic and uh it allows you to work with different UI frame frameworks. That's why we were able to
00:50:02 uh get rid from Nex.js JS replace it with Astro but leave all React components as is. And uh on the first stage there was only uh layout that was written on Astra. Everything else all other components they were react based. And even after this change, we already had a website that was a little bit faster than uh NextJS demo. But uh we didn't stop on it. We took all React components one by one and migrated them from React to Astra. uh it was uh done uh about half a year ago and uh at that time we did
00:51:02 everything manually but taking into account modern development of AI I think uh it's probably might be done uh automatically with minimum human interactions. So if you are interested in uh automated migration from NexJS to Astro, it can be some future presentation. Meanwhile to component migration uh we also worked on a continuous integration, continuous deployment changes uh to make sitecore demo portal work with Astra and uh uh also we added the middle verses required for multi- language. age,
00:52:00 multicight and redirects. Then once uh we migrated all uh components we had uh uh two websites uh these two websites one was uh on NexJS and uh second was on Astro we didn't do any changes in sitecore items at all and uh uh that was uh ideal case for us because we were able to automate all testing and we used backtopjs to prepare screenshots from Nex.js JS website and uh then uh when we had screenshots uh of NexJS website we are able to compare them with Astro one by one and uh of course we had
00:53:06 some bugs but uh major part of them was related to animations and we easily fixed we easily fixed it. And uh once we got uh two exactly the same pixel perfect websites, we were able to run performance testing and we used uh Lighthouse as most popular tool for performance testing. Now let me check how our deployment is going. Everything is good so far and uh we can continue with the example of component migration. So here you can see usual uh react component. Here is nothing special. Uh it has uh
00:54:03 three site core fields image, text and link. And uh here is uh how it looks with Astro. Very similar and uh actually nothing special. And uh of course it's matter of taste which uh code you like more but uh Astro code usually is a little bit short shorter and uh a little bit uh more like HTML not like uh JSX but uh if you are um experienced front end developer uh it will be very easy to start with Astro. You need uh just to watch few videos and uh on the next day you will be able to uh create your own sitecore Astro
00:55:02 components. What was included into vertical demo and what we migrated? So we migrated everything uh vertical demo contains from uh multisite configuration with uh three different websites in three different languages. It has 42 components uh and some components has rendering variants. You can run it uh on any version of sitecore. You can run it on XM XP or XM cloud but initially it was designed for XM cloud. Uh you can also host it anywhere. You can host it on Sitecore demo portal as I showed on the beginning of
00:56:03 presentation. You can host it on XM cloud. You can host it on uh some on premise hosting or you can run it locally in docker by running uh two commands input part could be hosted uh in any modern hosting including vercel or Netlify and uh total amount of pages is uh 140 and uh also we wrote uh tests uh automated UI testing for backtopjs to make sure that we have identical websites and performance testing scripts based on lighthouse. Let's move on to feature comparison. If we compare NexJS and Astro as
00:57:05 frameworks, they will be different. Uh some features are present only in NexJS. Some features are present only in Astro. But uh it makes sense to compare only uh NexJS features that are used by official Sitecore Vertical demo website. So these features were selected by sitecore to add them into official demo to promote sitecore. So I think uh they included all may syncs and uh you can see that uh all these features are supported by our Astro implementation. Nothing is missed. Everything is present
00:57:58 including uh SXA headless features like uh rendering variants, partial designs, r row or column splitters. Let's move on to performance. So we have two exact websites. We are sure that they are exact the same because we run next.js to compare that they are pixel perfect and uh one website is on next.js second website is on astro. Both websites have 140 pages and uh uh both of them are using the same sitecore and uh we put Astro in exactly the same conditions there that are used for NexJS. We use the same
00:58:58 hosting vercel. We use the same uh caching strategy. It's uh ESR with 10 minutes and uh we use the same sitecore instance. It's uh it is based on uh sitecore demo portal and uh sitecore demo portal is using uh XM cloud internally. We are interested in performance for average user. That's why we make vamp calls for each page before testing it. And uh uh performance results for each page with lighthouse they couldn't be exact the same. There is uh there is always small difference in one or two score
00:59:53 points. That's why we make uh five tests per page and calculate average results. Five tests per page are just enough because if uh we add more the average results uh the average result remain the same but it adds more time. So that's why we stopped on this number five tests and uh all this code is available on GitHub. Anyone can uh run it, anyone can deploy it to vercel or to any other environment that they like and uh run our tests and compare performance by themself. So are you ready to see uh performance
01:00:56 results? And uh here they are. We got + 15 score only by changing technology from NexJS to Astro. Websites are exactly the same but the score was changed from 65 to 80. Uh we are not proud uh of 80 score on Astro but uh our goal here wasn't to create the ideal website. Our goal here was uh to create uh exactly the same website that uh we have for NexJS and uh we know what could be improved and how it could be improved. But uh here we have just uh two exactly the same websites. And for identical
01:01:57 websites uh where you can't notice any difference that's a huge improvement. So let's see uh the details. Lighthouse score contains from uh five different categories. It's first contentful paint, largest contentful paint, speed index, total blocking time and uh cumulative layout shift. And the biggest improvement are in first contentful paint and largest contentful paint. For first contentful paint, we get uh uh plus five in score. Plus five uh doesn't mean a lot. But if we look on uh time, it's minus 2 seconds
01:03:01 on the first contentful paint. So previous previously it was 4 seconds for first contentful paint and now it's just 2 seconds and we have two seconds improvement. So uh first contentful paint was uh improved almost in two times. Let let me grab some water. Anton, before you go ahead, is this uh averaged already? Right. So, it's not like the first request measurement, it's like averaged for the five. Yep. That's uh that's average not just for five. That's average
01:03:54 uh that's average for five multiple the page numbers, right? for all pages for 140 pages and uh uh for each page five times. So that that's average firstly average for all pages and then average between pages. So it's just asking to make sure it's not ISR affecting this bigger. No. uh is is affected because uh we we actually uh our goal here was to measure uh performance in browser not measure server side performance and uh as Nex.js was configured to use Versal ESR we
01:04:47 configured Astra in the same way. If if we uh compare server server performance doesn't mean uh a lot for us because uh it's the same the same hosting what what we can measure there and uh everyone use uh caching strategy style while revalidate and uh you always will get uh results from cache but not from uh execution. B VSR it's very significant difference like two seconds twice. Yeah, it's uh it's uh it's for mobile for desktop uh it will be smaller but it is uh we also
01:05:46 didn't configure Lighthouse in any way. We used the default lighthouse CLI settings and by default it's mobile and uh that's uh what we get with it. Uh I'll continue. Please come on. Uh and uh another big improvement it's uh largest contentful paint. Here we got + 7 in lighthouse score and minus 3 second uh seconds uh in uh time. And uh together with uh uh together with uh speed index improvement with small uh improvement on speed index. Uh, we got uh + 15 in uh
01:06:48 uh sorry I misclicked uh I misclicked my presenter window and uh together with uh speed index we got + 15 score. That's a huge difference taking into account that websites are the same and only framework differs and uh visitor will not notice any differences and uh now let's look on uh performance results per page. So uh here are performance results for one uh of websites. I think it's financial and we can see difference for each page uh for Astro and Nex.js demo websites. We can see that uh
01:07:51 all Astro pages are faster than NexJS pages and uh improvement score starts from seven uh and uh it increases to 80 uh score points and uh uh that will give us uh average result about 15. And uh the common rule here is uh that the more complex page is the bigger is difference. So the more components we put on page uh the better the bigger difference will be between Astro and NextJS. And uh let's uh move on let's move on to conclusions. So we developed uh an opensource Astro SDK for sitecore. It enables you to
01:09:07 create blazing fast websites and we also made demo website on Astro. It is a copy of existing latest official demo of NexJS. It's one to one. You can check, you can try it, you can use it at starting point. And uh Astro demo is much more faster than NexJS demo. And uh that's why I can say that Astro was Astro is and Astro will be the easiest way to get most performant sitecore website. Now let's back to let's back to demo portal. Let's back to demo portal. Let's check sitecore uh services and
01:10:10 financial because default it's just uh one basic page. Let's also open sitecore uh launchpad. Uh here I will need to log in and uh let's also open sour content editor. So firstly let's start from uh uh services website. So uh here is homepage. You can see that there is some animations, some parallax effects, uh carousels, uh different cart components, uh uh form, some uh other components, image banners, uh testimonials. So it's not a big but quite quite separated. It looks like it's
01:11:25 about 30 components or something all together. Um so I I'm not sure how many components on this page but uh project itself has 42 components and uh I think a lot of them are present here. Other pages are not so complex but they are also decent and uh you we can change uh color scheme we can change language so it's like regular site website another website is uh financial Here we have uh a slider at the top with video and images and uh everything else uh is similar but a little bit different. Some other
01:12:32 components, some other animations and uh here we also have different themes and uh different languages. For example, let me open French website. I think it's automated translation but it doesn't matter for us. And uh here also we have different pages. So uh these websites are not so big but they are quite decent to measure performance on them. That's not the empty page with some uh uh component that doesn't mean anything. This is actually website that uh we can we can compare. And uh now let me let me switch to
01:13:31 another tab if if I will be able to move uh zoom controls. Yeah. So let's uh go to exam cloud. Before I go the question is what you just showed was already on Astro. That's already that's on Astro. We we can we can view page source and we can look for Astro. So here here is for example uh we can see that that it's astro this that's how we can identify it and if we will look for nextjs next there is nothing like this so it's it's a double should I add couple more questions or
01:14:27 leave it to the end what would be better you So if uh if if these questions are related to this part you can you better ask it here. So feel free to ask. So the question is first of all like when you compare to nextjs you obviously use nextjs with gss not content SDK which is slower. I think that with the content SDK the difference will be a bit less but according to numbers it will be like comparable because content SDK performs almost twice faster again it's by psychometrics but
01:15:09 I was I was prepared to this question and I have slide for it. So uh content SDK was just recently released and uh for now we don't have any official sitecore demo where we can compare it. I have it deployed on my host with content SDK exactly the same uh exactly the same three websites but I think it would not be like equal apples to apples because it it's on a different data centers you are based in Europe I'm based in US so it's already like difference
01:15:55 yeah so so so you uh that's uh you did this migration of vertical websites that that's not official customly based. Yes. Yeah. Yeah. That that's what I'm talking about. So there is no official site core demo for sitecore content SDK which includes some decent amount of content where we can compare. The only official website which we can compare is this uh skate park because it exist on both SDK and content SDK and JSS. It's just a basic it's named basic website and it it's
01:16:41 just one almost empty page there. There is not too not too much to measure. Not too much to measure. So So once Sitecore will uh release demo, I will be glad to compare. But uh currently from what I saw from official Sitecore presentations uh Sitecore content SDK is definitely faster than SoreJSS NextJS but uh uh from what I see uh it's uh not twice as fast. That's why I expect that Sor GSS Astro still will be faster. But uh here also we can migrate Astro from GSS to content SDK
01:17:42 at some point. So that's uh my final question. Let's let's wait for official demo. Let's wait for official demo. I I got one more question. Yeah. So with Astra SDK when you made this uh conversion does it like HTML perfect output like tag to tag everything like style to style? No, it's it's not it's not HTML perfect uh uh output because uh there are some uh uh some additional uh texts that are added by uh React components and some additional
01:18:31 texts that are added by Astro components. They are pixel perfect but they are not HTML perfect and uh uh the reason is for example for React there were used uh some some libraries for animation for example for this parallax effect or for the for counters and uh with Astro it's just JavaScript it's just JavaScript that changes the position of image. So that's that's example why it's not exact the same HTML and that's good example of why is it is faster because it employs less one
01:19:22 dependency in this case uh it's it's faster because of uh different reasons for one reason is that uh it's uh uh zero JavaScript saved by default. Of course, we added animation and we uh decreased uh with this animation maximum uh perfect score. But uh if we if we load this website with uh disabled uh JavaScript we will we will get about the same because uh it doesn't require any uh iteration and uh that's why it's uh it is much more faster than uh NexJS and also
01:20:16 uh that's related how NexJS works with sitecore. NextJ as we have one one entry point uh for all uh pages next.js JS prepares uh one big JavaScript bundle that uh uh contain all uh components and for Astro we just don't need this JavaScript because uh our components it's HTML it's not JavaScript and that's that's why it's much more faster. Uh let's move on. Yeah, thanks for clar uh let's open let's open page interface for example let's start from financial
01:21:16 website uh we can see that uh everything is uh still editable we are able to edit text fields rich text fields we are able to change images. We are able to uh change uh renderings, remove them or add new renderings. So all editing cap capabilities are still in place. We can do anything and uh even as you can see even new sitecore streams features are present and are available with Astro components as well. Let me also open uh services website and show that everything is uh still working there. We
01:22:23 can we can still edit text. We can still edit images. We can edit components. We can switch to different pages. And uh everything is editable and everything is fast. And uh let me also open experience editor uh for example personal page because why not? and it it loads fast and uh you can edit it. So so we have uh all the capabilities of official sitecore uh NexJS uh GSS but with different framework which is faster. Now let's uh uh after seeing the sitecore demo portal let's back let's back to presentation.
01:23:50 So the last slide is links. Uh here is QR code. uh this QR code is uh to this presentation as it is hosted as website on Netlify. So you can scan this QR code, open it in browser, scroll to links and uh you will be able to open links uh to GitHub where is present Sitecore astro SDK and this vert vertical Astro demo website. There are also links to presentations on Saglatam and SUGCON which I mentioned before and there are links to different blog posts related to Astro vertical websites about process about running on demo portal
01:24:48 running locally performance NexJS Astro component comparison and feature comparison and uh now That's time uh for questions if you still have and but but before questions from audience I prepared answers in advance and uh on one question I already answered and the second question expected question was about approach of course of course I was about to ask it because quantum SDK is about to bring the support. Yeah. Uh actually for now sitecore doesn't support NexJS approacher
01:25:42 and there there are some rumors that it will uh support at some point and I expect that it will support at some point but uh I do not expect from a proper some improvement of performance because uh back in December December 2024 uh I made prototype with uh where I migrated uh small website based on the page router on the app router and that's that was a proper migration that wasn't just marking everything as client components I rewrote Nextjs components implementations for placeholders for different fields uh and
01:26:40 uh you can check it. It's also available on GitHub and I have articles about it and uh I compared exact the same not not like the website that was shown on demo much more simpler website but I compared three different cases a router on client components a router on server components and the pages router and at that uh point I got results that page router was even faster than app router on server components that's why I don't expect too much from app router and uh if you would like to see a
01:27:33 presentation about uh how I made that prototype on server components it probably can be another topic for headless user group. I invite you straight ahead to become the next speaker with the next topic. Please welcome. Okay. Okay. But it's it's lots of curiosity about it. Cool. Cool. I will spend some time to remind myself what I did. And uh now that's time for another questions from audience. I guess nothing else or or I need to check chat. Was was there something in the chat?
01:28:22 Nothing. I would add a verdict that Astra SDK has all this performance benefits of content SDK but still works in experience editor. Yeah. Yeah. and uh Astro A uh Astro SDK it's uh it's based uh it's based on site core GSS and uh currently we looking and probably we will migrate it on the content SDK as well because content SDK it's all it also contains from main library uh that is universal for any frameworks and additional libraries for Nex.js and React and uh uh we we this uh Astro SDK we are not
01:29:23 heavily rely on uh set core GSS. We use it only only for uh for requests on server side. So if we uh let me back to view source and uh for example here if we will look here we even uh will not find any any JavaScript part that's related to setcore GSS. Setcore GSS in Astro SDK is used only on the server side to make requests because we because there was no point to uh write wrapper for layout service or dictionary service one more time. It was already present for GSS and uh it works fine. Yeah, thanks for clarifying that. I was
01:30:30 actually wondering how it all works and you got it. Just buy an extra layer on top of it. Yep. So the it's not a question but just more thinking aloud. Um this is very good uh SDK and framework for building sites with like some cloud. uh like I see the problem potential problem which comes from decision makers they always want to have something as as standard set in stone. So when someone chooses technology today they're basically driven by okay we have this nextjs as the most popular framework
01:31:17 they're probably most of support for it most of community most of uh problems resolved and they start thinking okay Astra is kind of blank it's only Anton for builds with it maybe few other guys so that looks like a disadvantage I know outside of site has quite a decent uh community of people. So people are praising it outside of sitecore but inside of side core quite little support. So probably there should be some way how people start using it more actively. Any thoughts on that? Yeah, that's uh that's actually
01:32:09 that's actually big problem. So here for example uh uh popularity of Astra you can see that more and more uh websites start to use it and with uh uh Sitecore clients it's uh a little bit problem because uh it's enterprise business and they came to Sitecore and uh license includes support and sitecore support only nextjs react view angular official. Exactly. And uh when you choose between uh NexJS, React View and Angular, the choice is obvious. Uh you choose Nex.js JS because
01:33:06 uh for everything else you will need to if you want uh some uh static caching you will need to implement something by yourself. That's why that's why unfortunately Astro isn't so popular in uh sitecore world but uh I still hope for the best because uh because I I I I don't see for many sitecore websites they are purely content websites they are not uh uh like web applications and uh react or view or angular first of all it's they are frameworks for web applications and uh what what we actually did we do
01:34:04 we so we implement site on sitecore we select nextjs and we implement everything on react we spend additional effort implementing it on React and then Nex.js take takes React components and make them static and put them uh to cache on VersaL. So what's the point? What's the point to implement website with uh technologies that are designed for applications and then make them static with SSG ESR caching. It's like uh extra step that we don't need and uh probably we need if we know that this uh sitecore website
01:35:02 will be content website it will not be some kind of application some uh booking or some air flight company that's what that's why they they uh is no point to select frameworks for applications for for many sitecore websites because a lot of sitecore websites are content websites and for content websites we should select technologies that works better with content websites. Okay. So thank you very much for presenting at this uh user group both to you Anton and Robert because I know the time is very
01:35:58 late at where you are. So I won't take you any longer. Definitely wish to try Astro. Yes. Thank you Martin for having us as guests. Not the final time. I know I want to see you again both you. Yes, thank you. Thank you for having this user groups. I think it's the most regular and the most popular uh user group on YouTube. So we try to educate folks by having this user groups all all the sessions recorded. So just it's it's indexed by the titles. Whoever has a problem, they
01:36:45 can go and watch because we we share such lovely recipes here. Something that you won't ever find anywhere. Plus, uh we do lots of effort. Not saying we, I mean the community. I personally educate people through LinkedIn like posting daily XMcloud tips. So if you are not in my list yet, join me on LinkedIn and you will receive a fresh daily uh XMcloud tip about what what should you do or maybe what you should not do. Uh do you do you use some automatic posting or No, no, I do it all manually.
01:37:24 All manual. Everything is manually. Yeah, I created them manual. I wrote them manually and I post them almost manually. Yeah, because uh I see uh posts uh too often too often. That's that's why I asked about automation. If you notice, they all are posted in a very random time. It's not something that been scheduled. Uh I do post a tip a day. That's that's my uh promise. Uh there is also a family of site telegram channel I do. So if you use telegram messenger it's something
01:38:05 definitely you would like to consider there is one main channel and uh more dedicated channel to sitecore products like the one is for exemploud the one is for headless development uh each uh channel for each of the product like CDP with personalize uh order cloud content hub uh even connect has a channel and side search so yeah definitely something you want to navigate I don't do I'm I'm I'm not very much intrusive there. So I do I do only uh important posts very short very brief only what you need
01:38:43 to know. So I very much encourage to subscribe. With that in mind I wish you all Oh yeah. Show your friend. He He is fluffy presenter. I have a fluffy organizer. Here is it. Okay, with that in mind, I wish you all guys good night or good end of the day for those who are based in America. See you next month. Bye-bye. Thank you. Bye.