Page rendering

How SiteX renders static pages, dynamic pages, server pages, and route CSS.

Overview

Sitex renders pages to HTML at build time unless a route opts into server rendering.

Static Routes

Static routes are the default.

export default function AboutPage() {
  return (
    <html lang="en">
      <head>
        <title>About</title>
      </head>
      <body>
        <h1>About</h1>
      </body>
    </html>
  )
}

Dynamic static routes export paths. Sitex renders one HTML file for each path.

export const paths = [
  { params: { slug: "alpha" } },
  { params: { slug: "beta" } },
]

export default function Page({ params }) {
  return <h1>{params.slug}</h1>
}

Server Routes

Export render = "server" when a route needs the incoming request.

export const render = "server"

export default function RequestPage({ request }) {
  const url = new URL(request.url)

  return (
    <html lang="en">
      <body>
        <h1>Server route</h1>
        <p>{url.pathname}</p>
      </body>
    </html>
  )
}

Server routes are not written as static HTML files. See Deployment.

CSS Assets

Import CSS from routes, layouts, or components. SiteX includes the CSS needed by each rendered route.

Global CSS usually belongs in src/layouts/base.tsx.

import "@/styles/globals.css"

export default function BaseLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

Interactive Components

Pages stay static until an imported component opts into client rendering. Read Component rendering for client directives and island boundaries.