ホームページ > 記事 > ウェブフロントエンド > SSR を使用してリアクティブ Web コンポーネントを構築する
SSR を使用してリアクティブ Web コンポーネントを構築する
- WBOYオリジナル
- 2024-08-24 11:22:06316ブラウズ
Web コンポーネントを記述する従来の方法は、SSR (サーバー サイド レンダリング) にあまり適していません。この投稿では、SSR および任意の JavaScript フレームワーク (Vue、React、Svelte、Solid、Brisa) または Vanilla JS で動作するリアクティブ Web コンポーネントを構築する方法を説明します。
- はじめに
- Brisa を使用して Web コンポーネントを作成する
- Web コンポーネントの構築
- Vanilla JS プロジェクトに Web コンポーネントをロードする
- Web コンポーネントの SSR
- ブリサについてもっと教えてください...お願いします...
- Web コンポーネント ライブラリ作成者向けのメモ
- 例
- 結論
導入
Brisa Web Component Compiler を使用します。 Brisa は、Next.js や Nuxt.js などの他のフレームワークに似ていることに加えて、JSX や SSR を使用してリアクティブ性のシグナルを操作するリアクティブな Web コンポーネントを構築できる Web フレームワークです。
これを行うには、Web コンポーネントを作成するときに Brisa の構文を知っているだけで済みます。 Brisa は現在 v0.1 ルートマップの 95.48% であるため、まだ公開されていませんが、1 か月以内にリリースの準備が整い、誰もがアクセスできるようになると推定しています。ただし、まったく公開されていない場合でも、それを使用して独自の Web コンポーネント ライブラリを作成できます。
Brisa を使用した Web コンポーネントの作成
例として、いつものように、古典的な例であるカウンターの Web コンポーネントを作成します。
counter-wc.tsx
import type { WebContext } from "brisa";
export default function CounterWC(
{ start = 0, color = "#2cebcf" }: { start?: number; color?: string },
{ state, css }: WebContext,
) {
const count = state(start);
css`
button {
background-color: ${color};
color: white;
border: none;
border-radius: 5px;
padding: 10px;
margin: 5px;
cursor: pointer;
}
div {
display: flex;
justify-content: center;
align-items: center;
}
`;
return (
<div>
<button onClick={() => count.value++}>+</button>
{count.value}
<button onClick={() => count.value--}>-</button>
</div>
);
}
Brisa はファイル名を使用してセレクターを認識します。ここではセレクターは counter-wc になります。
ヒント: Brisa はまだ公開されていませんが、TypeScript タイプを使用して Web コンポーネントの作成方法をガイドできます。
上記の例では、state を使用してシグナルを作成し、.value を使用して JSX 内でシグナルをリアクティブにします。 props は読み取り専用であるため、特別なシグナルでもあります。.value は、使いやすくし、デフォルト値をより簡単に定義するために使用されません。これは、React が機能するのと同様に、ビルド時の最適化によって行われます。彼らが信号を使用していれば、その逆です。
CSS テンプレート リテラルにより、この場合の color プロパティのリアクティブな変更に反応できるようになります。この例以外の CSS テンプレート リテラルは、リアクティブ アニメーションを簡単に作成するのに非常に役立ちます。 Web コンポーネントは Shadow DOM で動作するため、CSS はページの残りの部分には影響を与えないことに留意することが重要です。
Web コンポーネントの構築
Web コンポーネントを構築するには、次のコマンドを実行する必要があります:
brisa build -w counter-wc.tsx
このコマンドは 2 つのファイルを生成します:
[ wait ] ? building your standalone components... [ info ] [ info ] Standalone components: [ info ] - build/counter-wc.client.js (670.00 B) [ info ] - build/counter-wc.server.js (842.00 B) [ info ] [ info ] ✨ Done in 42.20ms.
これらのファイルは Web コンポーネントではなく、ビルド時に可能な限り軽くなるように最適化された Web コンポーネントのレンダリング機能にすぎません (出力されるバイトは gzip なしです).
では、Web コンポーネントをロードするにはどうすればよいでしょうか?
Vanilla JS プロジェクトへの Web コンポーネントのロード
これを行うには、brisa/client を使用して HTML に importmap を追加し、counter-wc.client.js ファイルをインポートする必要があります。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Brisa Web Component Example</title>
<script type="importmap">
{
"imports": {
"brisa/client": "https://unpkg.com/brisa@latest/client-simplified/index.js"
}
}
</script>
<script type="module" src="https://unpkg.com/counter-wc@latest"></script>
</head>
<body>
<counter-wc start="15"></counter-wc>
</body>
</html>
ここでは、レンダリング部分のみが各 Web コンポーネント ファイルに移植されますが、それらはすべてインポートマップで定義された同じ Brisa ラッパーを使用します。これは、シグナルとシャドウ DOM を含む Web コンポーネントの作成を担当します。
WebコンポーネントのSSR
宣言型 Shadow DOM のおかげで、Web コンポーネントの SSR を実行できるようになりました。 counter-wc.server.js ファイルはすでにこの動作を使用してコンパイルされているため、サーバーにインポートして HTML にレンダリングし、サーバー フレームワークに適合させるだけで済みます。
JSX を使用せずに Bun.js または Node.js を使用した例を次に示します。
ssr.js
import { renderToString } from "brisa/server";
import { jsx } from "brisa/jsx-runtime";
import CustomCounter from "counter-wc/server";
const html = `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Brisa Web Component Example</title>
<script type="importmap">
{
"imports": {
"brisa/client": "https://unpkg.com/brisa@latest/client-simplified/index.js"
}
}
</script>
<script type="module" src="https://unpkg.com/counter-wc@latest"></script>
</head>
<body>
${await renderToString(jsx(CustomCounter, { start: 10 }))}
</body>
</html>
`;
console.log(html);
次に、bun run ssr.js を実行すると、宣言型 Shadow DOM を使用してレンダリングされた Web コンポーネントを含む HTML が表示されます。
ブリサについてもっと教えてください...お願いします...
これらの Web コンポーネント ライブラリと Brisa の統合は、構成ファイルを通じて行われます。
import type { WebComponentIntegrations } from "brisa";
export default {
"custom-counter": {
client: "./path/to/web-component.client.js",
server: "./path/to/web-component.server.js",
types: "./path/to/web-component.types.d.ts",
},
} satisfies WebComponentIntegrations;
このようにして、SSR および TypeScript タイプがプロジェクトに自動的に統合されます。また、Web コンポーネントは、任意のサーバー コンポーネント内または別の Web コンポーネント内で使用できます。
さらに詳しく知りたい場合は、Brisa のニュースレターを購読して、Brisa に関する最新ニュースと更新情報を受け取ることをお勧めします。 9月末までには発売の準備が整うと予想しています。
Note for Web Component library creators
We encourage you to try Brisa to create your own Web Component libraries. If you put the "made with Brisa" badge, we will put a link to your library on the Brisa page.
<a href="https://brisa.build" target="_blank" rel="noopener noreferrer">
<img
width="150"
height="42"
src="https://aralroca.com/images/blog-images/brisa_badge.svg"
alt="Made with Brisa"
/>
</a>
Example
If you want to see the GitHub repository of the example of the counter that we have explained in this article, you can take a look and use it as a reference for your own creations:
- https://github.com/aralroca/counter-wc
Conclusion
In this post, we have seen how to build reactive Web Components that work with SSR and with any JavaScript framework or Vanilla JS. We have used Brisa to build the Web Component and we have seen how to load it in a Vanilla JS project and how to do SSR with it.
I hope you have enjoyed this post and that you have learned something new. If you have any questions, do not hesitate to ask me in the comments below. I will be happy to help you.
Happy coding and enjoy the rest of the summer! ??
以上がSSR を使用してリアクティブ Web コンポーネントを構築するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。