SvelteKit learning

• Distinct server-code and client-code
• Reactivity (WatchEffect) with "$:"

<script context="module" lang="ts">
  import type { Page } from "@sveltejs/kit";
  export const prerender = true;
  //code executed on server side
  export async function load(page: Page) {
    //console.log(page.params);
    const computeOnServer: string = "this value is computed on Server side";
    return { props: { computeOnServer } };
  }
</script>

<script lang="ts">
  import { _ } from "svelte-i18n";
  export let computeOnServer: string;
  let foo: string = computeOnServer;
  let bar: string = "nani";
  $: {
    let sao = foo + bar;
    console.log(sao);
  }
</script>

<svelte:head>
  <title>{$_("nav.home")}</title>
  <meta name="description" content="Eklo" />
</svelte:head>

<section>
  <input type="text" bind:value={foo} />
  <input type="text" bind:value={bar} />
</section>