Skip to main content
基本 Svelte
介绍
反应性
属性
逻辑
事件
绑定
类和样式
动作
转换
高级 Svelte
高级反应性
重用内容
运动
高级绑定
高级转换
上下文 API
特殊元素
<script module>
后续步骤
基本 SvelteKit
介绍
路由
加载数据
标题和 cookie
共享模块
表单
API 路由
$app/state
错误和重定向
高级 SvelteKit
钩子
页面选项
链接选项
高级路由
高级加载
环境变量
结论

客户端渲染使页面具有交互性(例如,当你单击此应用中的按钮时增加计数器),并使 SvelteKit 能够在导航时更新页面而无需重新加载整个页面。

¥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.

ssr 一样,你可以完全禁用客户端渲染:

¥As with ssr, you can disable client-side rendering altogether:

src/routes/+page.server
export const csr = false;

这意味着没有 JavaScript 提供给客户端,但也意味着你的组件不再具有交互性。它可以是一种有用的方法来检查你的应用是否可供那些出于某种原因无法使用 JavaScript 的人使用。

¥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>