客户端渲染是使页面具有交互性的关键 — 比如在这个应用中点击按钮时增加计数器的值 — 并且使 SvelteKit 能够在导航时更新页面而无需完全重新加载页面。
与 ssr
一样,你可以完全禁用客户端渲染:
src/routes/+page.server
export const csr = false;
这意味着不会向客户端提供任何 JavaScript,但这也意味着你的组件将不再具有交互性。对于那些因某些原因无法使用 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>