One of the core concepts in Katnip is isomorphic rendering.
This means that the same React components can run both on the server (to generate the initial HTML) and on the client (to rehydrate and take over interactivity).

The result: pages load fast, search engines see meaningful content, and developers only need to write their UI once.

How It Works

When a user visits a Katnip app:

1. Server-Side Render (SSR):
   Katnip renders the React component tree on the server into plain HTML and sends it to the browser. This makes the initial page load fast and SEO-friendly.

2. Client-Side Hydration:
   Once the JavaScript loads in the browser, Katnip re-runs the same React components on the client, attaching event handlers and making the page interactive.

   From this point on, the app behaves like a single-page app (SPA), without losing the benefits of SSR.

Example: A Simple Page

// pages/Home.jsx
export default function Home() {
  return (
    <div>
      <h1>Welcome to Katnip!</h1>
      <p>This page was rendered on the server, then hydrated on the client.</p>
    </div>
  );
}

This page:

• Is rendered to HTML on the server.
• Displays instantly in the browser.
• Then hydrates so that interactivity (links, buttons, inputs) works seamlessly.

Beyond SSR: Sharing State

Katnip goes further by allowing server-side values to be directly available during hydration using special hooks like useIsoRef and useIsoMemo.

Example: Passing Server Values to Client

import { useIsoRef } from "katnip";

export default function UserGreeting() {
  // value is set server-side, then synchronized to client
  let data = useIsoMemo(async()=>{
    return {username: "hello"}
  });

  return <h1>Hello, {username}!</h1>;
}

• On the server, username might be populated from the session or database.
• On the client, the same value is available immediately during hydration.
• You don’t need to write a separate API endpoint just to pass this small piece of data.

Why It Matters

Isomorphic rendering is powerful because it combines the best of both worlds:

• Performance → Fast first paint from the server.
• SEO → Search engines can read your pages without extra work.
• Developer Simplicity → Write components once; they run in both environments.
• Consistency → Server and client share not just code, but also state through Katnip’s isomorphic hooks.

This approach makes Katnip apps feel instantly alive while keeping development friction low.