AstroでReact Flowを使いたいぞという話

はじめに

React Flowに一目惚れしたので、このブログでも使ってみたい。 Hello Astroで素のReactが動くことは確かめたのだけど、このクラスのライブラリが動くかどうかは分からないので、ちょっとチャレンジングな課題。

pnpm install

まずは、React Flowをインストールする。

pnpm install reactflow

ローカルサーバーを起動してみる。

pnpm run dev

普通に立ち上がってきた。インストールしただけで壊れるということはなかったようです。

mdxで使ってみる

Creating your first flowの例をやってみる。

import ReactFlow from 'reactflow';

import 'reactflow/dist/style.css';

const initialNodes = [
  { id: '1', position: { x: 10, y: 10 }, data: { label: '1' } },
  { id: '2', position: { x: 10, y: 100 }, data: { label: '2' } },
];
const initialEdges = [{ id: 'e1-2', source: '1', target: '2' }];

export default function App() {
  return (
    <div style={{ border: '1px solid', width: '100%', height: '500px' }}>
      <ReactFlow nodes={initialNodes} edges={initialEdges} />
    </div>
  );
}

これを src/components/SimpleReactflow.tsx で保存して、以下のようにmdxに埋め込む。

import App from '../../../components/SimpleReactflow.tsx'

<App client:only />

。。。普通に動いてしまった。。なんだこれ、Astro最高だな。

とはいえ実は一回失敗していた。 cliend:load を指定するとビルド時にAstroが落ちてしまった。 SSRに対応してないのかな？ということで client:only を指定してgot事無き。

まとめ

予想外にさくっと動いてしまったのでびっくりしてしまいました。

たしかにhugoよりもページ生成速度は少し遅いですが、十分速いですし、出来上がったページはhugoと遜色ないです。(ゼロjsなので)

それでいてこんな感じにReactが普通に動くのは夢が広がります。みなさんも試してみてください。