リミックスの基本

最新のフレームワークについてよく聞いたかもしれません。驚くべきことに、2019年に開始されましたが、当初はサブスクリプションベースの有料フレームワークとしてのみ利用可能でした。 2021年、創業者はシードファンドを調達し、フレームワークを開き、ユーザーが無料でリミックスの使用を開始できるようにしました。水門は開かれ、誰もがそれについて話しているようで、良くも悪くも。 Remixの基本を掘り下げましょう。

Remixは、サーバー側（Edge）を優先するJavaScriptフレームワークです。現在、Reactをフロントエンドとして使用しており、エッジでサーバー側のレンダリングアプリケーションを優先しています。プラットフォームは、サーバー側のコードを取得し、サーバーレスまたはエッジ機能として実行できます。これは、従来のサーバーよりも安価で、ユーザーに近いものです。リミックスの創設者は、それを実行しているプラ​​ットフォームに基づいてサーバーとクライアント間のリクエストと応答を調整するため、「センタースタック」フレームワークと呼ぶのが好きです。

リミックスの展開

リミックスにはサーバーが必要なので、展開方法について説明しましょう。 Remix自体は、Netlify EdgeやDigitalOceanのアプリプラットフォームなど、node.jsまたはDeno環境で実行するために、サーバーを提供する必要があります。 Remix自体は、プラットフォームリクエストを実行中のプラットフォームに変換するプログラムであるコンパイラです。このプロセスでは、esbuildを使用して、サーバーリクエスト用のハンドラーを作成します。使用するHTTPハンドラーは、Web Fetch APIに基づいており、展開されるプラットフォームに適合するようにそれらを調整することにより、サーバーで実行されます。

リミックススタック

リミックススタックは、いくつかの一般的なツールが事前に構成されているプロジェクトです。リミックスチームは、音楽ジャンルにちなんで名付けられた3つの公式スタックを維持しています。さらに、NetLifyテンプレートチームによって作成されたK-POPスタックなど、多くのコミュニティリミックススタックがあります。このスタックは、Supabaseデータベースと認証、スタイル設定のための追い風、サイプレスエンドツーエンドテスト、きれいなコードフォーマット、ESLINTコードチェック、タイプスクリプトの静的タイプチェックなど、強力です。 K-Popスタックの展開に関するTara Manicsicの投稿をご覧ください。

キャッシュルーティング

リミックスは、キャッシュルーティングを介してジャムスタックを利用できます。静的サイトまたは静的サイト生成（SSG）は、すべてのコンテンツがビルド時にレンダリングされる場合、次の再構築まで static のままです。コンテンツは事前に生成されており、CDNに配置できます。これにより、エンドユーザーに多くの利点と速いサイトの読み込み速度が提供されます。ただし、Remixは、Next.JSやGatsbyなど、他の人気のあるReactフレームワークのように典型的なSSGを行いません。 SSGの利点の一部を取得するには、リミックスヘッダー機能のネイティブキャッシュコントロールHTTPヘッダーを使用して特定のルートをキャッシュするか、root.tsxファイルで直接キャッシュできます。

 <code> [[headers]] for = "/build/*" [headers.values] "cache-control" = "public、max-age = 31536000、s-maxage = 31536000" </code> 

