wolf
README.md

Simple Number App with Server-Side Rendering

A minimal example demonstrating:

  • React Router for server-side rendering and client-side hydration
  • Hono RPC for data fetching with a Hono API
  • Simple in-memory number storage

Features

  • Server-Side Rendering: Initial HTML is rendered on the server
  • Client Hydration: App becomes interactive on the client
  • Home Page: Simple landing page with a button to navigate to the Number page
  • Number Page: View and update a number using Hono RPC (honorpc)

Project Structure

  • /routes: Contains all route components and loaders
    • /routes/index.tsx: Root layout and route definitions
    • /routes/home.tsx: Home page component
    • /routes/number.tsx: Number page component with loader
  • /client.tsx: Client-side hydration entry point
  • /server.tsx: Server-side rendering entry point
  • /backend/routes/data.ts: API endpoints for number operations

Implementation Details

  • Uses React Router's StaticRouter for server-side rendering
  • Uses React Router's BrowserRouter for client-side hydration
  • The backend stores a number in memory
  • The frontend uses Hono RPC to fetch and update the number
  • Routes and loaders are co-located in the routes directory