RemixJS 2 loader 函式

RemixJS 使用 react ，是架構簡潔的 SSR (Server Side Render) 框架。 它的每個頁面都有可能是 SSR 或 CSR (Client Side Render)，所以有特殊的兩個後端執行的函式 loader() 和 action()，頁面內的 components 則無。

loader() 的功能是在以 GET 拜訪時，於後端執行，通常是取得頁面要使用的資料。頁面裡 React component 可以使用 useLoaderData() hook 載入 loader() 回傳的資料。

loader() 並非必要的函式。另外，若沒有要回傳資料必須回傳 null。

// app/routes/address-book.edit.$sid.tsx
import { type LoaderFunctionArgs, redirect } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";
import dayjs from "dayjs";
import db from "~/modules/mysql-connect";
import { RowDataPacket } from "mysql2/promise";

export async function loader({ request, params }: LoaderFunctionArgs) {
  const sid = params.sid;
  const sql = `SELECT * FROM address_book WHERE sid=?`;
  const [rows] = await db.query<RowDataPacket[]>(sql, [sid]);
  if (rows.length) {
    rows[0].birthday = dayjs(rows[0].birthday).format("YYYY-MM-DD");
    return rows[0];  // useLoaderData() 可以取得此處回傳的資料
  } else {
    return redirect("/address-book");
  }
}

export default function AddressBookEdit() {
  const data = useLoaderData();
  return (
    <div className="container">
     </div>
  );
}

Layout 的 loader()

每層的 Layout 都有可能需要個別的資料呈現，所以每層的 loader() 會依序觸發。以檔案 app/routes/address-book.add.tsx 為例。依序會觸發下列檔案的 loader()。

app/root.tsx
app/routes/address-book.tsx
app/routes/address-book.add.tsx

然而，依邏輯 Layout 不應該有 action()，就算有也不會依機制呼叫。

API功能 (沒有頁面函式時)

如果該路由不是要呈現 HTML 頁面，而是提供 JSON 格式的資料時，可以只定義 loader() 而不定義頁面 react component 函式。

import {
  type LoaderFunctionArgs,
  json,
} from "@remix-run/node";

export async function loader({ request, params }: LoaderFunctionArgs) {
  return json({ name: "Shinder", method: request.method });
}