Simple examples with Svelte Kit showing common web design patterns, with focus on server and client states management and synchronization.
basic example with home server rendered page and a prerendered page
live demo : https://svelte-basics.netlify.app/
global server counter, keep state on page reload as long as the same instance is running. All clients will increment the same counter.
- Sequence
- Project files
live demo : https://svelte-ssr-counter.netlify.app/
couter saved as a cookie, fetched, incremented and updated by the server
live demo : https://svelte-cookie-counter.netlify.app/
classical front end Cards counters. Each Card has a counter variable, all client side, resets on page reload, reactive DOM assignment.
live demo : https://svelte-client-counters.netlify.app/
SSE: Server Sent Events. global var using a timer and Emitter.
Server keeps couter state. Reloading the page has no effect on the counter states which just keeps counting independently.
This example is using both load functions on server and on client.
- Notes
requires Node18 Node18 for ReadableStream()
not serverless compatible
- Sequence
- Project files
simple example with markdown rendering
