コードコンポーネントのセットアップがより簡単になりました！

※この記事は2025年12月17日にWebflowが公開した下記アップデート情報・ニュースを日本語訳したものです（一部加筆・修正あり）

Easier setup and better performance for code components

‍

Webflowのコードコンポーネントが、これまで以上に使いやすく高速で信頼性の高いものになりました。

コードコンポーネントを使えば、外部のコードベースにあるReactコンポーネントを、そのままWebflowのキャンバス上に配置できます。
ここ数週間でセットアップを簡素化し、パフォーマンスを向上させるためのさまざまな改善がリリースされています。

‍

Decorators によるフレームワーク設定の簡素化

新たにDecoratorsが利用可能になり、すべてのコードコンポーネントを共通のロジックでラップできるようになりました。

これにより、以下のような用途に最適です。

• グローバル CSS の適用
• React Providers の設定
• Tailwind、Shadcn、Material UI などの初期セットアップ

詳しくは開発者向けドキュメントをご確認ください。

‍

バンドルサイズの削減で、より高速なサイトに

ほとんどのコードコンポーネントで、バンドルサイズが最大 75%削減されました。
これにより、ページの読み込み速度が向上し、訪問者にとってより快適な体験を提供できます。

‍

より堅牢になったサーバーサイドレンダリング（SSR）

SSRが一般的なCSS構成を自動で処理するようになり、初回ロード時からスタイルが正しく描画されるようになりました。

また、サーバーとクライアント間で不一致が発生した場合でも、コードコンポーネントが 自動的に復旧するため、Hydrationエラーがユーザーに表示されることはありません。

‍

LLMによる定義生成がよりスマートに

コンポーネント定義を生成する AIワークフローも改善されました。
よく誤生成（hallucination）されがちなpropsの型に対して、新しいエイリアスが追加され、手動修正の必要が大幅に軽減されています。

‍

‍