混音的基礎

你可能已經聽過很多關於Remix 這個最新框架的宣傳。令人驚訝的是，它早在2019 年就已啟動，但最初僅作為訂閱式付費框架提供。 2021 年，創始人籌集了種子資金，並開源了該框架，允許用戶免費開始使用Remix。閘門打開了，每個人似乎都在談論它，無論好壞。讓我們深入研究Remix 的一些基礎知識。

Remix 是一個優先考慮服務器端（邊緣）的JavaScript 框架。它目前使用React 作為前端，並優先在邊緣進行服務器端渲染應用程序。平台可以獲取服務器端代碼並將其作為無服務器或邊緣函數運行，這比傳統服務器更便宜，並且更靠近您的用戶。 Remix 創始人喜歡稱其為“中心堆棧”框架，因為它會根據運行它的平台調整服務器和客戶端之間進行的請求和響應。

部署Remix

由於Remix 需要服務器，讓我們討論一下如何部署它。 Remix 本身不提供服務器——你需要自己提供服務器——允許它在任何Node.js 或Deno 環境中運行，包括Netlify Edge 和DigitalOcean 的App Platform。 Remix 本身是一個編譯器，一個將平台請求轉換為其運行平台的程序。此過程使用esbuild 為服務器請求創建處理程序。它使用的HTTP 處理程序基於Web Fetch API，並通過調整它們以適應將要部署到的平台而在服務器上運行。

Remix 堆棧

Remix 堆棧是預先配置了一些常用工具的項目。 Remix 團隊維護著三個官方堆棧，它們都以音樂類型命名。此外，還有許多社區Remix 堆棧，包括Netlify 模板團隊創建的K-Pop 堆棧。此堆棧功能強大，包括Supabase 數據庫和身份驗證、Tailwind 用於樣式設置、Cypress 端到端測試、Prettier 代碼格式化、ESLint 代碼檢查和TypeScript 靜態類型檢查。查看Tara Manicsic 關於部署K-Pop 堆棧的帖子。

緩存路由

即使Remix 需要服務器，它仍然可以通過緩存路由來利用Jamstack 的優勢。靜態站點或靜態站點生成(SSG) 是指您的所有內容都在構建時渲染，並在下一次重建之前保持靜態。內容是預生成的，可以放在CDN 上。這為最終用戶提供了許多好處和快速的站點加載速度。但是，Remix 不像其他流行的React 框架（包括Next.js 和Gatsby）那樣進行典型的SSG。為了獲得SSG 的一些好處，您可以使用Remix headers 函數中的原生Cache-Control HTTP 頭來緩存特定路由，或者直接在root.tsx 文件中緩存。

<code>[[headers]] for = "/build/*" [headers.values] "Cache-Control" = "public, max-age=31536000, s-maxage=31536000"</code>

然後在您需要的地方添加您的headers 函數。這將緩存一小時：

<code>export function headers() { return { "Cache-Control": "public, s-maxage=360", }; };</code>

Remix 路由

許多框架都依賴於基於文件系統的路由。這是一種使用指定文件夾來定義應用程序路由的技術。它們通常具有用於聲明動態路由和端點的特殊語法。目前Remix 與其他流行框架之間最大的區別在於能夠使用嵌套路由。

每個Remix 應用程序都從root.tsx 文件開始。這是渲染整個應用程序基礎的地方。您會在這裡找到一些常見的HTML 佈局，例如 標籤、 標籤，然後是 標籤以及渲染應用程序所需的組件。這裡要指出的一點是<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中文網其他相關文章！