Solid.js SSR and Hydration — Server-Side Rendering

In this tutorial, you will learn about Solid.js SSR and Hydration. We cover key concepts, practical examples, and best practices to help you master this topic.

Learn Solid.js SSR and hydration: server-render components, hydrate on the client, and optimize for SEO and performance with SolidStart.

In this lesson, you'll understand how Solid.js works with server-side rendering and hydration using SolidStart, the meta-framework.

What You'll Learn

How SSR works in Solid.js, hydrate components on the client, use SolidStart for routing and data loading, and optimize for SEO.

Why It Matters

SSR improves SEO by sending full HTML to search engines and improves perceived performance by showing content before JavaScript loads.

Real-World Use

Doda Browser's documentation site uses SolidStart for SSR, ensuring content is indexed by search engines and loads quickly.

flowchart LR
    A[Server] --> B[Render HTML]
    B --> C[Send to Client]
    C --> D[Hydrate]
    D --> E[Interactive App]
    style B fill:#2c4f7c,color:#fff

SolidStart

SolidStart is the meta-framework for Solid.js with built-in SSR:

npm init solid@latest my-solid-start-app -- --template solid-start

SSR Component

// Components render on server by default
function HomePage() {
  return (
    <div>
      <h1>Welcome</h1>
      <p>This content is server-rendered.</p>
    </div>
  );
}

Data Loading

import { createRouteData } from "solid-start";

export function routeData() {
  return createRouteData(async () => {
    const response = await fetch("https://api.example.com/data");
    return response.json();
  });
}

Hydration

Client hydration attaches event handlers to server-rendered HTML:

// Client entry hydrates the app
import { hydrate } from "solid-js/web";
import App from "./App";

hydrate(() => <App />, document.getElementById("app"));

Client-Only Components

import { clientOnly } from "solid-start";

const ClientMap = clientOnly(() => import("./Map"));

function Page() {
  return (
    <div>
      <h1>Location</h1>
      <ClientMap /> {/* Only renders on client */}
    </div>
  );
}

Common Mistakes

1. Using browser APIs during SSR: window, document, localStorage cause SSR errors. Guard with if (typeof window !== 'undefined').
2. Not hydrating correctly: The hydrated app must match the server-rendered HTML exactly. Mismatches cause hydration errors.
3. Client-only components without fallback: Client-only components should have a server fallback (loading spinner or placeholder).
4. Overusing SSR: Not every app needs SSR. For dashboards and authenticated apps, client-only may be simpler.
5. Forgetting meta tags for SEO: SSR enables SEO, but you must still add proper meta tags for each page.

Practice Questions

1. What is the purpose of SSR? Answer: To render HTML on the server, improving SEO and initial load time.

2. What is hydration? Answer: The process of attaching client-side event handlers to server-rendered HTML without recreating the DOM.

3. What prevents hydration errors? Answer: The client's first render must produce identical HTML to the server. Differences cause hydration mismatches.

4. When would you use client-only components? Answer: For components that depend on browser APIs (maps, charts with canvas, localStorage-dependent UI).

Challenge

Create a SolidStart site with three pages. One page uses SSR with route data, one page has a client-only component with fallback, and one page demonstrates SEO meta tags.

Mini Project

Build a blog with SolidStart: server-render the blog list and individual posts, use route data for content, add a client-only comment section, and implement proper meta tags for SEO.

FAQ

What's Next

Apply everything you've learned in the Solid.js Final Project to build a complete application.