コンテンツにスキップ

@astrojs/ solid-js

このAstroインテグレーションは、SolidJSコンポーネントのレンダリングとクライアントサイドハイドレーションを有効にします。

Astroには、公式インテグレーションのセットアップを自動化するためのastro addコマンドが含まれています。もしよろしければ、手動でインテグレーションをインストールすることもできます。

@astrojs/solid-jsをインストールするには、プロジェクトディレクトリから次のコマンドを実行し、プロンプトに従ってください。

ターミナルウィンドウ
npx astro add solid

問題が発生した場合は、GitHubで報告してください。そして、以下の手動インストール手順を試してください。

まず、@astrojs/solid-jsパッケージをインストールします。

ターミナルウィンドウ
npm install @astrojs/solid-js

ほとんどのパッケージマネージャーは、関連するピア依存関係もインストールします。Astroの起動時にCannot find package 'solid-js'(または同様の)警告が表示される場合は、SolidJSをインストールする必要があります。

ターミナルウィンドウ
npm install solid-js

次に、integrationsプロパティを使用して、インテグレーションをastro.config.*ファイルに適用します。

astro.config.mjs
import { defineConfig } from 'astro/config';
import solidJs from '@astrojs/solid-js';
export default defineConfig({
// ...
integrations: [solidJs()],
});

そして、次のコードをtsconfig.jsonファイルに追加します。

tsconfig.json
{
"extends": "astro/tsconfigs/strict",
"include": [".astro/types.d.ts", "**/*"],
"exclude": ["dist"],
"compilerOptions": {
"jsx": "preserve",
"jsxImportSource": "solid-js"
}
}

Astroで最初のSolidJSコンポーネントを使用するには、UIフレームワークのドキュメントにアクセスしてください。以下について探求します。

  • 📦 フレームワークコンポーネントがどのように読み込まれるか
  • 💧 クライアントサイドハイドレーションのオプション
  • 🤝 フレームワークを混在させてネストする機会

追加: @astrojs/solid-js@4.2.0

solid()インテグレーション設定にdevtools: trueを持つオブジェクトを渡し、プロジェクトの依存関係にsolid-devtoolsを追加することで、開発中にSolid DevToolsを有効にできます。

ターミナルウィンドウ
npm install solid-devtools
astro.config.mjs
import { defineConfig } from 'astro/config';
import solid from '@astrojs/solid-js';
export default defineConfig({
// ...
integrations: [solid({ devtools: true })],
});

複数のJSXフレームワークの組み合わせ

Section titled “複数のJSXフレームワークの組み合わせ”

同じプロジェクトで複数のJSXフレームワーク(React、Preact、Solid)を使用している場合、Astroは各コンポーネントにどのJSXフレームワーク固有の変換を使用するかを決定する必要があります。プロジェクトにJSXフレームワークインテグレーションを1つしか追加していない場合は、追加の設定は必要ありません。

include(必須)およびexclude(オプション)設定オプションを使用して、どのファイルがどのフレームワークに属するかを指定します。使用している各フレームワークのincludeにファイルおよび/またはフォルダーの配列を指定します。ワイルドカードを使用して、複数のファイルパスを含めることができます。

インクルードの指定を容易にするために、共通のフレームワークコンポーネントを同じフォルダー(例:/components/react/および/components/solid/)に配置することをお勧めしますが、これは必須ではありません。

astro.config.mjs
import { defineConfig } from 'astro/config';
import preact from '@astrojs/preact';
import react from '@astrojs/react';
import svelte from '@astrojs/svelte';
import vue from '@astrojs/vue';
import solid from '@astrojs/solid-js';
export default defineConfig({
// あらゆる種類のコンポーネントをサポートするために多くのフレームワークを有効にします。
// 単一のJSXフレームワークのみを使用している場合は、`include`は必要ありません!
integrations: [
preact({
include: ['**/preact/*'],
}),
react({
include: ['**/react/*'],
}),
solid({
include: ['**/solid/*', '**/node_modules/@suid/material/**'],
}),
],
});

SolidJSコンポーネントは、他のUIフレームワークコンポーネントと同じように使用します。

過剰な設定なしでSolidのResourceとLazy Componentsをサポートするために、サーバーのみのコンポーネントとハイドレーティングコンポーネントは、自動的にトップレベルのSuspense boundaryでラップされ、renderToStringAsync関数を使用してサーバーでレンダリングされます。したがって、非同期コンポーネントの周りにトップレベルのSuspense boundaryを追加する必要はありません。

たとえば、SolidのcreateResourceを使用して、サーバーで非同期のリモートデータをフェッチできます。リモートデータは、Astroからの最初のサーバーでレンダリングされたHTMLに含まれます。

CharacterName.tsx
function CharacterName() {
const [name] = createResource(() =>
fetch('https://swapi.dev/api/people/1')
.then((result) => result.json())
.then((data) => data.name)
);
return (
<>
<h2>Name:</h2>
{/* Luke Skywalker */}
<div>{name()}</div>
</>
);
}

同様に、SolidのLazy Componentsも解決され、そのHTMLは最初のサーバーでレンダリングされたページに含まれます。

ハイドレートしないclient:onlyコンポーネントは、自動的にSuspense boundaryでラップされません。

好みに応じて、Suspense boundaryを自由に追加してください。

他のインテグレーション

UIフレームワーク

SSRアダプター

その他

貢献する コミュニティ スポンサー