PWA Kit の概要

この概要では、PWA Kit アーキテクチャの主要部分について紹介します。製品の残りのドキュメントに関する有用なコンテキストも含まれています。

Retail React App はサーバー側でレンダリングされる React アプリで、e コマース用に最適化されています。次のような主要機能がすでに含まれており、ストアフロント作成のスタート地点として利用できます:

• コードのバンドル、コードの分割、およびトランスパイル
• テーマ設定をもつコンポーネントライブラリ
• JavaScript ベースのスタイリングシステム (JS の CSS)
• 定期的な開発タスクの自動化のためのスクリプト
• Progressive Web App (PWA) 機能のための Service Worker と Manifest
• テストスイート

Retail React App のストアフロントには、商品一覧ページ (PLP) や商品詳細ページ (PDP)、買い物カゴ、注文手続きなど、標準の e コマースのページや機能が含まれています。ストアフロントは、独自のコードで強化や拡張が可能なように設計されています。

詳細については、完全なアーキテクチャガイドの Retail React App を参照してください。

買い物客に最善の体験を提供するために、PWA Kit ストアフロントは、サーバー側とクライアント側の 2 つの異なるコンテキストで同じソースコードを実行する、レンダリングとルーティングのシステムを使用しています。サーバー側のレンダリングは初期のページ読み込み速度を最適化し、クライアント側のレンダリングはレスポンシブなユーザーインターフェイスとスムーズなページの移行を可能にします。

このレンダリングとルーティングのシステムは、Retail React App によって Express サーバー構成と React コンポーネントの階層を使用して確立されます。このシステム内では以下を実行できます:

• 新規ページコンポーネントの追加および既存のページコンポーネントの変更
• API リクエストまたはユーザー操作からのページコンポーネントへのデータの提供
• URL リクエストからページコンポーネントへのルーティングパターンの定義
• すべてのページの出力のカスタマイズ

詳細については、完全なアーキテクチャガイドのレンダリングとルーティングを参照してください。

PWA Kit は GitHub でホストされるオープンソースプロジェクトです。

PWA Kit の GitHub リポジトリは、ライブラリ、プロジェクトテンプレート、SDK、その他のツールを含むいくつかのパッケージで構成される monorepo として設定されます。

リポジトリのナビゲーションに役立つよう、構成要素の各パッケージの概要を説明します。