Keep server data private

Frontmatter code runs while rendering, so it can use a private credential without shipping the credential’s source code to the browser:

---
const response = await fetch("https://api.example.com/account", {
  headers: {
    Authorization: `Bearer ${import.meta.env.API_TOKEN}`
  }
})

if (!response.ok) throw new Error("Account request failed")

const account = await response.json()
const displayName = account.displayName
---

<p>Welcome {displayName}</p>

Only displayName is rendered. The token never belongs in the template.

The boundary is the output, not the file extension. A secret still leaks if you interpolate it into HTML, include it in a data-* attribute, log it into a public response, or pass it as a prop to a hydrated framework component. Everything delivered to browser JavaScript is public to the visitor.

Also distinguish build-time secrecy from user-specific authorization. A static page built with a private token is still the same public file for everyone. Private account pages require on-demand rendering plus real access control.

Return the smallest safe projection of external data. Before deploying, inspect the generated HTML and browser network responses for the secret’s name and value.