[[437227]]

大家好，我是皮湯。周五翻 Github 趨勢(shì)榜看到了 Remix 這個(gè)內(nèi)容，覺得挺有發(fā)展前景的，初步了解了一下具體的特性，分享給大家。

近期，由 React Router 原班團(tuán)隊(duì)打造，基于 TypeScript 與 React，內(nèi)建 React Router V6 特性的全棧 Web 框架 Remix 正式開源。目前占據(jù) Github 趨勢(shì)總榜前 3，Github 標(biāo)星 5K+ Star：

Remix 開源之后可以說是在 React 全棧框架領(lǐng)域激起千層浪，絕對(duì)可以算是 Next.js 的強(qiáng)勁對(duì)手。Remix 的特性如下：

• 追求速度，然后是用戶體驗(yàn)(UX)，支持任何 SSR/SSG 等
• 基于 Web 基礎(chǔ)技術(shù)，如 HTML/CSS 與 HTTP 以及 Web Fecth API，在絕大部分情況可以不依賴于 JavaScript 運(yùn)行，所以可以運(yùn)行在任何環(huán)境下，如 Web Browser、Cloudflare Workers、Serverless 或者 Node.js 等
• 客戶端與服務(wù)端一致的開發(fā)體驗(yàn)，客戶端代碼與服務(wù)端代碼寫在一個(gè)文件里，無縫進(jìn)行數(shù)據(jù)交互，同時(shí)基于 TypeScript，類型定義可以跨客戶端與服務(wù)端共用
• 內(nèi)建文件即路由、動(dòng)態(tài)路由、嵌套路由、資源路由等
• 干掉 Loading、骨架屏等任何加載狀態(tài)，頁面中所有資源都可以預(yù)加載(Prefetch)，頁面幾乎可以立即加載
• 告別以往瀑布式(Waterfall)的數(shù)據(jù)獲取方式，數(shù)據(jù)獲取在服務(wù)端并行(Parallel)獲取，生成完整 HTML 文檔，類似 React 的并發(fā)特性
• 提供開發(fā)網(wǎng)頁需要所有狀態(tài)，開箱即用；提供所有需要使用的組件，包括 <Links> 、<Link>、 <Meta> 、<Form> 、<Script/> ，用于處理元信息、腳本、CSS、路由和表單相關(guān)的內(nèi)容
• 內(nèi)建錯(cuò)誤處理，針對(duì)非預(yù)期錯(cuò)誤處理的 <ErrorBoundary> 和開發(fā)者拋出錯(cuò)誤處理的 <CatchBoundary>

特性這么多?不明覺厲!接下來我們就嘗試一一來展示這些 Remix 的特性🚀。

一致的開發(fā)體驗(yàn)

Remix 提供基于文件的路由，將讀取數(shù)據(jù)、操作數(shù)據(jù)和渲染數(shù)據(jù)的邏輯都寫在同一個(gè)路由文件里，方便一致性處理，這樣可以跨客戶端和服務(wù)端邏輯共享同一套類型定義。

看一段官網(wǎng)的代碼：

import type { Post } from "~/post"; 
import { Outlet, Link, useLoaderData, useTransition } from "remix"; 
 
let postsPath = path.join(__dirname, "..", "posts"); 
 
async function getPosts() { 
  let dir = await fs.readdir(postsPath); 
  return Promise.all( 
    dir.map(async (filename) => { 
      let file = await fs.readFile(path.join(postsPath, filename)); 
      let { attributes } = parseFrontMatter(file.toString()); 
      invariant( 
        isValidPostAttributes(attributes), 
        `${filename} has bad meta data!` 
      ); 
      return { 
        slug: filename.replace(/.md$/, ""), 
        title: attributes.title, 
      }; 
    }) 
  ); 
} 
 
async function createPost(post: Post) { 
  let md = `---\ntitle: ${post.title}\n---\n\n${post.markdown}`; 
  await fs.writeFile(path.join(postsPath, post.slug + ".md"), md); 
  return getPost(post.slug); 
} 
 
