4. (optional): When using SSRs, this may not be sufficient.  
   When rendering svelte components on the server, the server's cookie cannot be accessed directly, which may result in display flickering.  
   To solve this, you need to pass the cookie `pie` from +layout.server.js, etc. and make it the `dough` of `rebake` .

```ts
// +layout.server.ts
import { bake } from './bakery.js'

export const load = ({ cookies }) => {
  const { bakedCookies, pie } = bake(cookies)

  // ...

  return {
    pie
  }
}

<!-- +layout.svelte -->
<script>
  import { rebake } from './bakery.js'

  export let data

  $: ({ pie } = data)

  $: cookies = rebake(pie)

  // key1: Writable<string>
  // key2: Writable<number>
  // key3: Writable<string[]>
  $: { key1, key2, key3 } = cookies
</script>

This is optional, but it provides full consistency and typed cookie access to the application.