svelte5でsveltekit使わずに自前のssrをしてみる

reactなら情報が溢れているけど、svelteだとどうだろうというのをずっと思っていた、今日自前のやってみて案外簡単ってことががわかったので、書いておこうと思います。

svelte5前提での話です。

reactの場合

コンポーネント

export function Comp() {
  return <p/>
}

サーバーでのhtml化

import {rendertoString} from 'react-dom/server'
import {Comp} from './Comp';

const html = renderToString(Comp);

ここででたhtmlをそのままclientにstatic htmlとして返す

clientでサーバーからもらったhtmlをhydrateする

import {hydrateRoot} from 'react-dom/client'
import {Comp} from './Comp';
hydrateRoot(document.querySelector('#app')).render(Comp);

---

svelteの場合

clientコンポーネント

Comp.svelte

<script lang="ts">
    let word = $state('hello');
</script>

<p>{word}</p>

これをそのままJSの世界でマウントさせる

import {mount, unmount} from 'svelte'
import Comp from './Comp.svelte'; 
const svelteComponent = mount(Comp, {target: document.body, props: {}});

// 破壊する時
unmount(svelteComponent);

サーバーでのhtml化

import {render} from 'svelte/server'
import Comp from './Comp.svelte'; 
const {body} = render(Comp, {props: {}});

// bodyにhtmlが返ってくる

clientでhydrate

hydarte.ts

import {hydrate} from 'svelte';
import Comp from './Comp.svelte';

hydrate(Comp, {target: document.body, props: {}});

sveltekitで再現してみる

sveltekit使いますが、sveltekitに備わっているssrを使わないで再現します。

Counter.svelte

routes/+page.server.js

routes/+page.svelte

結果

その他

ほぼreactと一緒だったけど、svetleではmout関数をそのままサーバーで呼ぼうとするとこういうエラーが出てしまう。

mount(...) is not available on the server