このページとあなたの好きなAIアシスタントを使ってドキュメントを要約します
このページのコンテンツはAIを使用して翻訳されました。
英語の元のコンテンツの最新バージョンを見るこのドキュメントを改善するアイデアがある場合は、GitHubでプルリクエストを送信することで自由に貢献してください。
ドキュメントへのGitHubリンクドキュメントのMarkdownをクリップボードにコピー
import PackageManagerTabs from '/components/tabs/PackageManagerTabs.astro';
import Since from '/components/Since.astro';
このAstroインテグレーションは、SolidJSコンポーネントのレンダリングとクライアントサイドハイドレーションを有効にします。
インストール
Astroには、公式インテグレーションのセットアップを自動化するためのastro addコマンドが含まれています。もしよろしければ、手動でインテグレーションをインストールすることもできます。
@astrojs/solid-jsをインストールするには、プロジェクトディレクトリから次のコマンドを実行し、プロンプトに従ってください。
問題が発生した場合は、GitHubで報告してください。そして、以下の手動インストール手順を試してください。
手動インストール
まず、@astrojs/solid-jsパッケージをインストールします。
ほとんどのパッケージマネージャーは、関連するピア依存関係もインストールします。Astroの起動時にCannot find package 'solid-js'（または同様の）警告が表示される場合は、SolidJSをインストールする必要があります。
次に、integrationsプロパティを使用して、インテグレーションをastro.config.*ファイルに適用します。
コードをクリップボードにコピー
import { defineConfig } from 'astro/config';import solidJs from '@astrojs/solid-js';export default defineConfig({ // ... integrations: [solidJs()],});そして、次のコードをtsconfig.jsonファイルに追加します。
コードをクリップボードにコピー
{ "extends": "astro/tsconfigs/strict", "include": [".astro/types.d.ts", "**/*"], "exclude": ["dist"], "compilerOptions": { "jsx": "preserve", "jsxImportSource": "solid-js" }}はじめに
Astroで最初のSolidJSコンポーネントを使用するには、UIフレームワークのドキュメントにアクセスしてください。以下について探求します。
- 📦 フレームワークコンポーネントがどのように読み込まれるか
- 💧 クライアントサイドハイドレーションのオプション
- 🤝 フレームワークを混在させてネストする機会
設定
devtools
solid()インテグレーション設定にdevtools: trueを持つオブジェクトを渡し、プロジェクトの依存関係にsolid-devtoolsを追加することで、開発中にSolid DevToolsを有効にできます。
コードをクリップボードにコピー
import { defineConfig } from 'astro/config';import solid from '@astrojs/solid-js';export default defineConfig({ // ... integrations: [solid({ devtools: true })],});オプション
複数のJSXフレームワークの組み合わせ
同じプロジェクトで複数のJSXフレームワーク（React、Preact、Solid）を使用している場合、Astroは各コンポーネントにどのJSXフレームワーク固有の変換を使用するかを決定する必要があります。プロジェクトにJSXフレームワークインテグレーションを1つしか追加していない場合は、追加の設定は必要ありません。
include（必須）およびexclude（オプション）設定オプションを使用して、どのファイルがどのフレームワークに属するかを指定します。使用している各フレームワークのincludeにファイルおよび/またはフォルダーの配列を指定します。ワイルドカードを使用して、複数のファイルパスを含めることができます。
インクルードの指定を容易にするために、共通のフレームワークコンポーネントを同じフォルダー（例：/components/react/および/components/solid/）に配置することをお勧めしますが、これは必須ではありません。
コードをクリップボードにコピー
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フレームワークコンポーネントと同じように使用します。
Suspense Boundaries
過剰な設定なしでSolidのResourceとLazy Componentsをサポートするために、サーバーのみのコンポーネントとハイドレーティングコンポーネントは、自動的にトップレベルのSuspense boundaryでラップされ、renderToStringAsync関数を使用してサーバーでレンダリングされます。したがって、非同期コンポーネントの周りにトップレベルのSuspense boundaryを追加する必要はありません。
たとえば、SolidのcreateResourceを使用して、サーバーで非同期のリモートデータをフェッチできます。リモートデータは、Astroからの最初のサーバーでレンダリングされたHTMLに含まれます。
コードをクリップボードにコピー
// CharacterName.tsxfunction 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を自由に追加してください。