🌐 SSR with Data Fetching

Server-side rendering with store hydration

📊 Server-Side Data (SSR)

Store Data:

{
  "name": "Server User 603",
  "age": 28,
  "email": "server-user-603@example.com"
}

Server Info:

{
  "userId": "603",
  "lastLogin": "2025-09-16T13:02:10.968Z",
  "serverLoadTime": "2025-09-16T13:02:10.968Z",
  "renderTime": "2025-09-16T13:02:10.968Z"
}

✅ This data was fetched on the server and rendered as part of the initial HTML. The store was initialized with this data before sending to the client.

Hydrated Client Component

⏳ Hydrating...

Waiting for client-side hydration to complete

User Profile (From Hydrated Store)

Name: Alice

Age: 25

Email: alice@example.com

Render Count: 0

This component is now fully reactive!

Test Reactivity (Post-Hydration)

Buttons will be enabled after hydration completes

Original Server State:

{
  "name": "Server User 603",
  "age": 28,
  "email": "server-user-603@example.com"
}

Current Store State:

{
  "name": "Alice",
  "age": 25,
  "email": "alice@example.com"
}

🔧 Technical Implementation

• Server component fetches data and initializes store
• initializeServerStore() returns serializable state
• Client component receives server state as props
• userStore.hydrate() updates client store
• Component becomes fully reactive after hydration

🔄 SSR + Hydration Flow

Server Fetch: Data is fetched on the server using async functions

Store Initialization: initializeServerStore() populates the store

SSR Rendering: Server component renders with store data

Client Hydration: Client components receive serialized state

Interactive: Client components become fully reactive

Server Component (this page)

export default async function SSRDemoPage() {
  // Fetch data on server
  const userData = await fetchUserData(userId);
  
  // Initialize store with server data
  const serverState = initializeServerStore(userStore, {
    name: userData.name,
    age: userData.age,
    email: userData.email,
  });

  return (
    <div>
      <h1>Server-rendered: {userData.name}</h1>
      <SSRUserProfile serverState={serverState} />
    </div>
  );
}

Client Component

"use client";
import { useEffect } from "react";

export default function SSRUserProfile({ serverState }) {
  // Hydrate client store with server state
  useEffect(() => {
    if (serverState) {
      userStore.hydrate(serverState);
    }
  }, [serverState]);

  const user = userStore.useStore();

  return (
    <div>
      <p>Name: {user.name}</p>
      <p>Age: {user.age}</p>
      {/* Fully reactive now! */}
    </div>
  );
}