SvelteKit SSR Toggle Demo

A simple demonstration of toggleable Server-Side Rendering (SSR) in a SvelteKit-style application built on Val Town.

• Toggleable SSR: Switch between Server-Side Rendering and Single Page Application modes
• Real-time Mode Display: See which rendering mode is currently active
• Client-side Updates: Test client-side reactivity in both modes
• Responsive Design: Built with Tailwind CSS for a clean, modern interface

• Content is rendered on the server
• Initial HTML includes pre-rendered content
• Better for SEO and initial page load performance
• Server provides initial data via window.__INITIAL_DATA__

• Content is rendered entirely on the client
• Faster subsequent navigation
• More app-like user experience
• Client handles all rendering after initial page load

1. Visit the application
2. Click "Switch to SPA/SSR" to toggle between modes
3. Use "Update Client Data" to test client-side reactivity
4. Notice the differences in rendering behavior

• Backend: Hono server with Deno runtime
• Frontend: Svelte components with TypeScript
• Styling: Tailwind CSS via CDN
• State Management: Svelte reactive stores
• API: RESTful endpoint for mode toggling

├── main.tsx              # Main server entry point
├── frontend/
│   ├── index.html        # HTML template
│   ├── index.js          # Frontend entry point
│   └── components/
│       └── App.svelte    # Main application component
└── README.md            # This file

• GET / - Main application (supports ?mode=ssr|spa)
• GET /api/toggle-ssr - Toggle SSR mode
• GET /frontend/* - Static file serving

This application runs on Val Town's Deno runtime with automatic deployment and hosting.