export async function loader({ request }) { 
  return getProjects(); 
} 
 
export async function action({ request }) { 
  let form = await request.formData(); 
  const post = createPost({ title: form.get("title") }); 
  return redirect(`/posts/${post.id}`); 
} 
 
export default function Projects() { 
  let posts = useLoaderData<Post[]>(); 
  let { state } = useTransition(); 
  let busy = state === "submitting"; 
 
  return ( 
    <div> 
      {posts.map((post) => ( 
        <Link to={post.slug}>{post.title}</Link> 
      ))} 
 
      <Form method="post"> 
        <input name="title" /> 
        <button type="submit" disabled={busy}> 
          {busy ? "Creating..." : "Create New Post"} 
        </button> 
      </Form> 
       
      <Outlet /> 
    </div> 
  ); 
} 

上述是一個(gè)路由文件，如果它是 src/routes/posts/index.tsx 文件，那么我們開啟服務(wù)器，通過 localhost:3000/posts 就可以訪問到這個(gè)文件，這就是文件即路由，而默認(rèn)導(dǎo)出的 Projects 函數(shù)，即為一個(gè) React 函數(shù)式組件，此函數(shù)的返回模板則為訪問這個(gè)路由的 HTML 文檔。

• 每個(gè)路由函數(shù)，如 Projects 可以定義一個(gè) loader 函數(shù)，類似處理 GET 請(qǐng)求的服務(wù)端函數(shù)，可以獲取到路由信息，為初次服務(wù)端渲提供數(shù)據(jù)，在這個(gè)函數(shù)中可以獲取文件系統(tǒng)、請(qǐng)求數(shù)據(jù)庫(kù)、進(jìn)行其他網(wǎng)絡(luò)請(qǐng)求，然后返回?cái)?shù)據(jù)，在我們的 Projects 組件里，可以通過 Remix 提供的 useLoaderData 鉤子拿到 loader 函數(shù)獲取到的數(shù)據(jù)。
• 每個(gè)路由函數(shù)也可以定義一個(gè) action 函數(shù)，用于進(jìn)行實(shí)際的操作，類似處理非 GET 請(qǐng)求，如 POST/PUT/PATCH/DELETE 的操作的函數(shù)，它可以操作修改數(shù)據(jù)庫(kù)、寫入文件系統(tǒng)等，同時(shí)其返回的結(jié)果可能是實(shí)際的數(shù)據(jù)或是重定向到某個(gè)新頁面，如 redirect("/admin")。當(dāng) action 函數(shù)返回?cái)?shù)據(jù)或錯(cuò)誤信息時(shí)，我們可以通過 Remix 提供的 useActionData 鉤子拿到這個(gè)返回的錯(cuò)誤信息，進(jìn)行前端的展示等。

值得注意的是，action 函數(shù)是在 <Form method="post"> 表單里，用戶點(diǎn)擊提交按鈕之后自動(dòng)調(diào)用，Remix 通過 Fetch API 的形式去調(diào)用，然后在前端不斷的輪詢獲取調(diào)用結(jié)果，且自動(dòng)處理用戶多次點(diǎn)擊時(shí)的競(jìng)爭(zhēng)情況。

