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

• 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)

• /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

• 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