What is the correct way to import a class and hydrate it after SSR?

[ghost]

I observed wired result during my hydration (if it ever happens)

File class.ts

import { nanoid } from 'nanoid';

class Template {
  id: string = nanoid();
}

export const t = new Template();

File +page.svelte:

<script lang="ts">
  import { t } from '../lib/class';
  console.log(t)
</script>
<h1>{JSON.stringify(t, null, 2)}</h1>

• What I am expecting:
  I am expecting that the result from console.log(t) on the server side terminal to print out an object during SSR. AND this object is exactly the same as shown in my browser.

• What did I see?
  I see different object from my server's terminal and in the rendered webpage.
  It almost seems that the SSR indeed happened but my browser just refused to use it to hydrate its content and re-runs the new Template() to build a new class instance.

Screenshot:

Reproduction:
https://stackblitz.com/edit/vitejs-vite-egzytf?file=my-app%2Fsrc%2Froutes%2F%2Bpage.svelte

[ghost]

Close as this is how hydration suppose to work. I was under the wrong impression that the hydration will avoid running the same code repetitively again during CSR, which is not what svelte-kit is designed for. The behavior that I am looking for fits Qwik framework better.