// src/root.tsx 
import { 
  Outlet, 
   
export default function App() { 
  return ( 
    <Document> 
      <Layout> 
        <Outlet /> 
      </Layout> 
    </Document> 
  ); 
} 
 
function Document() {} 
function Layout() {} 

// src/routes/admin.tsx 
import { Outlet, Link, useLoaderData } from "remix"; 
import { getPosts } from "~/post"; 
import type { Post } from "~/post"; 
import adminStyles from "~/styles/admin.css"; 
 
export let links = () => { 
  return [{ rel: "stylesheet", href: adminStyles }]; 
}; 
 
export let loader = () => { 
  return getPosts(); 
}; 
 
export default function Admin() { 
  let posts = useLoaderData<Post[]>(); 
  return ( 
    <div className="admin"> 
      <nav> 
        <h1>Admin</h1> 
        <ul> 
          {posts.map((post) => ( 
            <li key={post.slug}> 
              <Link to={post.slug}>{post.title}</Link> 
            </li> 
          ))} 
        </ul> 
      </nav> 
      <main> 
        <Outlet /> 
      </main> 
    </div> 
  ); 
} 

// src/routes/admin/index.tsx 
import { Link } from "remix"; 
 
export default function AdminIndex() { 
  return ( 
    <p> 
      <Link to="new">Create a New Post</Link> 
    </p> 
  ); 
} 

// src/routes/admin/new.tsx 
import { useTransition, useActionData, redirect, Form } from "remix"; 
import type { ActionFunction } from "remix"; 
import { createPost } from "~/post"; 
import invariant from "tiny-invariant"; 
 
export let action: ActionFunction = async ({ request }) => { 
  await new Promise((res) => setTimeout(res, 1000)); 
  let formData = await request.formData(); 
 
  let title = formData.get("title"); 
  let slug = formData.get("slug"); 
  let markdown = formData.get("markdown"); 
 
  let errors = {}; 
  if (!title) errors.title = true; 
  if (!slug) errors.slug = true; 
  if (!markdown) errors.markdown = true; 
 
  if (Object.keys(errors).length) { 
    return errors; 
  } 
 
  await createPost({ title, slug, markdown }); 
 
  return redirect("/admin"); 
}; 
 
export default function NewPost() { 
  let errors = useActionData(); 
  let transition = useTransition(); 
 
  return ( 
    <Form method="post"> 
      <p> 
        <label> 
          Post Title: {errors?.title && <em>Title is required</em>} 
          <input type="text" name="title" /> 
        </label> 
      </p> 
      <p> 
        <label> 
          Post Slug: {errors?.slug && <em>Slug is required</em>}{" "} 
          <input type="text" name="slug" /> 
        </label> 
      </p> 
      <p> 
        <label htmlFor="markdown">Markdown:</label>{" "} 
        {errors?.markdown && <em>Markdown is required</em>} 
        <br /> 
        <textarea rows={20} name="markdown" /> 
      </p> 
      <p> 
        <button type="submit"> 
          {transition.submission ? "Create..." : "Create Post"} 
        </button> 
      </p> 
    </Form> 
  ); 
} 

上述代碼渲染的頁面如下：

整個(gè) App 網(wǎng)站是由 <Document> 嵌套 <Layout> 組成，其中 <Outlet> 是路由的填充處，即上圖中綠色的部分。當(dāng)我們?cè)L問 localhost:3000/ 時(shí)，其中填充的內(nèi)容為 src/routes/index.tsx 路由文件對(duì)應(yīng)的渲染內(nèi)容，而當(dāng)我們?cè)L問 localhost:3000/admin 時(shí)，對(duì)應(yīng)的是 src/routes/admin.tsx 路由文件對(duì)應(yīng)的渲染內(nèi)容。

而我們?cè)?的 src/routes/admin.tsx 繼續(xù)提供了 <Outlet> 路由顯然組件，意味著當(dāng)我們繼續(xù)添加分級(jí)（嵌套）路由時(shí)，如訪問 http://localhost:3000/admin/new 那么這個(gè) <Outlet> 會(huì)渲染 src/routes/admin/new.tsx 對(duì)應(yīng)路由文件的渲染內(nèi)容，而訪問 http://localhost:3000/admin 時(shí)，<Outlet> 部分會(huì)渲染 src/routes/admin/index.tsx 對(duì)應(yīng)路由文件的渲染內(nèi)容，見下圖：

而這種嵌套路由是自動(dòng)發(fā)生的，當(dāng)你創(chuàng)建了一個(gè) src/routes/admin.tsx 之后，又創(chuàng)建了一個(gè)同名的文件夾，并在文件夾下建立了其它文件，那么這些文件的文件名會(huì)被注冊(cè)為下一級(jí)的嵌套路由名：

