Qwik City
QwikはコンポーネントAPIに焦点を当てていますが、Qwik Cityは、以下のものを含む一般的なサーバー中心の機能を備えたコンポーネントをサポートするAPIを提供します。
- ルーティング:ディレクトリベースのルーティングでアプリケーションルートを定義します。(MPAとSPAの両方のルーティングモデルをサポートします。)
- ページ:アプリケーションページ(アプリケーションの主要機能)をレンダリングします。
- レイアウト:ページ間で再利用される共通の共有ページレイアウトを定義します。
- ローダー:コンポーネントで使用されるデータをサーバーでフェッチします。
- アクション:コンポーネントがサーバーにアクションの実行を要求する方法を提供します。
- バリデーター:アクションとローダーを検証する方法を提供します。
- エンドポイント:RESTful API、GraphQL API、JSON、XML、またはリバースプロキシのデータエンドポイントを定義する方法。
- ミドルウェア:認証、セキュリティ、キャッシング、リダイレクト、ログ記録などのクロスカット関数を一元的に実行する方法。
- server$:サーバーでロジックを実行するための簡単な方法。
- キャッシュ:コンテンツのキャッシュを制御します。
- 環境変数:プラットフォームに依存しない方法で、キーなどに一般的に使用される環境変数の読み取りを管理するためのAPI。
- 完全に動的なサイトのためのサーバーサイドレンダリング(SSR)と、静的WebサーバーやCDNでホスティングされる静的サイト生成(SSG)の両方をサポートします。
Qwik¹ City²
Qwik¹:コアフレームワーク、安定版、プリミティブ、コンポーネントモデル。
City²:オピニオンリーダーなファイルベースのルーター、ミドルウェア、エンドポイント、データのフェッチと更新。
Qwik CityはQwikの**メタフレームワーク**です。Qwik CityとQwikの関係は、Next.jsとReact、NuxtとVue、SvelteKitとSvelte、AnalogとAngularの関係に似ています。
Qwik(コア)とQwik City(ルーティング)は、2つの抽象化レイヤーで問題を解決します。Qwikはコンポーネントと状態管理のプリミティブに焦点を当てている一方で、Qwik Cityは**大規模なサイト構築のためのオピニオンリーダーで高性能な方法**を提供します。エコシステムをサイト構築の単一の正しい方法に限定するつもりはありません。実際、コミュニティがQwikの上に代替ソリューションを構築することを奨励しています。
Qwik Cityは多くの便利な機能を備えていますが、Qwikの再開可能性とJavaScriptストリーミングのおかげで、エンドユーザーにとってQwik Cityによる追加コストはありません。(JavaScriptゼロ)。
Qwik Cityを使用して、eコマースウェブサイト、ブログサイト、またはルーティング、レイアウト、データ取得/更新を必要とするその他のウェブサイトを構築します。Qwik CityはQwik上に構築されているため、Qwik Cityサイトは再開可能であり、きめ細かい遅延ロードによる最小限のJavaScriptのみをダウンロードします。
Qwik Cityの始め方
CLIを使用したアプリの作成にアクセスして、新しいQwik Cityスタータープロジェクトを作成する方法を確認してください。これは非常に簡単です。
npm create qwik@latest
pnpm create qwik@latest
yarn create qwik
bun create qwik@latest
高レベルAPIの概要
この表は、それぞれの機能をどのファイル(`index.tsx` と `layout.tsx`)に実装すべきかを示しています。
Partytown
Qwik Cityは、Partytown と事前統合されており、メインスレッド以外でサードパーティコードを実行できます。