その後、ヘッダー関数を追加します。これは1時間キャッシュします：

 <code> export function headers（ "cache-control"： "public、s-maxage = 360"、};これは、指定されたフォルダーを使用してアプリケーションルーティングを定義する手法です。通常、動的ルーティングとエンドポイントを宣言するための特別な構文があります。リミックスと他の人気のあるフレームワークの最大の違いは、ネストされたルーティングを使用できることです。  <p>各リミックスアプリケーションは、root.tsxファイルから始まります。これは、アプリケーション全体の基本がレンダリングされる場所です。ここでは、<code>  </code>タグ、<code>  </code>タグ、<code>  </code>タグとアプリケーションをレンダリングする必要があるコンポーネントなど、いくつかの一般的なHTMLレイアウトがあります。ここで指摘することの1つは、<code> <script> </script></code>コンポーネントがWebサイトで機能するものを有効にすることですが、すべてが機能するわけではありません。 root.tsxファイルは、ルートディレクトリ内のすべての親レイアウトとして機能し、ルート内のすべてが<code> <sutlet>  </sutlet></code>コンポーネントがroot.tsxにある場所でレンダリングされます。これは、リミックスのネストされたルーティングの基礎です。 ####ネストされたルーター</p> <p>リミックスは、Reactルーターチームの一部のメンバーによって作成されただけでなく、Reactルーターも使用します。実際、彼らはReactルーターにリミックスの利点のいくつかをもたらしています。 next.jsとsveltekitのメンテナンススタッフが現在解決に取り組んでいる複雑な問題の1つは、ネストされたルーティングです。 </p> <p>ネストされたルーティングは、従来のルーティングとは異なります。従来のルーティングはユーザーを新しいページに連れて行き、各ネストされたルートは同じページの別の部分です。これにより、ビジネスロジックを必要とするファイルとのみ関連付けることにより、懸念を分離できます。 Remixは、ネストされたルートがあるページの部分に限定されたエラーを処理できます。ページ上の他のルートはまだ利用可能であり、破損したルートは、ページ全体をクラッシュさせることなく、エラーに関連するコンテキストを提供できます。 </p> <p>リミックスは、アプリ/ルートのルートファイルがベースファイルにロードされるファイルディレクトリと同じ名前を持っている場合にこれを行います。ルートファイルは、<code> <sutlet>  </sutlet></code>コンポーネントを使用して、他のルートをロードする場所をRemixに伝えることにより、ディレクトリ内のファイルのレイアウトになります。 </p> <h4>アウトレットコンポーネント</h4> <p> <code> <codelet>  </codelet></code>コンポーネントは、ネストされたルートのコンテンツをどこにレンダリングするかを示すリミックスからの信号です。アプリ/Routesディレクトリのルートディレクトリのファイルに配置され、その名前はネストされたルートと同じです。次のコードは、アプリ/routes/about.tsxファイルにあり、アプリ/ルート/についてのファイルのアウトレットが含まれています。 Ory、ここに行きます</p>
<h4>ファイル構造</h4> <p>アプリ/ルート/ディレクトリのファイルは、その名前URLへのルートになります。 index.tsxファイルを含むディレクトリを追加することもできます。 </p> <pre class="brush:php;toolbar:false"> <code> app/─ルート/││└└└| | | | | |。ディレクトリ内のファイルのレイアウトファイルとレイアウトファイルには、ネストされたルートを配置するためのアウトレットコンポーネントが必要です。  <pre class="brush:php;toolbar:false"> <code> app/├├··1retues/││└└。。レイアウトファイル名の前の鉱石（__）。  <pre class="brush:php;toolbar:false"> <code> app/├├··ックスルート/│││└。。 href = "https://www.php.cn/link/232a03118725240918c5a4a0ab33e9b3"> https://www.php.cn/link/232A031187252440918C5A4A0SPISPISPISPISPISPISPISPISPISPISPISPISPISPISPISPISPISPSPISSPISPSPISPSPP.CN/LINK/232ATY TSXファイルですが、コンポーネントがAPP/ROTES/ABORT.TSXタグにある<code> <ontlet> </ontlet></code>コンポーネントをレンダリングします。  <h4>動的ルーティング</h4> <p>動的ルーティングは、URLの情報に基づいて変更されるルートです。これはブログ投稿の名前または顧客IDかもしれませんが、それが何であれ、ルートの前面に追加された$構文は、それが動的であることをリミックスに信号します。 $プレフィックス以外の名前は問題ではありません。 </p> <pre class="brush:php;toolbar:false"> <code> app/├├··ックスルート/│││└。。  <p>リミックスはサーバー上のすべてのデータをレンダリングするため、useState（）やuseeffect（）フックなど、Reactアプリケーションで標準になっているリミックスで多くを見る方法はありません。サーバーでデータが評価されているため、クライアント状態の必要性が低下します。 </p> <p>データを取得するために使用するサーバーのタイプは関係ありません。 Remixはリクエストと応答の間に配置され、適切に変換されるため、標準のWeb Fetch APIを使用できます。リミックスは、サーバーのみで実行されているローダー関数でこれを行い、useloaderdata（）フックを使用してコンポーネントのデータをレンダリングします。これは、CATをサービスAPIとして使用してランダムな猫画像をレンダリングする例です。 </p> <pre class="brush:php;toolbar:false"> <code>インポート{@remix-run/race 'export async function loader（）{const response = wait fetch（' https://cataas.com/cat '）const data return（<div> <img alt="ランダム猫" src="%7B%60https://cataas.com/cat/%24">  <outlet></outlet> </div>）} </code> 

