Zenn
Open1

Vite + SSR Svelte お試しメモ

Svelte
Express
Vite
knaka Tech-Blogknaka Tech-Blog

概要

Vite + SSR Svelteメモです。

  • vite記事を参考に、SSR Svelte 構築する内容となります。
  • テストは、stackblitz.com　で確認しました。
  • 今回は。紹介記事的な内容になります 。何も作成しないので、調査内容メモとなります

[ 公開: 2024/05/10]

環境

  • Vite 5.2
  • Svelte 4.2
  • express.js
  • typescript 5.4

関連

  • 上記の、template-ssr-svelte , SSR Svelteでした。
  • server.js
  • dev起動で、createServerを使用する
  • express.jsで、ルーティング、 .svelteファイルを読込む。
  • src/entry-server.ts , renderで、レンダリング
  • render経由で、App.svelte 読込み、レスポンス出力する。
server.js
app.use('*', async (req, res) => {
  try {
    const url = req.originalUrl.replace(base, '')

    let template
    let render
    if (!isProduction) {
      // Always read fresh template in development
      template = await fs.readFile('./index.html', 'utf-8')
      template = await vite.transformIndexHtml(url, template)
      render = (await vite.ssrLoadModule('/src/entry-server.ts')).render
    } else {
      template = templateHtml
      render = (await import('./dist/server/entry-server.js')).render
    }

    const rendered = await render(url, ssrManifest)

    const html = template
      .replace(`<!--app-head-->`, rendered.head ?? '')
      .replace(`<!--app-html-->`, rendered.html ?? '')

    res.status(200).set({ 'Content-Type': 'text/html' }).send(html)
  } catch (e) {
    vite?.ssrFixStacktrace(e)
    console.log(e.stack)
    res.status(500).end(e.stack)
  }
})