フレームワーク ブロックの最新の開発者の 2019 人である Remix について、多くの誇大宣伝を聞いたことがあるでしょう。 2021 年に開始されたことは驚くかもしれませんが、当初はサブスクリプション ベースのプレミアム フレームワークとしてのみ利用可能でした。 XNUMX 年、創業者はシード資金を調達し、フレームワークをオープンソース化して、ユーザーが Remix を無料で使い始められるようにしました。 水門が開き、誰もがそれについて良いか悪いかについて話しているようです。 それでは、Remix の基本をいくつか見ていきましょう。
Remix はサーバー「エッジ」ファーストの JavaScript フレームワークです。 Reactを使用しており、 少なくとも今のところ、フロントエンド用であり、アプリケーションのサーバー側レンダリングを優先します 縁に. プラットフォームは、サーバー側のコードを受け取り、それを次のように実行できます。 サーバーレスまたはエッジ機能 従来のサーバーよりも安価にし、ユーザーに近づけます。 Remix の創設者は、これを「センター スタック」フレームワークと呼んでいます。これは、サーバーとクライアントの間で行われる要求と応答を、それが実行されているプラットフォームに適応させるためです。
リミックスのデプロイ
Remix にはサーバーが必要なので、それをデプロイする方法について説明しましょう。 Remix はサーバー自体を提供しません。サーバーを持ち込むことで、任意の環境で実行できます。 Node.js or 電王 を含む環境 ネットリファイエッジ & DigitalOcean のアプリ プラットフォーム. リミックス自体は コンパイラ、それが実行されているプラットフォームの要求を変換するプログラム。 このプロセスは エスビルド サーバーへのリクエストのハンドラーを作成します。 使用する HTTP ハンドラーは、 Web フェッチ API サーバー上で実行されます 適応する それらが展開されるプラットフォームのためにそれらを。
リミックス スタック
リミックス スタックは、あらかじめ構成されたいくつかの一般的なツールを含むプロジェクトです。 がある XNUMX つの公式スタック これらは Remix チームによって管理されており、すべて音楽のジャンルにちなんで名付けられています。 コミュニティの Remix スタックも多数あります。 K-POP スタック Netlify のテンプレート チームによって作成されました。 このスタックは強力で、 スーパーベース データベースと認証、 追い風 スタイリングのために、 サイプレス エンドツーエンドのテスト、 きれい コードのフォーマット、 ESLint 糸くず、および タイプスクリプト 静的型付け。 K-Pop スタックの展開に関する Tara Manicsic の投稿をご覧ください。
ルートのキャッシング
Remix にはサーバーが必要ですが、 ジャムスタック ルートをキャッシュすることによる利点。 静的サイトまたは静的サイト生成 (SSG) は、すべてのコンテンツがビルド時にレンダリングされ、そのまま維持される場合です。 静的な 別の再構築まで。 コンテンツは事前に生成されており、CDN に配置できます。 これにより、エンド ユーザーに多くの利点と迅速なサイト読み込みが提供されます。 ただし、Remix は、Next.js や Gatsby などの他の一般的な React フレームワークのような典型的な SSG を実行しません。 SSG の利点の一部を得るには、ネイティブを使用できます。 Cache-Control HTTP ヘッダー リミックスで ヘッダー関数 特定のルートをキャッシュするか、 root.tsx ファイルにソフトウェアを指定する必要があります。
[[headers]]
for = "/build/*"
[headers.values]
"Cache-Control" = "public, max-age=31536000, s-maxage=31536000"次に、 ヘッダー関数 あなたがそれをしたいところ。 これは XNUMX 時間キャッシュします。
export function headers() {
return {
"Cache-Control": "public, s-maxage=360",
};
};ルーティングのリミックス
多くのフレームワークは、ファイル システムに基づくルーティングに傾倒しています。 これは、指定されたフォルダーを使用してアプリケーションのルートを定義する手法です。 通常、動的ルートとエンドポイントを宣言するための特別な構文があります。 現在、Remix と他の一般的なフレームワークとの最大の違いは、次の機能を使用できることです。 ネストされたルーティング.
すべての Remix アプリは、 root.tsx ファイル。 これは、アプリのベース全体がレンダリングされる場所です。 ここには、次のような一般的な HTML レイアウトがいくつかあります。 <html> タグ、 <head> タグ、そして <body> アプリのレンダリングに必要なコンポーネントをタグ付けします。 ここで一つ指摘しておきたいのは、 <Scripts> コンポーネントは、サイトで JavaScript を有効にするものです。 それがなくても機能するものもありますが、すべてではありません。 の root.tsx ファイル内のすべての親レイアウトとして機能します routes ディレクトリでは、ルート内のすべてがレンダリングされます。 <Outlet/> コンポーネントが入っています root.tsx. これは、Remix におけるネストされたルーティングのベースです。
ネストされたルーティング
Remix は、 Reactルーター、 また 使用されます React ルーター。 実際、彼らは Remix の良いところを React Router に戻す. Next.js と SvelteKit のメンテナーが現在解決しようとしている複雑な問題は、ネストされたルーティングです。
ネストされたルーティングは、従来のルーティングとは異なります。 新しいルートがユーザーを新しいページに導く場合、ネストされた各ルートは同じページの個別のセクションです。 ビジネス ロジックを必要なファイルのみに関連付けることで、懸念事項を分離できます。 Remix は、ネストされたルートがあるページのセクションのみにローカライズされたエラーを処理できます。 ページ上の他のルートは引き続き使用でき、壊れたルートは、ページ全体がクラッシュすることなく、エラーに関連するコンテキストを提供できます。
Remix は、ルート ファイルが app/routes ベースファイル内にロードされるファイルのディレクトリと同じ名前が付けられます。 ルートファイルは レイアウト を使用して、ディレクトリ内のファイルに対して <Outlet /> コンポーネントを使用して、他のルートをどこにロードするかを Remix に伝えます。
アウトレット部品
<Outlet /> Component は、ネストされたルートのコンテンツをレンダリングする場所を Remix に知らせる信号です。 のルートにあるファイルに配置されます。 app/routes ネストされたルートと同じ名前のディレクトリ。 次のコードは app/routes/about.tsx ファイルであり、内部にファイルのアウトレットが含まれています app/routes/about フォルダ：
import { Outlet } from "@remix-run/react";
export default function About() {
return (
<>
<section>
I am the parent layout. I will be on any page inside of my named directory.
</section>
{ /* All of my children, the files in the named directory, will go here. */ }
<Outlet />
</>
)
}フォルダ構造
内の任意のファイル app/routes/ ディレクトリは、その名前の URL でルートになります。 ディレクトリは、 index.tsx ファイルにソフトウェアを指定する必要があります。
app/
├── routes/
│ │
│ └── blog
| | ├── index.tsx ## The /blog route
│ └── about.tsx ## The /about route
│ ├── index.tsx ## The / or home route
└── root.tsxルートがディレクトリと同じ名前を持つ場合、名前付きファイルはディレクトリ内のファイルのレイアウト ファイルになり、レイアウト ファイルには アウトレット部品 ネストされたルートを配置します。
app/
├── routes/
│ │
│ └── about
│ │ ├── index.tsx
│ ├── about.tsx ## this is a layout for /about/index.tsx
│ ├── index.tsx
└── root.tsxレイアウトは、XNUMX つのアンダースコア (__).
app/
├── routes/
│ │
│ └── about
│ │ ├── index.tsx
│ ├── index.tsx
│ ├── about.tsx
│ ├── __blog.tsx ## this is also a layout
└── root.tsxhttps://your-url.com/about まだレンダリングします app/routes/about.tsx ファイルですが、含まれているものは何でもレンダリングします app/routes/about/index.tsx どこ アウトレット部品 のマークアップにあります app/routes/about.tsx.
動的ルート
動的ルートは、URL の情報に基づいて変化するルートです。 それはブログの投稿の名前または顧客 ID かもしれませんが、それが何であれ、 $ ルートの先頭に追加された構文は、動的であることを Remix に通知します。 名前以外は関係ない $ 接頭辞。
app/
├── routes/
│ │
│ └── about
│ │ ├── $id.tsx
│ │ ├── index.tsx
│ ├── about.tsx ## this is a layout for /about/index.tsx
│ ├── index.tsx
└── root.tsxそのデータを取得してください！
Remix はすべてのデータをサーバー上でレンダリングするため、React アプリの標準になっているものの多くは表示されません。 useState() & useEffect() Remix のフック。 サーバー上ですでに評価されているため、クライアント側の状態の必要性はあまりありません。
また、データの取得に使用するサーバーの種類も問題ではありません。 Remix はリクエストとレスポンスの間に位置し、適切に翻訳するため、標準を使用できます。 Web フェッチ API. Remix はこれを loader 機能 の サーバー上で実行され、 useLoaderData() コンポーネント内のデータをレンダリングするためのフック。 を使用した例を次に示します。 Cat as a Service API ランダムな猫の画像をレンダリングします。
import { Outlet, useLoaderData } from '@remix-run/react'
export async function loader() {
const response = await fetch('<https://cataas.com/cat?json=true>')
const data = await response.json()
return {
data
}
}
export default function AboutLayout() {
const cat = useLoaderData<typeof loader>()
return (
<>
<img
src={`https://cataas.com/cat/${cat}`}
alt="A random cat."
/>
<Outlet />
</>
)
}ルートパラメータ
動的ルートでは、次のプレフィックスが付いたルート $ レンダリングするデータを処理するには、URL パラメータにアクセスできる必要があります。 の loader 関数は、 params 引数。
import { useLoaderData } from '@remix-run/react'
import type { LoaderArgs } from '@remix-run/node'
export async function loader({ params }: LoaderArgs) {
return {
params
}
}
export default function AboutLayout() {
const { params } = useLoaderData<typeof loader>()
return <p>The url parameter is {params.tag}.</p>
}その他のリミックス機能
Remix には、通常の HTML 要素と属性に機能を追加するヘルパー関数が他にもいくつかあります。 ルート モジュール API. 各ルートは、これらのタイプの関数を独自に定義できます。
アクション機能
An action 関数を使用すると、標準の Web を使用してフォーム アクションに機能を追加できます フォームデータ API.
export async function action({ request }) {
const body = await request.formData();
const todo = await fakeCreateTodo({
title: body.get("title"),
});
return redirect(`/todos/${todo.id}`);
}ヘッダー機能
任意 HTTP 標準ヘッダー に入ることができます headers 関数。 各ルートにはヘッダーを含めることができるため、ネストされたルートとの競合を避けるために、最も深いルート、またはスラッシュが最も多い URL (/) — 勝ちます。 通過したヘッダーを取得することもできます。 actionHeaders, loaderHeadersまたは parentHeaders
export function headers({
actionHeaders,
loaderHeaders,
parentHeaders,
}) {
return {
"Cache-Control": loaderHeaders.get("Cache-Control"),
};
}メタ機能
この関数は、HTML ドキュメントのメタ タグを設定します。 XNUMX つは root.tsx デフォルトではファイルですが、ルートごとに更新できます。
export function meta() {
return {
title: "Your page title",
description: "A new description for each route.",
};
};リンク機能
HTML link 要素は <head> HTML ドキュメントのタグであり、特に CSS をインポートします。 の links と混同しないでください。 <Link /> コンポーネント、それらを必要とするルート内のもののみをインポートできます。 したがって、たとえば、CSS ファイルをスコープして、特定のファイルを必要とするルートでのみインポートすることができます。 の link から要素が返されます links() オブジェクトの配列として機能し、 HtmlLinkDescriptor link API または PageLinkDescriptor ページのデータをプリフェッチできます。
export function links() {
return [
// add a favicon
{
rel: "icon",
href: "/favicon.png",
type: "image/png",
},
// add an external stylesheet
{
rel: "stylesheet",
href: "<https://example.com/some/styles.css>",
crossOrigin: "true",
},
// add a local stylesheet,
{ rel: "stylesheet", href: stylesHref },
// prefetch a page's data
{ page: "/about/community" }
]
}ルート間のリンク
Remix は、アプリ内のさまざまなルート間を移動するためのコンポーネントを提供します。 <Link/>. クライアント側のルーティングを取得するには、 <Link to="">Name</Link> 代わりにコンポーネント <a href="">Name</a>を選択します。 <Link /> コンポーネントも小道具を取ります prefetch 受け入れる none デフォルトでは、 intent Remix がユーザーのホバーまたはリンクのフォーカスを検出した場合にデータをプリフェッチする、または render リンクがレンダリングされるとすぐにルートのデータを取得します。
import { Link } from "@remix-run/react";
export default function Nav() {
return (
<nav>
<Link to="/">Home</Link>{" "}
<Link to="/about">About</Link>{" "}
<Link to="/about/community" prefetch="intent">Community</Link>
</nav>
);
}次のステップ
これで Remix の基本が理解できたので、実際にアプリケーションを構築する準備が整いましたね。 リミックスは、 ジョークアプリ フォルダーとその下に ブログチュートリアル この基本的な知識の実装を開始するために。 ゼロから始めて、新しい Remix アプリを作成することもできます。 または、飛び込む準備ができている場合は、 K-POP スタック 試してみてください。 私は Remix での時間を本当に楽しんでおり、Web 標準に焦点を当て、それを基本に戻すことが大好きです。 今度はあなたが作成を開始する番です。
