javascript / expert
Snippet
Defensives isomorphes Design mit Browser-Checks
In Server-Side Rendering (SSR) Umgebungen führt der Zugriff auf browser-spezifische Globals wie 'window' oder 'localStorage' außerhalb von Lifecycle-Hooks zu Server-Abstürzen. Die Verwendung des '$app/environment' Browser-Flags oder 'onMount' stellt sicher, dass Code nur im entsprechenden Kontext ausgeführt wird, was die isomorphe Stabilität wahrt.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { browser } from '$app/environment';import { onMount } from 'svelte';let storageValue;// Expert Pattern: Prevent SSR crashesif (browser) {storageValue = localStorage.getItem('user_prefs');}onMount(() => {// Guaranteed to run only on clientconst width = window.innerWidth;console.log('Client-only logic:', width);});
svelte
Erklärung
1
import { browser }
SvelteKit-spezifischer Boolean, der nur wahr ist, wenn er im Browser des Benutzers läuft.
2
if (browser) { ... }
Schützt die Skriptausführung auf oberster Ebene vor dem Verweisen auf APIs, die in Node.js nicht existieren.