# How the Astro Starter Works

> Source: https://agilitycms.com/docs/astro/how-the-astro-starter-works

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](https://github.com/agility/agility-astro-starter) 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.

- Sign up for a free account and use the Next.js starter (it has a preconfigured models and content we want to use :)
  - Click here [https://agilitycms.com/starters/nextjs](https://agilitycms.com/starters/nextjs) and use the "Start free project" to get started.
- Clone this repo
- install NPM depedenacies (`npm i`, `yarn`, .etc)
- run it locally (`npm run dev`, `yarn dev`, etc)

## Server-Side Rendering

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.

## Routing and Pages

### Page Generation

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.

### Components

All the Components that are added to Layouts in Agility are rendered using  the`AgilityComponent.astro` file. A simple switch statement determines which Astro Component is used to render each Agility component, and all the params are passed along.

## Caching

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.

---

Index of every docs page: https://agilitycms.com/docs/llms.txt