Remix on Cloudflare Workers と Next.js on Vercel で TTFB 比較してみた

前提

• 共通
  • データプロキシ&クライアント: Prisma.io (us-east-1)
  • データソース: Supabase (us-east-1)
• Remix
  • デプロイ: Cloudflare Workers
  • 完全非キャッシュSSR / KVによるデータクエリキャッシュ+SSR
    • ※KV利用の方はPrismaのデータフェッチが一切発生しません
• Next.js
  • デプロイ: Vercel (Serverless: Tokyo Region)
  • SSR(キャッシュヘッダなし) / SSG

比較物

ともにPC用のスタイルしか用意していないため、PCで閲覧してください

• Remix x Cloudflare: https://remix-cloudflare-workers.aiji422990.workers.dev/
  • 左下の紫のボタンで 完全非キャッシュSSR / KVによるデータクエリキャッシュ+SSR を切り替えられます
  • たまにエラーで開けないときがあります。その際はシークレットブラウザで開き直してみてください。
  • github
• Next.js x Vercel: https://next-sample-for-performance.vercel.app/
  • 左下の紫のボタンで SSR / SSG を切り替えられます
  • github

Remix on Cloudflare Workers / SSR

2021/11/28 11:30 PM頃

	TTFB
1回目	977.60ms
2回目	926.14ms
3回目	974.03ms
4回目	2.58s
5回目	1.04s

※ すべてトップページの計測です

平均:1299.55ms 中央値:977.6ms

Remix on Cloudflare Workers / SSR (w/ KV)

2021/11/28 11:30 PM頃

	TTFB
1回目	326.64ms
2回目	339.88ms
3回目	351.14ms
4回目	418.04ms
5回目	350.24ms
※ すべてトップページの計測です

平均: 357.188ms 中央値: 350.24ms

Next.js on Vercel / SSR

2021/11/28 11:30 PM頃

	TTFB
1回目	435.86ms
2回目	580.08ms
3回目	581.06ms
4回目	720.56ms
5回目	438.99ms
※ すべてトップページの計測です

平均:551.31ms 中央値:580.08ms

Next.js on Vercel / SSG

2021/11/28 11:30 PM頃

	TTFB
1回目	62.08ms
2回目	65.31ms
3回目	58.61ms
4回目	67.44ms
5回目	126.85ms
※ すべてトップページの計測です

平均:76.058 中央値:65.31

順位

1. Next.js on Vercel / SSG
2. Remix on Cloudflare Workers / SSR(w/ KV)
3. Next.js on Vercel / SSR
4. Remix on Cloudflare Workers / SSR

時間帯を変えて計測し直したところ、Remix on Cloudflare Workers / SSR (w/ KV) の構成で大きな変化があった。
2021/11/29 02:30 AM 頃

Remix on Cloudflare Workers / SSR (w/ KV) 再計測

	TTFB
1回目	68.34ms
2回目	83.61ms
3回目	104.21ms
4回目	72.16ms
5回目	99.48ms

平均:85.56 中央値:83.61

タイミングによっては Next.js on Vercel / SSG 並のTTFBで応答している

比較対象追加

• Remix on Vercel (SSR only)
  • https://remix-sample-vercel-2.vercel.app/

Remix on Vercel / SSR

2021/11/29 2:40頃

	TTFB
1回目	273.43ms
2回目	381.16ms
3回目	230.66ms
4回目	384.61ms
5回目	226.76ms

平均:299.324 中央値:273.43

データソースのラウンドトリップタイムを考慮し構成を変更

• データソース: supabase (Tokyoリージョン)
• データクライアント: supabase-js
• (Vercelを選択したものは、serverlessリージョンにTokyoを選択)

比較

1. Remix on Croudflare Workers / SSR
2. Remix on Croudflare Workers / SSR (w/ KV)
3. Next.js on Vercel / SSR
4. Next.js on Vercel / SSG
5. Remix on Vercel / SSR

(各種URLやGithub等はスクラップ冒頭にある通り)

Remix on Croudflare Workers / SSR

2021/11/30 10:00 PM 頃

	TTFB
1回目	170.15ms
2回目	158.07ms
3回目	188.01ms
4回目	171.57ms
5回目	178.46ms
平均	173.25ms
中央	171.57ms

Remix on Croudflare Workers / SSR (w/ KV)

2021/11/30 10:00 PM 頃

	TTFB
1回目	97.70ms
2回目	125.22ms
3回目	149.54ms
4回目	62.93ms
5回目	65.83ms
平均	100.24ms
中央	97.70ms

Next.js on Vercel / SSR

2021/11/30 10:00 PM 頃

	TTFB
1回目	372.90ms
2回目	537.25ms
3回目	369.72ms
4回目	397.89ms
5回目	379.72ms
平均	411.50ms
中央	379.72ms

Next.js on Vercel / SSG

2021/11/30 10:00 PM 頃

	TTFB
1回目	63.82ms
2回目	91.1ms
3回目	71.39ms
4回目	75.97ms
5回目	85.75ms
平均	77.61ms
中央	75.97ms

Remix on Vercel / SSR

2021/11/30 10:00 PM 頃

	TTFB
1回目	344.38ms
2回目	323.06ms
3回目	391.45ms
4回目	378.81ms
5回目	249.57ms
平均	337.45ms
中央	344.38ms

順位(平均 | 中央)

1. Next.js on Vercel / SSG | 77.61ms | 75.97ms
2. Remix on Croudflare Workers / SSR (w/ KV) | 100.24ms | 97.70ms
3. Remix on Croudflare Workers / SSR | 173.25ms | 171.57ms
4. Remix on Vercel / SSR | 337.45ms | 344.38ms
5. Next.js on Vercel / SSR | 411.50ms | 379.72ms

バンドル比較

前述のRemixとNext.jsのリソースマップのキャプチャ
Remixの方がサイズが小さい

Remix

ALL: 218.9KiB / Unsued: 91.1KiB

Next.js

ALL: 269.0KiB / Unsued: 102.1KiB