Intro to SSR

Package on GitHub

Server-side rendering (SSR) renders your app to HTML on the server before sending it to the browser. Instead of shipping an empty <div id="app"> and waiting for JavaScript to build the page, users see content immediately.

---

Why SSR?

Faster first paint. Users see content before JavaScript loads. On slow connections or devices, this difference is significant.

SEO. Search engines index the HTML you send. Client-rendered apps require crawlers to execute JavaScript, which not all do well.

Social sharing. Link previews (OpenGraph, Twitter cards) scrape your HTML. SSR ensures they get real content.

When to skip SSR: Internal tools, dashboards, and apps behind auth often don’t need SSR. The added complexity isn’t worth it if SEO and initial load time aren’t priorities.

---

What is SSR?

Your app runs twice: once on the server, once on the client. The following questions break down what that means.

How does it run on the server?

Your app is JavaScript, and JavaScript can run on the server. Rimitive provides a server adapter that generates HTML without a real DOM.

What about browser APIs and events?

Browser and DOM events aren’t supported on the server, and browser-specific APIs won’t work. You’ll need to add guards for code that touches these:

el('input').ref((el) => {
  if (typeof window !== 'undefined') el.focus();
})()

In an ideal world, imperative DOM work is contained within refs, making it easy to guard.

Note

Rimitive effects are synchronous by default and will run on the server. However, async flush strategies (like mt, raf, etc.) are noops on the server—safe to use, but they won’t execute.

What about fetched data?

Rimitive supports data fetching during SSR with the load() module.

SSR Data Pitfalls

Don’t use raw fetch() or resource() for SSR data:

• fetch() in a component starts the request but doesn’t block—the server sends HTML before it resolves
• resource() auto-fetches via effects but has no hydration support—the client refetches anyway
• resource() at module level is especially dangerous—it creates a singleton shared across all server requests, risking data leaks between users

Use load() for any data that needs to render on the server.

What is Hydration?

Hydration makes the static HTML interactive. See Client Hydration for details.

---

Next Steps

Ready to implement? Continue to the practical guides:

• Server Rendering — Set up basic SSR with adapters
• SSR with Data Loading — Fetch data during SSR with load()
• Streaming SSR — Send HTML progressively as data loads