Vite + SSR Svelte お試しメモ

概要:

Vite + SSR Svelteメモです。

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

[ 作成日: 2024/05/10 ]

---

環境

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

---

関連

• https://ja.vitejs.dev/guide/ssr.html

• https://github.com/bluwy/create-vite-extra

• https://github.com/bluwy/create-vite-extra/tree/master/template-ssr-svelte

---

• 上記の、template-ssr-svelte , SSR Svelteでした。
• server.js
• dev起動で、createServerを使用する
• express.jsで、ルーティング、 .svelteファイルを読込む。
• src/entry-server.ts , renderで、レンダリング
• render経由で、App.svelte 読込み、レスポンス出力する。

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)
  }
})