SSR を使用してリアクティブ Web コンポーネントを構築する-jsチュートリアル-php.cn

SSR を使用してリアクティブ Web コンポーネントを構築する

WBOY

リリース： 2024-08-24 11:22:06

オリジナル

238 人が閲覧しました

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 フレームワークです。

Build Reactive Web Components with SSR

Brisa ロゴ

これを行うには、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 コンポーネント内で使用できます。

Build Reactive Web Components with SSR

さらに詳しく知りたい場合は、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.

Build Reactive Web Components with SSR

<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! ??