Use static 404.html with server api-routes on Netlify

[codeflorist]

When deploying a Nuxt 3 application, that has prerendered as well as server-side api-routes to Netlify (using the netlify preset), it seems it's not possible to use a static 404.html at the moment.

So basically i'd like this redirect logic:

request ->
-> prerendered static (if exists)
-> server-side Nuxt API route (if exists)
-> 404.html (if exists)
-> else: Netlify default 404 page

Nitro creates the netlify.toml file with this config:

[functions."*"]

I can also see this in the Netlify backend:

I guess this means, that ALL requests, that are not resolvable to a static file, are hitting the function. This is perfectly fine (and needed) in a Nuxt app, that uses SSR for certain or all pages. But for an app, that is fully prerendered, any only uses a handful of api-routes, this means a LOT of unnecessary requests (bots, ddos, etc.) are hitting the function - causing unnecessary load on the function and higher bills.

I guess the solution would be to specifically only foward the existing api- and server-routes or "turn off" rendering of SSR completely, so Netlify falls back to the static 404.html.

Is this possible at the moment already somehow? If not, i think that would be a very useful feature.

[codeflorist]

I have found a workaround for this. After building, the actual function-config for netlify resides in:
.netlify/functions-internal/server/server.mjs

Here the path key defines the routes this Netlify function should be responsible of. Nitro sets this to "/*", meaning all non statically-prerendered routes will hit the function - without any ability to use a static 404.html or Netlify's own 404 page. Changing this to "/api/*" will limit server-side calls to /api/*, enabling fallback to static 404 for all other routes.

Here is a script, that can be run after build to make the replacement in the file:

import fs from 'node:fs'

const netlifyConfigFile = './.netlify/functions-internal/server/server.mjs'
if (!fs.existsSync(netlifyConfigFile)) {
	console.log(`Error: File "${netlifyConfigFile}" does not exist.`)
	process.exit(1)
}
let netlifyConfigFileContents = fs.readFileSync(netlifyConfigFile, 'utf8')
netlifyConfigFileContents = netlifyConfigFileContents.replace(
	'path: "/*"',
	'path: "/api/*"'
)
fs.writeFileSync(netlifyConfigFile, netlifyConfigFileContents, (error) => {
	if (error) {
		throw error
	}
})

[JEliasEnvisol]

Hello ! This looks perfect for me, how do I run that script after the build? Do i save it to my repo and somehow launch it in my netlify.toml?

[codeflorist]

you can e.g. do it this way:

1. put it in a scripts/afterBuildTasks.mjs
2. add "after-build-tasks": "node ./scripts/afterBuildTasks.mjs", to your scripts object in package.json
3. change the build command in package.json to "build": "nuxi build && pnpm after-build-tasks", (assuming you are using pnpm)