• localhost:3000/admin 同時(shí)注冊(cè) src/routes/admin.tsx 和 src/routes/admin/index.tsx
• localhost:3000/admin/new 注冊(cè) src/routes/admin/new.tsx

通過這種文件即路由，同名文件夾下文件即嵌套路由的方式，然后通過在父頁面里面通過 的方式渲染根據(jù)子路由渲染子頁面內(nèi)容，極大的增加了靈活性，且每個(gè)子路由對(duì)應(yīng)獨(dú)立的路由文件，具有獨(dú)立的數(shù)據(jù)處理邏輯、內(nèi)容渲染邏輯、錯(cuò)誤處理邏輯。

上述嵌套路由一個(gè)顯而易見的優(yōu)點(diǎn)就是，某個(gè)部分如果報(bào)錯(cuò)了，結(jié)合后續(xù)會(huì)提到的 ErrorBoundary 和 CatchBoundary 這個(gè)部分可以顯示錯(cuò)誤的頁面，而用戶仍然可以操作其他部分，而不需要刷新整個(gè)頁面以重新加載使用，極大提高網(wǎng)站容錯(cuò)性。

 再見，加載狀態(tài)

通過嵌套路由，Remix 可以干掉幾乎所有的加載狀態(tài)、骨架屏，現(xiàn)在很多應(yīng)用都是在前端組件里進(jìn)行數(shù)據(jù)獲取，獲取前置數(shù)據(jù)之后，然后用前置數(shù)據(jù)去獲取后置的數(shù)據(jù)，形成了一個(gè)瀑布式的獲取形式，當(dāng)數(shù)據(jù)量大的時(shí)候，頁面加載就需要很長(zhǎng)時(shí)間，所以絕大部分網(wǎng)站都會(huì)放一個(gè)加載的狀態(tài)，如小菊花轉(zhuǎn)圈圈，或者體驗(yàn)更好一點(diǎn)的骨架屏，如下：

這是因?yàn)檫@些應(yīng)用缺乏類似 Remix 這樣的嵌套路由的概念，訪問某個(gè)路由時(shí)，就是訪問這個(gè)路由對(duì)應(yīng)的頁面，只有這個(gè)頁面加載出來之后，里面的子組件渲染時(shí)，再進(jìn)行數(shù)據(jù)的獲取，再加載子組件，如此往復(fù)，就呈現(xiàn)瀑布流式的加載，帶來了很多中間的加載狀態(tài)。

而 Remix 提供了嵌套路由，當(dāng)訪問路由 localhost:3000/admin/new 時(shí)，會(huì)加載三級(jí)路由，同時(shí)這三個(gè)路由對(duì)應(yīng)的頁面獨(dú)立、并行加載，獨(dú)立、并行獲取數(shù)據(jù)，最后發(fā)送給客戶端的是一個(gè)完整的 HTML 文檔，如下過程：

可見雖然我們首屏拿到內(nèi)容可能會(huì)慢一點(diǎn)，但是再也不需要加載狀態(tài)，再見，菊花圖 👋🏻，再見，骨架屏👋🏻。

[[437231]]

同時(shí)借助嵌套路由，當(dāng)我們鼠標(biāo) Hover 到某個(gè)鏈接準(zhǔn)備點(diǎn)擊切換某個(gè)子路由時(shí)，Remix 提供了預(yù)獲取(Prefetch)功能，可以提前并行獲取子路由文檔和各種資源，包括 CSS、圖片、相關(guān)數(shù)據(jù)等，這樣當(dāng)我們實(shí)際點(diǎn)擊這個(gè)鏈接切換子路由時(shí)，頁面可以立即呈現(xiàn)出來：

 完善的錯(cuò)誤處理

