Open16
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
順位
- Next.js on Vercel / SSG
- Remix on Cloudflare Workers / SSR(w/ KV)
- Next.js on Vercel / SSR
- 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)
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を選択)
比較
- Remix on Croudflare Workers / SSR
- Remix on Croudflare Workers / SSR (w/ KV)
- Next.js on Vercel / SSR
- Next.js on Vercel / SSG
- 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 |
順位(平均 | 中央)
- Next.js on Vercel / SSG | 77.61ms | 75.97ms
- Remix on Croudflare Workers / SSR (w/ KV) | 100.24ms | 97.70ms
- Remix on Croudflare Workers / SSR | 173.25ms | 171.57ms
- Remix on Vercel / SSR | 337.45ms | 344.38ms
- 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