🍵
Astro + Svelte 試す
概要:
Astro に、svelte追加（というか組み込むイメージ）で、SSRできるらしいので。試したメモです。
- VS code機能拡張は、Astro使いました。
構成
- Astro
- Svelte
参考
install
npm create astro@latest
⇒この後、プロジェクト名入力
yarn astro add svelte
- 設定: astro.config.mjs
import svelte from '@astrojs/svelte';
import { defineConfig } from "astro/config";
// https://astro.build/config
export default defineConfig({
// ...
integrations: [svelte()]
});
- 起動
yarn dev
Svelte components 読込む
-
Astro - examples 参考
-
https://github.com/withastro/astro/tree/main/examples/framework-svelte
- astoro: index.astro
---
// Component Imports
import Counter from '../components/Counter.svelte';
// Full Astro Component Syntax:
// https://docs.astro.build/core-concepts/astro-components/
---
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<style>
html,
body {
font-family: system-ui;
margin: 0;
}
body {
padding: 2rem;
}
</style>
</head>
<body>
<main>
<h1>Asrtro + svelte, sample</h1>
<hr />
<Counter client:visible>
<h1>Hello, Svelte!</h1>
</Counter>
</main>
</body>
</html>
- importは下記
import Counter from '../components/Counter.svelte';
- 出力ページのコード、astro-island内に、svelte部分が出力されました。
<astro-island uid="Zk4OKq" component-url="/@fs/home/naka/work/node/extra/astro/astro_svelte/src/components/Counter.svelte"
component-export="default" renderer-url="/@fs/home/naka/work/node/extra/astro/astro_svelte/node_modules/.vite/deps/@astrojs_svelte_client__js.js?v=6c9c85d8" props="{"class":[0,"astro-RD4KVJ2A"]}" ssr="" client="visible" before-hydration-url="/@id/astro:scripts/before-hydration.js" opts="{"name":"Counter","value":true}" await-children="">
<h3 class="s-IzV-sSXZQfhU">Counter.svelte</h3>
<hr class="s-IzV-sSXZQfhU">
<div class="counter s-IzV-sSXZQfhU"><button class="s-IzV-sSXZQfhU">-</button>
<pre class="s-IzV-sSXZQfhU">0</pre>
<button class="s-IzV-sSXZQfhU">+</button></div>
<div class="message s-IzV-sSXZQfhU"><astro-slot><h1 class="astro-RD4KVJ2A">Hello, Svelte!</h1></astro-slot>
</div>
</astro-island>
- 画面
Deploy
- vercelに、deployできました。
まとめ
- Svelteが、SPA (CSR)で、SSRできない。
- Astroに組み込むとSSR, SSGとか可能になるみたいですね。
....
Discussion