ルーティングパラメーター

ダイナミックルーティングでは、urlのパラメーターにアクセスすることができます。ローダー関数は、PARAMSパラメーターを介してこれらのパラメーターにアクセスできます。

 <code> Import {useloaderdata}@remix-run/race 'import {loaderargs} from'@remix-run/node 'export async function loader（{params}：loadergs）{return {return {params}} return <p> urlパラメーターは{params.tag}。</p>} </code> 

です

その他のリミックス関数

リミックスルーティングモジュールAPIに通常のHTML要素と属性に追加の機能を追加する他のヘルパー関数があります。各ルートは、独自のタイプのこれらの機能を定義できます。

アクション関数

アクション関数を使用すると、標準のWeb FormData APIを使用して操作を形成するために追加の機能を追加できます。

 <code> async機能アクション（{request}）{const body request.formdata（）; HTTP標準ヘッダーは、ヘッダー関数に配置できます。各ルートにはヘッダーがあり、ネストされたルートとの競合を避けるために、最も深いルート、または最も前向きなスラッシュ（/）を持つURLが勝ちます。また、パスされたヘッダー、アクションヘッダー、ローダーヘッダー、または親ヘッダーを取得することもできます <pre class="brush:php;toolbar:false"> <code>エクスポート関数ヘッダー（{ActionHeaders、Loaderheaders、Parenters、}）{"Cache-Control"：LoaderHeaders.get（ "Cache-Control"）、 HTMLドキュメント。デフォルトでは、1つはroot.tsxファイルに設定されていますが、各ルートに対して更新できます。  <pre class="brush:php;toolbar:false"> <code> export function meta（）{return {your page title "、"各ルートの新しい説明 "、};リンク関数（<code> <link> </code>コンポーネントと混同しないように）を使用すると、必要なルートでのみコンテンツをインポートできます。したがって、たとえば、CSSファイルは、これらの特定のファイルを必要とするルートでのみスコープおよびインポートできます。リンク要素は、リンクAPIのhtmllinkdescriptorまたはページデータをプリファートできるページデータのpagelinkdescriptorにすることができます。  <pre class="brush:php;toolbar:false"> <code> export function links（）{return [// favicon {rel： "icon"、href： "/favicon.png"、type： "image/png"、}、// //ローカルStyleSheet、{rel： "styleSheet"、href：styleShref}、//ページのデータをプリフェッチする{ページ： "/about/community"} ]} </code> 

ルート間のリンク

リミックスは、 <link> と呼ばれるアプリケーションの異なるルート間をジャンプするコンポーネントを提供します。クライアントルーティングを取得するには、 <a href=""> name </a> の代わりに <link to=" "> コンポーネントを使用します。 <link> コンポーネントには、デフォルトでリミックスがリンクのホバリングまたはフォーカスを検出した場合、データをプリフェッチすることを検出する場合、またはレンダリングがリンクがレンダリングされるとすぐにルーティングされたデータを取得する予定です。

 <code> "@remix-run/React}からのインポートnav（）{nav> <link to="/"> <link> <link> <link>  3> next  <p>リミックスの基本があるので、実際にアプリケーションの構築を開始する準備はできていますか？ Remixは、ジョークアプリとブログチュートリアルを提供して、これらの基本を始めるのに役立ちます。また、新しいリミックスアプリケーションをゼロから作成することもできます。または、より深く掘り下げる準備ができている場合は、K-POPスタックを使用してみてください。 Remixの使用を本当に楽しんでいて、Web標準と基本への復帰に焦点を当てることが大好きでした。今では、作成を開始する予定です！ </p></code>

以上がリミックスの基本の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。