SSG pages and API routes generating exessive amount of serverless functions #1
Description
When adding a single API route handler to a collection of static pages produced by SSG (getStaticPaths + getStaticProps) through Next.js, Vercel is currently generating excessive serverless functions.
It is important to note the following:
- The code is compiled by the latest version of Next.js
13.1.1 - The API route does not include anything related to other pages
- The API route is not even used by other pages
- Based on the legends below, static pages are always marked as SSG by Next.js
λ (Server) server-side renders at runtime (uses getInitialProps or getServerSideProps)
○ (Static) automatically rendered as static HTML (uses no initial props)
● (SSG) automatically generated as static HTML + JSON (uses getStaticProps)
I'm running into the scenario in another project where I generate more than 50'000 static pages. There were no issues when deploying the generated output at this point. However, since I have been adding API routes, Vercel has been trying to deploy more than 50'000 serverless functions which fails.
This is the output of a build on Vercel of this repository when an API route is present and the number of serverless functions is more than 2000.
Route (pages) Size First Load JS
┌ ○ / 426 B 73.9 kB
├ /_app 0 B 73.5 kB
├ ○ /404 181 B 73.7 kB
├ λ /api/hello 0 B 73.5 kB
└ ● /something/[key] (8316 ms) 296 B 73.8 kB
├ /something/0
├ /something/1
├ /something/2
└ [+997 more paths]
+ First Load JS shared by all 73.5 kB
├ chunks/framework-114634acb84f8baa.js 45.4 kB
├ chunks/main-010ff0b6bbe5ac8f.js 27.1 kB
├ chunks/pages/_app-4b2041e059ed5a29.js 286 B
└ chunks/webpack-8fa1640cc84ba8fe.js 750 B
Generated build outputs:
- Static files: 16
- Serverless Functions: 2003
- Edge Functions: 0
However, when the API route is removed, all the static pages are not being deployed as serverless functions.
Route (pages) Size First Load JS
┌ ○ / 426 B 73.9 kB
├ /_app 0 B 73.5 kB
├ ○ /404 181 B 73.7 kB
└ ● /something/[key] (6131 ms) 296 B 73.8 kB
├ /something/0
├ /something/1
├ /something/2
└ [+997 more paths]
+ First Load JS shared by all 73.5 kB
├ chunks/framework-114634acb84f8baa.js 45.4 kB
├ chunks/main-010ff0b6bbe5ac8f.js 27.1 kB
├ chunks/pages/_app-4b2041e059ed5a29.js 286 B
└ chunks/webpack-8fa1640cc84ba8fe.js 750 B
Generated build outputs:
- Static files: 2016
- Serverless Functions: 0
- Edge Functions: 0
As an extra note, adding pages that include SSR (getServerSideProps) do not have the same impact and only generates the necessary serverless function.
Route (pages) Size First Load JS
┌ ○ / 426 B 73.9 kB
├ /_app 0 B 73.5 kB
├ ○ /404 181 B 73.7 kB
├ λ /search 285 B 73.8 kB
└ ● /something/[key] (8484 ms) 296 B 73.8 kB
├ /something/0
├ /something/1
├ /something/2
└ [+997 more paths]
+ First Load JS shared by all 73.5 kB
├ chunks/framework-114634acb84f8baa.js 45.4 kB
├ chunks/main-010ff0b6bbe5ac8f.js 27.1 kB
├ chunks/pages/_app-4b2041e059ed5a29.js 286 B
└ chunks/webpack-8fa1640cc84ba8fe.js 750 B
Generated build outputs:
- Static files: 2017
- Serverless Functions: 1
- Edge Functions: 0
Finally, adding a second API handler to the mix does not affect the number of serverless functions further.
Route (pages) Size First Load JS
┌ ○ / 426 B 73.9 kB
├ /_app 0 B 73.5 kB
├ ○ /404 181 B 73.7 kB
├ λ /api/hello 0 B 73.5 kB
├ λ /api/hello-2 0 B 73.5 kB
└ ● /something/[key] (6194 ms) 296 B 73.8 kB
├ /something/0
├ /something/1
├ /something/2
└ [+997 more paths]
+ First Load JS shared by all 73.5 kB
├ chunks/framework-114634acb84f8baa.js 45.4 kB
├ chunks/main-010ff0b6bbe5ac8f.js 27.1 kB
├ chunks/pages/_app-4b2041e059ed5a29.js 286 B
└ chunks/webpack-8fa1640cc84ba8fe.js 750 B
Generated build outputs:
- Static files: 16
- Serverless Functions: 2004
- Edge Functions: 0