Basic Svelte
Introduction
Bindings
Advanced Svelte
Advanced reactivity
Motion
Advanced bindings
Advanced transitions
Context API
Special elements
<script module>
Next steps
Basic SvelteKit
Introduction
Routing
Loading data
Headers and cookies
Shared modules
API routes
Stores
Errors and redirects
Advanced SvelteKit
Page options
Link options
Advanced routing
Advanced loading
Environment variables
Conclusion
Client-side rendering is what makes the page interactive — such as incrementing the counter when you click the button in this app — and enables SvelteKit to update the page upon navigation without a full-page reload.
As with ssr, you can disable client-side rendering altogether:
src/routes/+page.server
export const csr = false;This means that no JavaScript is served to the client, but it also means that your components are no longer interactive. It can be a useful way to check whether or not your application is usable for people who — for whatever reason — cannot use JavaScript.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script>
import { browser } from '$app/environment';let count = $state(0);
function increment() {count += 1;
}
</script>
<h1>Rendered {browser ? 'in the browser' : 'on the server'}</h1><button onclick={increment}> Clicks: {count}</button>