리믹스의 기본 사항

최신 리믹스 프레임 워크에 대해 많이 들었을 것입니다. 놀랍게도, 그것은 2019 년에 다시 출시되었지만 처음에는 구독 기반 유료 프레임 워크로만 사용할 수있었습니다. 2021 년에 창립자는 종자 자금을 모으고 프레임 워크를 열어 사용자가 리믹스를 무료로 사용할 수있게했습니다. 수문이 열렸고 모든 사람들이 더 좋든 나쁘 든 그것에 대해 이야기하는 것처럼 보였습니다. 리믹스의 기본 사항 중 일부를 파헤쳐 봅시다.

Remix는 서버 측 (Edge)의 우선 순위를 정하는 JavaScript 프레임 워크입니다. 현재 React를 프론트 엔드로 사용하고 Edge의 서버 측 렌더링 애플리케이션을 우선시합니다. 플랫폼은 서버 측 코드를 사용하여 기존 서버보다 저렴하고 사용자에게 더 가까운 서버리스 또는 에지 기능으로 실행할 수 있습니다. Remix 설립자는이를 실행하는 플랫폼을 기반으로 서버와 클라이언트 간의 요청과 응답을 조정하기 때문에이를 "센터 스택"프레임 워크라고 부릅니다.

배포 리믹스

Remix에는 서버가 필요하므로 배포 방법에 대해 논의 해 봅시다. Remix 자체는 서버를 제공하지 않습니다 (직접 제공해야합니다) Netlify Edge 및 DigitalOcean의 앱 플랫폼을 포함한 Node.js 또는 Deno 환경에서 실행되도록 허용합니다. Remix 자체는 플랫폼 요청을 실행중인 플랫폼으로 변환하는 프로그램 인 컴파일러 입니다. 이 프로세스는 esbuild를 사용하여 서버 요청에 대한 핸들러를 만듭니다. 사용하는 HTTP 처리기는 웹 페치 API를 기반으로하며 배포 할 플랫폼에 맞게 조정하여 서버에서 실행됩니다.

리믹스 스택

리믹스 스택은 몇 가지 공통 도구를 사전 구성 한 프로젝트입니다. 리믹스 팀은 음악 장르의 이름을 따서 명명 된 3 개의 공식 스택을 유지합니다. 또한 NetLify Template 팀이 만든 K-Pop 스택을 포함하여 많은 커뮤니티 리믹스 스택이 있습니다. 이 스택은 Supabase 데이터베이스 및 인증, 스타일 설정을위한 Tailwind, Cypress End-to-End Testing, Pretier Code Formatting, Eslint Code Checking 및 TypeScript 정적 유형 확인을 포함하여 강력합니다. K-Pop 스택 배포에 대한 Tara Manicsic의 게시물을 확인하십시오.

캐시 라우팅

Remix에 서버가 필요하더라도 캐시 라우팅을 통해 Jamstack을 계속 활용할 수 있습니다. 정적 사이트 또는 정적 사이트 생성 (SSG)은 모든 컨텐츠가 빌드 타임에 렌더링되고 다음 재 구축 될 때까지 정적으로 유지되는 경우입니다. 내용은 사전 생성되며 CDN에 배치 할 수 있습니다. 이는 최종 사용자에게 많은 이점과 빠른 사이트 로딩 속도를 제공합니다. 그러나 Remix는 Next.js 및 Gatsby를 포함한 다른 인기있는 React 프레임 워크와 마찬가지로 일반적인 SSG를 수행하지 않습니다. SSG의 이점을 얻으려면 Remix 헤더 기능에서 기본 캐시 제어 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> 응용 프로그램을 렌더링하는 데 필요한 태그 및 구성 요소. 여기서 지적해야 할 것은<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 중국어 웹사이트의 기타 관련 기사를 참조하세요!