gt-react@11.0.0
Ernest McCarter概要
gt-react 11 は、React ライブラリ群にまたがる General Translation の統合リリースの中核です。gt-react、gt-next、@generaltranslation/react-core、gt-react-native、gt-tanstack-start はすべてバージョン 11 に更新され、あわせて gt-i18n 1.0 と generaltranslation 9.0 もリリースされました。
このリリースの目標は 2 つありました。i18n ランタイムをより多くのフレームワークに拡張しやすくすることと、ユーザーに配布される General Translation のコード量を減らすことです。その結果、ブラウザ専用アプリとサーバーレンダリング対応アプリの両方で、より明確なセットアップフローを備えた共通基盤が実現しました。
Pages Router のファーストクラスサポート
v11 におけるユーザー向けの最大の変更点は、gt-next で Next.js Pages Router が直接サポートされたことです。これまでは、Pages Router アプリでは gt-react を使用する必要がありました。現在では、withGTServerSideProps() を使ってロケールと翻訳スナップショットを読み込み、その両方を _app.tsx の <GTProvider> に渡せます。
また、v11 では ミドルウェアベースのロケールルーティング と、静的生成向けの withGTStaticProps() も追加されています。
更新されたセットアップフロー
- React SPAs - アプリの読み込み前に、
initializeGTSPA()でgt-reactを初期化します。初期化時にロケールと翻訳があらかじめ解決されるため、SPA ではプロバイダーは不要になりました。React SPA Quickstart を参照してください。 - Server-rendered React - ランタイム を一度初期化したうえで、サーバー側で request locale と翻訳 snapshot を解決します。同期 hydration のため、
localeとtranslationsの両方を<GTProvider>に渡します。server-rendered React Quickstart を参照してください。 - TanStack Start - root loader でロケールと翻訳 snapshot を解決し、その両方を
<GTProvider>に渡します。ロケールの選択は、設定されたロケール cookie を通じて保持されます。TanStack Start Quickstart を参照してください。
より小さく、より拡張しやすい ランタイム
バージョン11では、クライアントアプリに不要なコードを削除し、パッケージをバンドラがよりツリーシェイクしやすくしています。開発専用の翻訳パスも、本番ビルドから除外できるようになりました。
本番環境の Next.js ベンチマークでは、GT によるクライアント JavaScript は約251 KBから108 KBへと減少しました。これは 57.1%の削減 です。この数値はクライアントバンドル全体ではなく、そのうち General Translation が占める部分を測定したものです。パッケージおよびエントリポイントのデータは、Odysseus Bundle Size Tracker で確認できます。
このリファクタリングにより、より多くのフレームワークをサポートするための共通基盤も整いました。
今後
今後も、クライアントバンドルの削減を進めていく予定です。次の段階では、dictionary 翻訳や開発時のホットリロードといった機能をモジュール化し、アプリが実際に使う機能だけを含めて配布できるようにしたいと考えています。
また、今後はコンパイラ主導のアーキテクチャにもさらに注力していく予定です。ランタイムではなくビルド時により多くの処理を移すことで、クライアント JavaScript とランタイムオーバーヘッドを削減しつつ、より多くのフレームワークをサポートしやすくなるはずです。