Next.jsのAPIのレスポンス速度の比較実験

Next.jsでPages RouterのAPI Routesを使うとレスポンスが遅い気がしました。 そこで、今回はNext.jsでPages RouterとApp RouterでAPI Routesのレスポンス速度を比較しました。

本当にただの個人的なメモです。Zennに投稿するまでもないものなので自分のブログに残しておきます。

比較するもの

今回はシンプルにHello Worldを返すAPIのレスポンス速度を比較します。 また、middlewareを挟んだパターンも測定しました。

前提条件

使用したバージョンは下記の通りです。

"dependencies": {
  "next": "14.0.4",
  "react": "18.2.0",
  "react-dom": "18.2.0"
},

実装

今回実装したものはGitHubリポジトリで公開しております。 https://github.com/andmohiko/next-api-hello-world

実験結果

Pages Router

Hello Worldが返ってくるまでに99.56msかかりました。

middlewareを挟むと200.87msかかりました。

App Router

Hello Worldが返ってくるまでに31.60msかかりました。

middlewareを挟むと54.12msかかりました。

まとめ

App RouterのAPI Routesを使いましょう。