By default sveltekit does SSR followed by CSR, so when I try to access window
object from the server side I get an error as expected.
<script lang="ts"> import { browser } from "$app/environment"; async function hello_world() { console.log(`hello world from: ${browser ? "client" : "server"}`); console.log(window.localStorage); console.log("after accessing localStorage"); } hello_world();</script><p>Hello World!</p>
ReferenceError: window is not defined
However, if I use the await
block, then sveltekit seems to magically skip the block of code that would cause the error + all following lines.
<script lang="ts"> import { browser } from "$app/environment"; async function hello_world() { console.log(`hello world from: ${browser ? "client" : "server"}`); console.log(window.localStorage); console.log("after accessing localStorage"); }</script>{#await hello_world()}<p>Hello World!</p>{/await}
hello world from: client<Storage object>after accessing localStorage
hello world from: server
I was expecting both cases to result in the same ReferenceError, so I would like to understand why and how await
causes sveltekit to skip not only the problematic code but also the lines following it.