SSR

Server-Side Rendering

SoulCache supports server-side rendering for instant page loads.

Usage

Server Component

import { QueryClient, dehydrate } from '@soulcache/core';
 
async function ServerComponent() {
  const client = new QueryClient();
 
  await client.fetchQuery({
    queryKey: ['users'],
    queryFn: fetchUsers,
  });
 
  const dehydrated = dehydrate(client.getCache());
 
  return <ClientComponent dehydrated={dehydrated} />;
}

Client Component

'use client';
 
import { useEffect } from 'react';
import { hydrate, QueryClient } from '@soulcache/core';
import { SoulCacheProvider } from '@soulcache/react';
 
const client = new QueryClient();
 
function ClientComponent({ dehydrated }) {
  useEffect(() => {
    hydrate(client.getCache(), dehydrated);
  }, []);
 
  return (
    <SoulCacheProvider client={client}>
      <MyApp />
    </SoulCacheProvider>
  );
}

Features

Automatic Serialization

Data is automatically serialized for transport between server and client

Type-Safe Hydration

Full TypeScript support for dehydrated state

Partial Hydration

Only hydrate the queries that are needed

Streaming Support

Works with React's streaming SSR for progressive loading

Best Practices

SSR Guidelines

Fetch on server — Pre-populate cache for instant page loads
Hydrate early — Before first render for optimal performance
Match queries — Server and client must use the same query keys
Handle mismatches — Gracefully handle differences between server and client