🍵

Astro + Svelte 試す

2023/01/22に公開約2,600字

概要:

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 読込む


  • 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="{&quot;class&quot;:[0,&quot;astro-RD4KVJ2A&quot;]}" ssr="" client="visible" before-hydration-url="/@id/astro:scripts/before-hydration.js" opts="{&quot;name&quot;:&quot;Counter&quot;,&quot;value&quot;: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

ログインするとコメントできます