リミックスの基本

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

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

リミックスを展開します

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

リミックススタック

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

キャッシュルーティング

Remixがサーバーを必要としている場合でも、キャッシュルーティングを使用してJamstackを利用できます。静的サイトまたは静的サイト生成（SSG）は、すべてのコンテンツがビルド時にレンダリングされ、次の再構築まで静的のままです。コンテンツは事前に生成されており、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() { return { "Cache-Control": "public, s-maxage=360", }; };</code>

リミックスルーティング

多くのフレームワークは、ファイルシステムベースのルーティングに依存しています。これは、指定されたフォルダーを使用してアプリケーションルーティングを定義する手法です。通常、動的ルーティングとエンドポイントを宣言するための特別な構文があります。リミックスと他の人気のあるフレームワークの最大の違いは、ネストされたルーティングを使用できることです。

各リミックスアプリケーションは、root.tsxファイルから始まります。これは、アプリケーション全体の基本がレンダリングされる場所です。ここには、いくつかの一般的なHTMLレイアウトがあります。ラベル、タグ、次に<code>アプリケーションのレンダリングに必要なタグとコンポーネント。ここで指摘することの1つはです<script></script> 组件启用了网站上的 JavaScript；有些东西无需它也能工作，但并非所有东西都能工作。root.tsx 文件充当 routes 目录中所有内容的父布局，routes 中的所有内容都在 root.tsx 中 <outlet></outlet> 组件所在的位置进行渲染。这是 Remix 中嵌套路由的基础。#### 嵌套路由

Remix 不仅由 React Router 团队的一些成员创建，它还使用 React Router。事实上，他们正在将 Remix 的一些优点带回 React Router。Next.js 和 SvelteKit 的维护人员目前正在努力解决的一个复杂问题是嵌套路由。

嵌套路由与传统路由不同。传统路由会将用户带到新页面，而每个嵌套路由都是同一页面的一个单独部分。它允许通过将业务逻辑仅与需要它的文件相关联来分离关注点。Remix 能够处理仅限于嵌套路由所在页面部分的错误。页面上的其他路由仍然可用，并且损坏的路由可以提供与错误相关的上下文，而不会导致整个页面崩溃。

当 app/routes 中的根文件与将在基本文件中加载的文件目录同名时，Remix 会执行此操作。根文件通过使用 <outlet></outlet> 组件来告诉 Remix 在哪里加载其他路由，从而成为目录中文件的布局。

Outlet 组件

<outlet></outlet> 组件是 Remix 的一个信号，指示它应该在哪里为嵌套路由渲染内容。它放在 app/routes 目录根目录下的文件中，其名称与嵌套路由相同。以下代码位于 app/routes/about.tsx 文件中，并包含 app/routes/about 文件夹内文件的 outlet：

<code>import { Outlet } from "@remix-run/react";

export default function About() {
  return (
    <div>
      <h1 id="I-am-the-parent-layout-I-will-be-on-any-page-inside-of-my-named-directory">I am the parent layout. I will be on any page inside of my named directory.</h1>
      {/* All of my children, the files in the named directory, will go here. */}
      <outlet></outlet>
    </div>
  )
}</code>

文件结构

app/routes/ 目录中的任何文件都成为其名称 URL 的路由。还可以添加包含 index.tsx 文件的目录。

<code>app/
├── routes/
│   │
│   └── blog
|   |   ├── index.tsx ## The /blog route
│   └── about.tsx  ## The /about route
│   ├── index.tsx  ## The / or home route
└── root.tsx</code>

如果路由的名称与目录相同，则命名文件将成为目录内文件的布局文件，并且布局文件需要一个 Outlet 组件来放置嵌套路由。

<code>app/
├── routes/
│   │
│   └── about
│   │   ├── index.tsx
│   ├── about.tsx ## this is a layout for /about/index.tsx
│   ├── index.tsx
└── root.tsx</code>

还可以通过在布局文件名前添加双下划线 (__) 来创建布局。

<code>app/
├── routes/
│   │
│   └── about
│   │   ├── index.tsx
│   ├── index.tsx
│   ├── about.tsx
│   ├── __blog.tsx ## this is also a layout
└── root.tsx</code>

https://www.php.cn/link/232a03118725240918c5a4a0ab33e9b3 仍然会渲染 app/routes/about.tsx 文件，但也会在 app/routes/about.tsx 的标记中 <outlet></outlet> 组件所在的位置渲染 app/routes/about/index.tsx 中的内容。

动态路由

动态路由是根据 url 中的信息而变化的路由。这可能是博客文章的名称或客户 ID，但无论是什么，添加到路由前面的 $ 语法都会向 Remix 发出信号，表明它是动态的。除了 $ 前缀外，名称无关紧要。

