Fix the content flash problems with contexts

src/lib/Navbar.svelte

@@ -1,9 +1,9 @@
 <script>
-  import { user } from "./store";
+  export let user;
 </script>
 
 <header>
-  {#if $user}Logged in as {$user}!{:else}Not logged in{/if}
+  {#if user}Logged in as {user}!{:else}Not logged in{/if}
 </header>
 
 <hr />

src/routes/__layout.svelte

@@ -1,33 +1,28 @@
 <script context="module">
+  import { browser } from "$app/env";
   import { get } from "svelte/store";
   import { user } from "$lib/store";
 
   export async function load({ fetch, session }) {
-    console.log("load", session);
-
     if (!session.jwt) {
       return {
-        props: {
-          fetchedUser: false
-        }
+        props: { fetchedUser: false },
       };
     }
 
     const storedUser = get(user);
-    if (storedUser) {
+    if (browser && storedUser) {
       return {
-        props: {
-          fetchedUser: storedUser
-        }
+        props: { fetchedUser: storedUser },
       };
     }
 
     const res = await fetch("/user.json");
+    const fetchedUser = await res.text();
 
     return {
-      props: {
-        fetchedUser: await res.text()
-      }
+      props: { fetchedUser },
+      context: { fetchedUser },
     };
   }
 </script>
@@ -36,10 +31,10 @@
   import Navbar from "$lib/Navbar.svelte";
 
   export let fetchedUser;
-  if (fetchedUser) {
+  if (browser) {
     user.set(fetchedUser);
   }
 </script>
 
-<Navbar />
+<Navbar user={fetchedUser} />
 <slot />

src/routes/index.svelte

@@ -1,8 +1,21 @@
+<script context="module">
+  export async function load({ context }) {
+    return {
+      props: {
+        fetchedUser: context.fetchedUser
+      }
+    };
+  }
+</script>
+
 <script>
-  import { content, user } from "$lib/store";
+  import { user as userStore } from "$lib/store";
   import { session } from "$app/stores";
   import { goto } from "$app/navigation";
 
+  export let fetchedUser;
+  $: user = $userStore || fetchedUser;
+
   function setCookie(name, value) {
     document.cookie = name + "=" + value + "; max-age=31536000; path=/";
   }
@@ -16,7 +29,7 @@
 
 <h1>Welcome to SvelteKit</h1>
 
-{#if $user}
+{#if user}
   <p>
     <a href="/protected">protected</a>
   </p>

src/routes/protected/__layout.svelte

@@ -1,40 +1,42 @@
 <script context="module">
+  import { browser } from "$app/env";
   import { get } from "svelte/store";
   import { content } from "$lib/store";
   import Navbar from "$lib/Navbar.svelte";
 
   export async function load({ fetch, session }) {
+    // Redirect if not logged in
     if (!session.jwt) {
       return {
         status: 302,
         redirect: "/"
       };
     }
 
+    // If we already have the content, then don't fetch it again
     const storedContent = get(content);
-
-    if (storedContent) {
+    if (browser && storedContent) {
       return {
-        props: {
-          fetchedContent: storedContent
-        }
+        props: { fetchedContent: storedContent }
       };
     }
 
+    // Fetch remote content, give it back as a prop AND context
     const res = await fetch("/protected.json");
+    const fetchedContent = await res.text();
 
     return {
-      props: {
-        fetchedContent: await res.text()
-      }
+      props: { fetchedContent },
+      context: { fetchedContent }
     };
   }
 </script>
 
 <script>
   export let fetchedContent;
 
-  if (fetchedContent) {
+  // If we're running in the browser, then we can save the fetched content in the store
+  if (browser) {
     $content = fetchedContent;
   }
 </script>

src/routes/protected/index.svelte

@@ -1,10 +1,28 @@
+<script context="module">
+  // Forward all context to the props
+  export async function load({ context }) {
+    return { props: context };
+  }
+</script>
+
 <script>
-  import { content } from "$lib/store";
+  import { user as userStore, content as contentStore } from "$lib/store";
+  export let fetchedContent;
+  export let fetchedUser;
+
+  // The magic sauce: use the content in the store, but fallback to the context,
+  // which is needed for SSR.
+  $: content = $contentStore || fetchedContent;
+  $: user = $userStore || fetchedUser;
 </script>
 
-<p>Reload your browser and you'll see the old content briefly appear.</p>
-<p>{$content}</p>
+<p>
+  Hello {user}! Reload your browser and you'll see the old content briefly
+  appear.
+</p>
+<p>{content}</p>
 
 <p>
+  <a href="/">home</a>
   <a href="/protected/subpage">subpage</a>
 </p>

src/routes/protected/subpage.svelte

@@ -1,12 +1,22 @@
+<script context="module">
+  export async function load({ context }) {
+    return { props: context };
+  }
+</script>
+
 <script>
-  import { content } from "$lib/store";
+  import { user as userStore, content as contentStore } from "$lib/store";
+  export let fetchedContent;
+  export let fetchedUser;
+  $: content = $contentStore || fetchedContent;
+  $: user = $userStore || fetchedUser;
 </script>
 
 <p>
-  This should show the same content
+  Hi {user}, this should show the same content
   <b>without doing another request to the REST server.</b>
 </p>
-<p>{$content}</p>
+<p>{content}</p>
 
 <p>
   <a href="/protected">back</a>