Pages and routing
Write an Astro page
Combine a server-side component script with the HTML template it renders.
8 minute lesson
An Astro page has a component script and a template.
---
import SiteHeader from '../components/SiteHeader.astro'
const title = 'About'
---
<html lang="en">
<head>
<title>{title}</title>
</head>
<body>
<SiteHeader />
<main>
<h1>{title}</h1>
</main>
</body>
</html>The fenced script runs while Astro renders. It can import components, read props, load data, and calculate values. Astro removes this script from the HTML response.
The template describes the output. Expressions such as {title} are evaluated during rendering.
The title is dynamic at build or request time, but it is not reactive in the browser. Changing a browser variable later will not rerender this Astro component.
If the page needs browser behavior, use a normal script or a hydrated framework component. Keep server-only work in the component script.
View the page source and search for SiteHeader, const title, and the final heading. Only the rendered HTML should remain.
Lesson completed