Remix+CloudflareでWebサイトを作る 40（v2.13でheaders機能せず、TTFBが3.8sかかってる問題、計測する、Waterfallを理解する）

 【2024-10-29】Remix v2.13を使ってからheadersが使えなくなっているせいかBasic認証が機能していない
 背景https://zenn.dev/link/comments/5cca3749bb46d0
ここのような実装でBasic認証を行っている。

ずっと開発環境でキャッシュがある状態で動かしていて気が付かなかったがステージング環境でBasic認証が動かなくなっていた。
具体的には以下のheaderがnullになってしまいBasic認証の入力欄が出る前に認証エラーとなってしまう。
// コードは上記のサイトのものを引用
import { HeadersFunction, json, LoaderFunction, useLoaderData } from "remix";

export const headers: HeadersFunction = () => ({
  "WWW-Authenticate": "Basic",
});

const isAuthorized = (request: Request) => {
  const header = request.headers.get("Authorization"); // ここが常にnullになってしまう

  if (!header) return false;

  const base64 = header.replace("Basic ", "");
  const [username, password] = Buffer.from(base64, "base64")
    .toString()
    .split(":");

  // 環境変数などでIDとパスワードを渡す
  return username === "admin" && password === "password";
};

export const loader: LoaderFunction = async ({ request }) => {
  if (!isAuthorized(request)) {
    return json({ authorized: false }, { status: 401 });
  }

  // 認証されたページで利用するデータ

  return json({
    authorized: true,
    // 認証されたページで利用するデータを送る
  });
};

 v2.13から headers関数が変わった？Remix v2.9 で導入された Single Fetch
Single Fetch では headers 関数を export していても、その値はもはや使用されません。代わりに loader/action 関数の引数で受けとる response オブジェクトを直接変更することでレスポンスヘッダーやステータスコードを設定できます。
そういやだいぶ前にSingle Fetchについてこのサイトを見たときにheadersについての言及があったな、と思ったのでheadersの仕様を調べる。
// つまり、ここの書き方がバージョンアップによって変わったのでは？ということ
export const headers: HeadersFunction = () => ({
  "WWW-Authenticate": "Basic",
});

 公式ドキュメントによると？https://remix.run/docs/en/main/route/headers
上記ブログでは「直接変更」という記述があったが公式ドキュメントを見る限りheaders使ってそうだけど。

 結論色々試してみたけど解決できず。

絶対にないとダメな機能でもないし気が向いたらまたやろ。

 その他
「HTTP」の仕組みをおさらいしよう（その4）：リトライ！ 触って学ぶTCP/IP（5）（1/2 ページ） - ＠IT

WWW-Authenticate のおさらい

zett-8

自分も同じ問題で詰まってこの記事にたどり着きました。
entry.server.tsx で header set することで解決しました。
残りのコードは同じです(Buffer だとエラーになったので atob を使いましたが)

余計なお世話でしたらすみません🙏

// entry.server.tsx
export default async function handleRequest(
  request: Request,
  responseStatusCode: number,
  responseHeaders: Headers,
  remixContext: EntryContext,
  loadContext: AppLoadContext
) {
  // 省略...

  responseHeaders.set('WWW-Authenticate', `Basic realm="User Visible Realm", charset="UTF-8"`)
  return new Response(body, {
    headers: responseHeaders,
    status: responseStatusCode,
  })
}

回数	TTFB	Content Download	Explanation
1回目	847ms	2.41s	3.78s
2回目	195ms	633ms	837ms
3回目	653ms	216ms	889ms
4回目	636ms	159ms	795ms
5回目	620ms	736ms	1.44s
6回目	677ms	553	1.35s
7回目（6回目のあとすぐ実行）	131ms	123ms	275ms
8回目（7回目から2分後）	158ms	346ms	509ms

【2024-10-29】Remix v2.13を使ってからheadersが使えなくなっているせいかBasic認証が機能していない

背景

v2.13から headers関数が変わった？

公式ドキュメントによると？

結論

その他

【2024-10-29】D1→Tursoにしたしトランザクション処理を書こう

背景

Tursoはできそう？

TursoにしたしD1のError in performIO: Error: D1_ERROR: too many SQL variables at offset 503: SQLITE_ERROR も解決された

【2024-10-30】ルートドキュメントの読み込みに3800msかかっている

背景

キャッシュは効いてる

考えられる原因

1. HTMLファイルのサイズ

2. サーバーが遠い？

オリジンサーバー

Cloudflare Pages？

Cloudflare Workers？

そもそもCloudflare Workersがこのアプリにミスマッチでは

Service Binding？

【2024-10-30】Networkタブで計測する

測定

1回目

2回目

3回目

5回目

まとめ

参考

【2024-10-30】NetworkのWaterfallの項目を理解する

Resource Scheduling

Queueing

Connection Start

Stalled

DNS Lookup

Initial connection

SSL

Waiting for server response

補足

Content Download

参考

【2024-10-30】ページの描画速度とユーザー体験

参考

TursoにしたしD1の`Error in performIO: Error: D1_ERROR: too many SQL variables at offset 503: SQLITE_ERROR` も解決された