<code>app/
├── routes/
│   │
│   └── about
│   │   ├── $id.tsx
│   │   ├── index.tsx
│   ├── about.tsx ## this is a layout for /about/index.tsx
│   ├── index.tsx
└── root.tsx</code>

获取数据！

由于 Remix 在服务器上渲染所有数据，因此在 Remix 中看不到很多已成为 React 应用程序标准的内容，例如 useState() 和 useEffect() 钩子。由于数据已在服务器上进行了评估，因此对客户端状态的需求减少了。

使用哪种类型的服务器来获取数据也无关紧要。由于 Remix 位于请求和响应之间并对其进行适当的转换，因此您可以使用标准 Web Fetch API。Remix 在一个仅在服务器上运行的 loader 函数中执行此操作，并使用 useLoaderData() 钩子在组件中渲染数据。这是一个使用 Cat as a Service API 渲染随机猫图像的示例。

<code>import { Outlet, useLoaderData } from '@remix-run/react'

export async function loader() {
  const response = await fetch('https://cataas.com/cat')
  const data = await response.json()
  return {
    data
  }
}

export default function AboutLayout() {
  const cat = useLoaderData<typeof loader>()
  return (
    <div>
      <img alt="A random cat." src="%7B%60https://cataas.com/cat/%24%7Bcat.id%7D%60%7D">
      <outlet></outlet>
    </div>
  )
}</typeof></code>

路由参数

在动态路由中，以 $ 为前缀的路由需要能够访问 URL 参数以处理应该渲染的数据。loader 函数可以通过 params 参数访问这些参数。

<code>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>
}</typeof></code>

其他 Remix 函数

Remix 还有一些其他辅助函数，可以为路由模块 API 中的普通 HTML 元素和属性添加额外功能。每个路由都可以定义自己类型的这些函数。

Action 函数

Action 函数允许您使用标准 web FormData API 向表单操作添加额外功能。

<code>export async function action({ request }) {
  const body = await request.formData();
  const todo = await fakeCreateTodo({
      title: body.get("title"),
  });
  return redirect(`/todos/${todo.id}`);
}</code>

Headers 函数

任何 HTTP 标准标头都可以放在 headers 函数中。因为每个路由都可以有一个标头，为了避免与嵌套路由冲突，最深的路由——或具有最多正斜杠 (/) 的 URL——获胜。您还可以获取传递的标头，actionHeaders、loaderHeaders 或 parentHeaders

<code>export function headers({
  actionHeaders,
  loaderHeaders,
  parentHeaders,
}) {
  return {
"Cache-Control": loaderHeaders.get("Cache-Control"),
  };
}</code>

Meta 函数

此函数将设置 HTML 文档的元标记。默认情况下，在 root.tsx 文件中设置了一个，但可以为每个路由更新它们。

<code>export function meta() {
  return {
    title: "Your page title",
    description: "A new description for each route.",
  };
};</code>

Links 函数

HTML link 元素位于 HTML 文档的 标签中，它们导入 CSS 等。links 函数（不要与 <link> 组件混淆）允许您仅在需要它们的路由中导入内容。因此，例如，CSS 文件可以进行范围限定，并且仅在需要这些特定文件的路由中导入。link 元素作为对象数组从 links() 函数返回，可以是 link API 的 HtmlLinkDescriptor 或可以预取页面数据的 PageLinkDescriptor。

<code>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/styles.css",
      crossOrigin: "true",
    },
    // add a local stylesheet,
    { rel: "stylesheet", href: stylesHref },

    // prefetch a page's data
    { page: "/about/community" }
  ]
}</code>

路由之间链接

Remix 提供了一个组件来在应用程序的不同路由之间跳转，称为 <link>。要获得客户端路由，请使用 <link to=""> 组件而不是 <a href="">Name</a>。<link> 组件还带有一个 prefetch 属性，默认情况下接受 none，如果 Remix 检测到用户将鼠标悬停或聚焦链接，则打算预取数据，或者渲染将立即获取路由的数据，一旦链接被渲染。

<code>import { Link } from "@remix-run/react";

export default function Nav() {
  return (
    <nav>
      <link to="/">Home 
      <link to="/about">About 
      <link prefetch="intent" to="/about/community">Community
    </nav>
  );
}</code>

下一步

现在您已经了解了 Remix 的基础知识，您准备好开始实际构建应用程序了吗？Remix 提供了一个笑话应用程序和一个博客教程来帮助您开始实施这些基本知识。您也可以从头开始创建一个全新的 Remix 应用程序。或者，如果您准备深入研究，请尝试使用 K-Pop 堆栈。我非常享受使用 Remix 的时光，并且喜欢它对 Web 标准的关注以及回归基础。现在轮到您开始创建了！

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