What is your developer-dependent CMS actually costing you? Calculate your costs and get a full report
What is your developer-dependent CMS actually costing you? Calculate your costs and get a full report
Starter
The Starter makes it easy to source content, but it also assists with generating pages based on your sitemap in Agility CMS.
Legacy — Astro docs are no longer actively maintained. The Astro starter targets Astro 4; the current release is Astro 7. See why we recommend Next.js and .NET. If you need Astro, let us know.
We believe that editors (you know, the folks actually creating content) should have full control over their website pages and not rely on a developer.
The Starter Template makes it easy to source content, but it also assists with generating your pages for you based on your sitemap in Agility CMS.
This means that editors in the CMS control what pages are available, what their URLs are, and exactly what UI components (we call these Page Modules) make up each page.
The following example is based on the Next.js Blog Starter instance. The models and default content that instance comes with match what this starter's code is expecting.
npm i, yarn, .etc)npm run dev, yarn dev, etc)This site is setup to render on the server (not at build time) with caching through a CDN to maintain excellent performance.
If you want to run in hybrid or static mode, you can switch that in the Astro config, but we recommend using server-side rendering to give you the best experience for refreshing content quickly when it's published in the CMS.
Most Astro projects build their pages using file system based routing, which you CAN use if you like, but in this website, the pages are generated in this using the pages/[...slug].astro file.
We use the params from Astro to lookup the matching Layout in the Agility Sitemap. You can see this logic in the lib/agility-cms/getPage.ts file.
All the Components that are added to Layouts in Agility are rendered using theAgilityComponent.astro file. A simple switch statement determines which Astro Component is used to render each Agility component, and all the params are passed along.
You can see in the main slug file that we are setting a cache-control header that uses stale-while-revalidate to make sure this site is served from cache while updating in the background.
if (!pageResponse.isPreview) {
//Do not cache in preview mode ;)
//cache the page for 60 seconds, and allow stale content for 30 seconds
Astro.response.headers.set("Cache-Control", "public, s-maxage=60, stale-while-revalidate=30")
}We don't cache in preview mode, and what's more, we've used Netlify's special Netlify-Vary header to let Netlify know to vary the response based on the query string, and the agilitypreview cookie.
//ONLY FOR NETLIFY - we need to set the vary header to include the query string and the preview cookie
Astro.response.headers.set("Netlify-Vary", "query,cookie=agilitypreview")You can easily change this behaviour for other hosting environments.