我們的網(wǎng)站經(jīng)常會(huì)遇到問題，使用其他框架編寫時(shí)，網(wǎng)站遇到問題可能用戶就需要重新刷新網(wǎng)站，而對(duì)于 Remix 來說，基于嵌套路由的理念，則無需重新刷新，只需要在對(duì)應(yīng)的錯(cuò)誤的子路由展示錯(cuò)誤信息，而頁面的其他部分仍然可以正常工作：

比如我們上圖的右下角子路由出現(xiàn)了問題，那么這塊會(huì)展示出問題時(shí)的錯(cuò)誤頁面，而其他頁面部分仍然展示正常的信息。

正因?yàn)殄e(cuò)誤經(jīng)常發(fā)生，且處理錯(cuò)誤異常困難，包含客戶端、服務(wù)端的各種錯(cuò)誤，包含預(yù)期的、非預(yù)期的錯(cuò)誤等，所以 Remix 內(nèi)建了完善的錯(cuò)誤處理機(jī)制，提供了類似 React 的 ErrorBoundary 的理念。

在 Remix 中，每個(gè)路由函數(shù)對(duì)應(yīng)一個(gè) ErrorBoundary 函數(shù)：

export default function RouteFunction() {} 
 
export function ErrorBoundary({ error }) { 
  console.error(error); 
  return ( 
    <div> 
      <h2>Oh snap!</h2> 
      <p> 
        There was a problem loading this invoice 
      </p> 
    </div> 
  ); 
} 

ErrorBoundary 函數(shù)代表處理那些來自 loader 和 action，客戶端或服務(wù)端的非預(yù)期的錯(cuò)誤，當(dāng)出現(xiàn)這些非預(yù)期的錯(cuò)誤時(shí)，就會(huì)激活這個(gè)函數(shù)，顯示對(duì)應(yīng)函數(shù)的表示錯(cuò)誤信息的 UI。

同時(shí)每個(gè)路由函數(shù)對(duì)應(yīng)著一個(gè) CatchBoundary 函數(shù)：

import { useCatch } from "remix"; 
 
export function CatchBoundary() { 
  let caught = useCatch(); 
 
  return ( 
    <div> 
      <h1>Caught</h1> 
      <p>Status: {caught.status}</p> 
      <pre> 
        <code>{JSON.stringify(caught.data, null, 2)}</code> 
      </pre> 
    </div> 
  ); 
} 

CatchBoundary 函數(shù)對(duì)應(yīng)著預(yù)期的錯(cuò)誤，即你在 loader、action 函數(shù)中，在客戶端或服務(wù)端，手動(dòng)拋出的 Response 錯(cuò)誤，這些錯(cuò)誤的路徑是可預(yù)期的，在 CatchBoundary 中，通過 useCatch 鉤子獲取這些拋出的 Response 錯(cuò)誤，然后展示對(duì)于的錯(cuò)誤信息的 UI。

當(dāng)我們沒有在子路由中添加 ErrorBoundary 或 CatchBoundary 函數(shù)時(shí)，一旦遇到錯(cuò)誤，這些錯(cuò)誤就會(huì)向更上一級(jí)的路由冒泡，直至最頂層的路由頁面，所以你只最好在最頂層的路由文件里聲明一個(gè) ErrorBoundary 和 CatchBoundary 函數(shù)，用于捕獲所有可能的錯(cuò)誤，然后在代碼審查( Code Review)時(shí)及時(shí)排查出來。

 基于 Web 基礎(chǔ)技術(shù)

Remix 專注于用 Web 基礎(chǔ)技術(shù)，HTML/CSS + HTTP 等解決問題，同時(shí)提供了在 Web 全棧開發(fā)框架中所需要的所有狀態(tài)和所有基礎(chǔ)組件。

其中相關(guān)狀態(tài)包含：

// 加載數(shù)據(jù)的狀態(tài) 
useLoaderData() 
 
// 更新數(shù)據(jù)的狀態(tài) 
useActionData() 
 
// 提交表單等相關(guān)狀態(tài) 
useFormAction() 
useSubmit() 
 
