十九、`defer` 与流式数据：先让主货物靠岸，次要货柜后到

有些页面不是所有数据都同等重要。

比如船舶详情页：

基本信息必须立刻展示
历史日志可以晚一点
评论、附件、审计轨迹可以稍后到

Remix 提供 defer + Await 这一套流式思路：

tsx

import type { LoaderFunctionArgs } from "@remix-run/node";
import { defer } from "@remix-run/node";
import { Await, useLoaderData } from "@remix-run/react";
import { Suspense } from "react";

export async function loader({ params }: LoaderFunctionArgs) {
  const ship = await getShipById(params.shipId!);
  const logsPromise = getShipLogs(params.shipId!);

  return defer({
    ship,
    logs: logsPromise,
  });
}

export default function ShipRoute() {
  const { ship, logs } = useLoaderData<typeof loader>();

  return (
    <div>
      <h1>{ship.name}</h1>

      <Suspense fallback={<p>航运日志装卸中...</p>}>
        <Await resolve={logs}>
          {(resolvedLogs) => (
            <ul>
              {resolvedLogs.map((log) => (
                <li key={log.id}>{log.message}</li>
              ))}
            </ul>
          )}
        </Await>
      </Suspense>
    </div>
  );
}

这个模型特别像真实港口：

主货先靠岸，保证港口开始运转
次级货柜稍后吊装
用户尽早看到关键内容

这类能力在内容和 SEO 相关页面里尤其有价值，但要注意： 不要把真正的关键首屏信息全 defer 掉。