Documentation

Docs

Introduction

What is rune

Philosophy

Why rune

Architecture

Getting Started

Installation

Quick start

Project structure

The dev loop

Tutorial: build an app

1. Create the app

2. Pages & routes

3. Layouts

4. State with Mimir

5. SSR & data

6. API routes

7. Styling

8. Build & deploy

Core Concepts

The application object

Rendering pipeline

Hydration

The build manifest

Configuration (ekko.json)

Permissions

Conventions

Routing

File-based routing

Dynamic routes

The router (useRouter)

Navigation & Link

Guards & redirects

Programmatic routes

Server-Side Rendering

Overview

The ssr() function

Strategies (eager/lazy)

SSR → hydration

Caching & invalidation

SEO

Mimir, state management

Overview

Atoms

Reading & writing

Selectors (derived state)

Subscriptions & the store

SSR & hydration

Persistence & sessions

Patterns & recipes

Pitfalls

Pages & Layouts

Pages

Layouts

Error & not-found

API Routes

Defining routes

Request & response

Middleware

helmet

cors

rateLimit

bodyLimit

validateContentType

csrf

requestId

timeout

errorHandler

httpsRedirect

secureCookies

ipFilter

safePath

Validation & options

Styling & Theming

SCSS

Theming (light/dark)

Asgard integration

No flash (no-FOUC)

Building & Deploying

The build

Static assets

Production deploy

API Reference

ekko:rune

ekko:rune/router

ekko:rune/mimir

ekko:rune/seo

ekko:ssr / css

ekko.json schema

CLI commands

Guides

Rune app from scratch

Recipes

Dark mode

Forms

Data fetching

Authentication

Pagination

FAQ (use cases)

Documentation

Docs

Introduction

What is rune

Philosophy

Why rune

Architecture

Getting Started

Installation

Quick start

Project structure

The dev loop

Tutorial: build an app

1. Create the app

2. Pages & routes

3. Layouts

4. State with Mimir

5. SSR & data

6. API routes

7. Styling

8. Build & deploy

Core Concepts

The application object

Rendering pipeline

Hydration

The build manifest

Configuration (ekko.json)

Permissions

Conventions

Routing

File-based routing

Dynamic routes

The router (useRouter)

Navigation & Link

Guards & redirects

Programmatic routes

Server-Side Rendering

Overview

The ssr() function

Strategies (eager/lazy)

SSR → hydration

Caching & invalidation

SEO

Mimir, state management

Overview

Atoms

Reading & writing

Selectors (derived state)

Subscriptions & the store

SSR & hydration

Persistence & sessions

Patterns & recipes

Pitfalls

Pages & Layouts

Pages

Layouts

Error & not-found

API Routes

Defining routes

Request & response

Middleware

helmet

cors

rateLimit

bodyLimit

validateContentType

csrf

requestId

timeout

errorHandler

httpsRedirect

secureCookies

ipFilter

safePath

Validation & options

Styling & Theming

SCSS

Theming (light/dark)

Asgard integration

No flash (no-FOUC)

Building & Deploying

The build

Static assets

Production deploy

API Reference

ekko:rune

ekko:rune/router

ekko:rune/mimir

ekko:rune/seo

ekko:ssr / css

ekko.json schema

CLI commands

Guides

Rune app from scratch

Recipes

Dark mode

Forms

Data fetching

Authentication

Pagination

FAQ (use cases)

Caching and invalidation

rune keeps an in-memory cache of the HTML it renders for static SSR routes. A cache hit serves stored HTML directly, no React render. You control how long entries live (ttl), label them (tags), and bust them (app.invalidate).

What gets cached

A static route with an ssr(). The cache key is the path. Each entry stores the assembled HTML, the atoms used, a timestamp, the ttl, and the tags.

Dynamic routes and shell routes are not cached (they render per request / on the client).

TTL , time-based expiry

Set ttl (in seconds) in the route meta. A cached entry is served while it is fresh; once Date.now() - timestamp >= ttl, the next request re-renders and re-caches.

1
app.page("/changelog", Changelog, { page: "changelog.tsx", ttl: 300 }); // re-render at most every 5 min

ttl: 0 (the default) means no time-based expiry, the entry lives until you invalidate it explicitly. For content that only changes on deploy, ttl: 0 + explicit invalidation is ideal; for content that drifts on a schedule, a ttl keeps it fresh automatically.

Attach tags to routes so you can invalidate a whole group at once:

1
2
app.page("/blog", BlogIndex, { page: "blog.tsx", tags: ["blog"] });
app.page("/blog/hello", Post, { page: "docs.tsx", tags: ["blog", "post:hello"] });

Now publishing a post can clear every blog page in one call.

app.invalidate(pathOrTag)

Three forms:

CallEffect
app.invalidate("*")Clear the entire cache and re-render every static SSR (non-dynamic) route.
app.invalidate("/blog")Clear the entry for /blog and re-render that route.
app.invalidate("blog")Treat the string as a tag: clear (and re-render) every cached page carrying that tag.

A path argument starts with /; anything else is a tag. After invalidation, the affected static routes are re-rendered immediately so the next request is a warm hit again.

The returned handle from app.start() also exposes invalidate, so background jobs can bust the cache:

1
2
3
const handle = app.start();
// later, when data changes:
handle.invalidate("blog");

A content-update flow

1
2
3
4
5
6
// an API route that publishes a post and refreshes the affected pages
app.api("POST", "/api/posts", async (req, res) => {
savePost(await req.json());
app.invalidate("blog"); // re-render the index + every tagged post page
res.json({ ok: true });
});

The client never sees stale HTML for those pages after the call, and you did not restart the server.

Cache and __user

A cached entry's HTML is shared, but rune patches the current request's __user into it on the way out (replacing the "__user":null placeholder). So per-request identity is preserved even on a cached page, while the rendered markup stays shared. Do not, however, bake per-user markup into a cached static route, see SSR and hydration → Rule 3.

Choosing a caching policy

ContentPolicy
Docs, marketing (changes on deploy)ttl: 0, eager; invalidate on deploy (restart re-renders anyway)
Blog/news (changes during runtime)tags, invalidate on publish; optional ttl as a safety net
Frequently changing widgetsa ttl, or render on the client and fetch fresh data
Personalised pagesnot cached, render per request / client

Next: the head tags those renders inject, SEO.