// 統(tǒng)一的加載狀態(tài) 
useTransition() 
 
// 錯(cuò)誤抓取狀態(tài)等 
useCatch() 

以及 Web 網(wǎng)站組成的基礎(chǔ)組件：

• <Meta> 用于動(dòng)態(tài)的設(shè)置網(wǎng)頁的元信息，方便 SEO
• <Script> 用于告知 Remix 是否需要在加載網(wǎng)頁時(shí)導(dǎo)入相關(guān) JS，因?yàn)榇蟛糠智闆r下 Remix 編寫的頁面無需 JS 也能正常工作
• <Form> 用于替代原生的 <form> 方便在客戶端和服務(wù)端進(jìn)行表單操作，接管提交時(shí)的相應(yīng)功能，使用 Fetch API 發(fā)起請(qǐng)求等，以及處理多次重復(fù)提交的競(jìng)爭(zhēng)狀態(tài)等

同時(shí)在路由函數(shù)所在文件里，可以通過聲明 link 、meta 、links 、headers 等函數(shù)來聲明對(duì)應(yīng)的功能：

• links 變量函數(shù)：表示此頁面需要加載的資源，如 CSS、圖片等

import type { LinksFunction } from "remix"; 
import stylesHref from "../styles/something.css"; 
 
export let links: LinksFunction = () => { 
  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, remix will fingerprint the file name for 
    // production caching 
    { rel: "stylesheet", href: stylesHref }, 
 
    // prefetch an image into the browser cache that the user is likely to see 
    // as they interact with this page, perhaps they click a button to reveal in 
    // a summary/details element 
    { 
      rel: "prefetch", 
      as: "image", 
      href: "/img/bunny.jpg" 
    }, 
 
    // only prefetch it if they're on a bigger screen 
    { 
      rel: "prefetch", 
      as: "image", 
      href: "/img/bunny.jpg", 
      media: "(min-width: 1000px)" 
    } 
  ]; 
}; 

• links 函數(shù)：聲明需要 Prefetch 的頁面，當(dāng)用戶點(diǎn)擊之前就加載好資源

export function links() { 
  return [{ page: "/posts/public" }]; 
} 

• meta 函數(shù)：與 組件類似，聲明頁面需要的元信息

import type { MetaFunction } from "remix"; 
 
export let meta: MetaFunction = () => { 
  return { 
    title: "Josie's Shake Shack", // <title>Josie's Shake Shack</title> 
    description: "Delicious shakes", // <meta name="description" content="Delicious shakes"> 
    "og:image": "https://josiesshakeshack.com/logo.jpg" // <meta property="og:image" content="https://josiesshakeshack.com/logo.jpg"> 
  }; 
}; 

• headers 函數(shù)：定義此頁面發(fā)送 HTTP 請(qǐng)求時(shí)，帶上的請(qǐng)求頭信息

export function headers({ loaderHeaders, parentHeaders }) { 
  return { 
    "X-Stretchy-Pants": "its for fun", 
    "Cache-Control": "max-age=300, s-maxage=3600" 
  }; 
} 

由此可見，Remix 提供了整個(gè)全棧 Web 開發(fā)生命周期所需要的幾乎的一切內(nèi)容，且內(nèi)置最佳實(shí)踐，確保你付出很少的努力就能開發(fā)出性能卓越、體驗(yàn)優(yōu)秀的網(wǎng)站!

當(dāng)然這篇文章并不能包含所有 Remix 的特性，看到這里仍然對(duì) Remix 感興趣的同學(xué)可以訪問官網(wǎng)(https://remix.run/)詳細(xì)了解哦~ 官網(wǎng)提供了非常詳細(xì)的實(shí)戰(zhàn)教程幫助你使用 Remix 開發(fā)實(shí)際的應(yīng)用。

了解了 Remix 的特性之后，你對(duì) Remix 有什么看法呢?你覺得它能超過 Next.js 🐴?