composable-svelte-ssr

Implement Composable Svelte SSR with renderToHTML and hydrateStore.

3|Updated Oct 26, 2025

Search Tags:#routing #svelte #seo #ssr #hydration #renderToHTML #hydrateStore

Ready to run

npx skills add https://github.com/jonathanbelolo/composable-svelte --skill composable-svelte-ssr

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: composable-svelte-ssr
Source: https://github.com/jonathanbelolo/composable-svelte/tree/main/.claude/skills/composable-svelte-ssr
Command: npx skills add https://github.com/jonathanbelolo/composable-svelte --skill composable-svelte-ssr

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Server-side rendering patterns for Composable Svelte. Use when implementing SSR, hydration, server rendering, isomorphic code, or working with meta tags and SEO. Covers renderToHTML, hydrateStore, server-side routing, state serialization, and avoiding common SSR pitfalls.

Core Features & Use Cases

SSR APIs: renderToHTML, hydrateStore, and isomorphic routing strategies.
State and SEO: initialize state on the server and compute meta tags for SEO.
Use Case: Build a blog or dashboard that renders on the server and hydrates on the client while preserving navigation state.

Quick Start

Review the SSR APIs in this skill and implement a minimal server route that uses renderToHTML on the server and hydrateStore on the client to hydrate the App.

Frequently Asked Questions about composable-svelte-ssr

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I implement server-side rendering and hydration in Svelte?▼

To implement SSR and hydration, use renderToHTML on the server to render UI and hydrateStore on the client to restore state. This pattern establishes clear server/client boundaries for predictable isomorphic behavior.

What is the best way to handle state serialization during Svelte SSR?▼

State serialization during Svelte SSR involves initializing state on the server and transferring it to the client via hydrateStore. This ensures the client hydration process safely restores the application state without mismatches.

How does server-side routing work with isomorphic dependencies in Svelte?▼

Server-side routing with isomorphic dependencies uses structured patterns to share routing logic between server and client. This approach computes routes on the server before hydration, ensuring consistent navigation state across boundaries.

Can I compute SEO meta tags on the server with Svelte SSR?▼

Yes, Svelte SSR allows you to compute SEO meta tags on the server during the renderToHTML process. This ensures search engines receive fully populated meta tags for server-rendered UIs before client hydration occurs.

Why does my Svelte hydration fail after server rendering?▼

Svelte hydration fails when server/client boundaries are unclear or isomorphic dependencies behave unpredictably. Using structured patterns like hydrateStore ensures safe state serialization and prevents common hydration mismatches.