Server rendering

Components receive props and a context containing request, env, and signal. Use request for URL and headers, env for configured Worker bindings, and signal to cancel cooperative asynchronous work. Server context is not passed to client components.

import type { RenderContext } from "renku";

export default function RequestInfo(_props: {}, context: RenderContext) {
  const path = new URL(context.request.url).pathname;
  return @{ <p>The Worker received {context.request.method} {path}.</p> };
}

The outermost layout owns html, head and body. The stylesheet includes extracted StyleX rules; the small coordinator applies completed server patches and discovers client roots. Static pages do not download the reactive renderer.

import type { LayoutProps } from "renku";
import { assets } from "renku/assets";

export default function Document({ children }: LayoutProps) @{
  <html lang="en">
    <head>
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <title>My renku app</title>
      <link rel="stylesheet" href={assets.stylesheet} />
      <script src={assets.runtime} async />
    </head>
    <body>{children}</body>
  </html>
}

An async component outside a Boundary delays its containing representation. Wrap nonessential async work in a Boundary to publish a fallback first. Pass context.signal to fetch and other cancellable work. Request aborts and response cancellation stop cooperative rendering.

Validate request input and authorize data access before reading protected resources. Pass only the JSON data a client root needs. The browser graph rejects server application modules and Worker/Node runtime imports; this is a module boundary, not an authorization system.