歡迎使用 Remix
export async function loader({ request }) {
return getProjects();
}
export async function action({ request }) {
const form = await request.formData();
return createProject({
title: form.get("title"),
});
}
export default function Projects() {
const projects = useLoaderData();
const { state } = useNavigation();
const busy = state === "submitting";
return (
<div>
{projects.map((project) => (
<Link to={project.slug}>
{project.title}
</Link>
))}
<Form method="post">
<input name="title" />
<button type="submit" disabled={busy}>
{busy
? "Creating..."
: "Create New Project"}
</button>
</Form>
</div>
);
}
使用者評價
我一直在等待有東西鼓勵 React 領域的漸進式增強 *很久了*，而 Remix 真的是更多。證明我們不需要為了閃電般快速、易於存取的 UI 而犧牲 React 或選擇 SSG，而且開發體驗也太容易了 🤤
我的天啊 💩 Remix 太棒了
我剛在 Cloudflare Workers 和 Supabase 上重寫了我的第一個 Remix 應用程式，它真的太好用了
Remix 仍然讓我驚艷不已！如此簡單又優雅 😩。我喜歡它也專注於輔助功能（漸進式增強...）🤯，幾天前我還在想 Remix 是怎麼回事，我們有 Next.js 和 Svelte 😴 ...而現在我卻瘋狂地興奮起來了 😂。這真是太棒了 🤤
Remix 加載器真正酷的地方在於您可以在那裡完成大部分的資料轉換和計算，例如檢查列表是否為空、限制記錄數量、只傳送特定屬性，這樣您的 React 元件就只會接收資料並呈現它，不需要任何邏輯
Remix 將引導開發人員走上構建可存取、可擴展且效能良好的應用程式的快速通道，這些應用程式具有出色的使用者體驗和令人驚嘆的開發人體工學。這不僅對開發人員來說是勝利，對終端使用者來說也是一大勝利！
我認為 @remix_run 將成為猶豫是否採用全端 JavaScript 的企業團隊的遊戲規則改變者。核心概念非常直觀，您可以在一天內上手，甚至可以整合到您現有的堆疊中。
我喜歡 @mjackson 和 @ryanflorence 在 Remix 上所做的事情！在 30 秒內部署到 AWS Lambda 🤯
到目前為止，使用 @remix_run 進行開發非常棒。使用 Next.js 應用程式多年後，嵌套佈局是一個很棒的功能。而且我已經好多年沒有學到這麼多關於網路的知識了。
我喜歡使用 @remix_run 來建立我的網站。Remix 提高了我作為前端開發人員的生產力，使我能夠在前端和後端程式碼之間無縫切換。
如果您正在進行 #網頁開發，您應該看看 Remix 🔥 它是網頁開發的一種新的（舊的）範例，它簡化了我們的程式碼，尤其是狀態管理😅，加快了我們的頁面載入速度，並為我們提供了一個可以依靠來創造我們最佳作品的思維模型和框架
當您等待您的靜態網站建置時， 分散式網路 基礎設施變得非常完善。 突破靜態的限制。
Remix 是一個無縫的伺服器和瀏覽器執行階段，透過利用分散式系統和原生瀏覽器功能，而不是笨重的靜態建置，提供快速的頁面載入和即時轉換。建立在 Web Fetch API（而不是 Node）之上，它可以在任何地方執行。它已經在 Cloudflare Workers 上原生執行，當然也支援無伺服器和傳統的 Node.js 環境，所以您可以直接開始使用。
頁面速度只是我們真正目標的一個方面。我們追求的是 更好的使用者體驗。當您不斷推進網路的邊界時，您的工具並沒有跟上您的需求。 Remix 已準備好從初始請求到您的設計師可以想出的最精緻的 UX 為您服務。看看吧 👀
Remix 有一個作弊碼
嵌套路由。
網站通常具有控制子視圖的導覽層級。
這些元件不僅幾乎總是與 URL 片段耦合...
...它們也是資料載入和程式碼分割的語義邊界。
加載狀態呢？
大多數網路應用程式在元件內獲取資料，建立 請求瀑布、較慢的載入和 抖動。
Remix 在伺服器上平行載入資料，並傳送完全成形的 HTML 文件。 速度更快，沒有抖動。
預先擷取所有內容
Remix 可以在使用者點擊連結之前平行預先擷取所有內容。
公共資料。使用者資料。模組。甚至 CSS。
零加載狀態。零骨架 UI。零抖動。
好吧，您抓到我們了，它們只是預先擷取連結標籤，#使用平台
資料載入
您是否注意到應用程式中的大多數程式碼都是用於 變更資料？
想像一下，如果 React 只有 props 而沒有設定狀態的方法。那有什麼意義？如果一個網頁框架可以幫助您載入資料，卻無法幫助您更新資料，那又有什麼意義？Remix 不會將您丟在 <form onSubmit> 的懸崖邊。 （event.preventDefault 到底有什麼作用？）
它非常簡單，甚至有點可笑。只要建立一個表單...
...以及路由模組中的一個動作。它看起來像傳統的 HTML 表單，但可以實現您想要的完全動態的網路體驗。
Remix 在伺服器端執行動作，在用戶端重新驗證資料，甚至處理重新提交造成的競爭條件。
使用轉換掛鉤來獲得花哨的效果，並建立一些待定 UI。Remix 會處理所有狀態，您只需要求即可。
或者使用一些樂觀 UI 來獲得刺激。Remix 會提供傳送到伺服器的資料，因此您也可以跳過突變的繁忙微調器。
用於突變的 HTML 表單。誰知道呢？
export default function NewInvoice() {
return (
<Form method="post">
<input type="text" name="company" />
<input type="text" name="amount" />
<button type="submit">Create</button>
</Form>
);
}
export async function action({ request }) {
const body = await request.formData();
const invoice = await createInvoice(body);
return redirect(`/invoices/${invoice.id}`);
}
錯誤處理
路由錯誤邊界 讓快樂的路徑保持快樂。
每個路由模組都可以在預設路由元件旁邊匯出一個錯誤邊界。
如果拋出錯誤，無論是在用戶端還是伺服器端，使用者都會看到邊界，而不是預設元件。
沒有問題的路由會正常呈現，因此使用者擁有的選項多於猛按重新整理。
如果路由沒有邊界，則錯誤會向上冒泡。只要在頂部放一個，就可以在程式碼審查時放輕鬆，對吧？
