Defensives isomorphes Design mit Browser-Checks

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

import { browser } from '$app/environment';
import { onMount } from 'svelte';
 
let storageValue;
 
// Expert Pattern: Prevent SSR crashes
if (browser) {
  storageValue = localStorage.getItem('user_prefs');
}
 
onMount(() => {
  // Guaranteed to run only on client
  const width = window.innerWidth;
  console.log('Client-only logic:', width);
});

svelte

Erklärung

import { browser }

SvelteKit-spezifischer Boolean, der nur wahr ist, wenn er im Browser des Benutzers läuft.

if (browser) { ... }

Schützt die Skriptausführung auf oberster Ebene vor dem Verweisen auf APIs, die in Node.js nicht existieren.

Vorheriges Snippet Nächstes Snippet

Mehr JavaScript-Übungen für Experten →

Verwandt

Aus deiner Bibliothek