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
$app/state
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>