Svelte / Intermediate: Kit routes and server data policy / Lesson 7

Kit file routing, layouts and current page data

Compose route files and shared UI while preserving dynamic input, component reuse and current access policy.

About 4 min readContent reviewed 2026-10-28

On this page

Lesson goals

Explain +page, +layout, +page.server and dynamic path responsibilities.
Avoid treating layout reuse or initial data copies as current authorization.

File conventions identify application boundaries

SvelteKit maps route directories to pages and server behavior through its documented file conventions. +page.svelte renders page UI, +layout.svelte composes shared UI, +page.server.js provides server-only page work, and +server.js defines endpoint handlers. A [id] segment supplies path input, not permission to read its object. Route groups can organize layouts without adding a visible URL segment. Review the resolved public path and layout tree rather than assuming every directory name appears in the URL. Page and endpoint semantics differ even when they relate to the same business capability, so keep their access and response contracts explicit.

Render children through the selected Svelte 5 layout contract

The fragment is a runes-mode +layout.svelte that receives children and renders that snippet around shared navigation. It assumes the Kit route compiler supplies the props. The layout is not a session verifier, and its public navigation does not establish the permissions of child loads or actions. Legacy slot-based examples have a different component syntax and should not be mixed into the same runes explanation indiscriminately. No router, layout or snippet was compiled here. Test the actual file location, nested path and child rendering in the selected Kit/Svelte versions before relying on the composition.

svelte Illustrative Svelte 5 Kit layout

<script>
  let { children } = $props();
</script>
<nav aria-label="Main"><a href="/courses">Courses</a></nav>
<main>{@render children()}</main>

children is a framework-supplied snippet. No route tree or SSR output was generated.

A reused component does not rerun every initialization line

Kit can reuse page and layout component instances during navigation and update their data props. A local variable initialized once from data can therefore remain stale while the parent data changes. Read current values reactively or use a derived expression; create a separate editable draft only with explicit reset/reconciliation rules. A layout server load is not a universal per-action authorization checkpoint. Protect the actual data and mutation boundaries even if the layout displays a sign-in condition. Test navigation between two IDs with the same component rather than only a full browser reload.

Validate a declared route identity locally

The local predicate permits a small lowercase hyphenated slug convention and rejects path-like input. This is a domain syntax rule for synthetic courses, not Kit’s route matcher or URL decoder. Catch-all and optional params have their own shapes and should be validated according to the actual route contract. A valid slug can identify a private course or another tenant’s object. Keep syntax, current principal and source eligibility separate. Never turn a path parameter directly into a filesystem location or an unrestricted source filter simply because the route compiler recognized the segment.

javascript Complete offline route-slug rule

function slug(value){return typeof value==="string" && value.length<=60 && /^[a-z]+(?:-[a-z]+)*$/.test(value);}
console.assert(slug("kit-routing"));
console.assert(!slug("../private"));
console.assert(!slug("kit--routing"));

The declared slug passes and two invalid forms fail. No routing, decoding or authorization is exercised.

Review URLs, options and error paths as one route contract

Retain fixtures for nested routes, missing segments, route groups, endpoint methods and any configured base path. Match SSR/prerender options to whether content is public and request-independent. A public static route and a private session route need different source and deployment assumptions. Error and redirect control flow also follows Kit’s versioned contracts. This course executes only the slug predicate; it does not build routes, load server modules, reuse layouts or navigate a browser. Verify those behaviors in an authorized isolated project and keep its exact configuration with the results instead of inferring them from folder names.

Common errors and fixes

A local title remains from the previous route ID

Why it happens: A one-time initialization copied data from a reused component.
How to fix it: Read current props reactively or define deliberate draft reset rules.
Prevent it next time: Test navigation between IDs without a full reload.

A layout sign-in condition is called endpoint protection

Why it happens: Shared UI composition replaced current source and mutation policy.
How to fix it: Enforce authority inside each server entry and shared domain service.
Prevent it next time: Test direct actions and endpoints with denied principals.

A route group is mistaken for a visible URL prefix

Why it happens: Organizational directories were confused with resolved route segments.
How to fix it: Inspect the public route tree and actual file conventions.
Prevent it next time: Keep link fixtures when reorganizing route folders.

Check your understanding

1. Does a valid slug prove a caller may read the course?

Show worked solution

No. It proves one syntax convention only. The current principal, tenant scope and object visibility still need domain checks. Pair the same ID with allowed and denied callers, and verify direct server entry points rather than relying on a visible link or protected layout.

2. Why can copying data.title once become stale during navigation?