Repository files navigation

Smart placeholder for missing assets

💵 Rendering Errors is costly

Serving each 404 page for assets adds extra load to the server and increases crashing chances. This is crucial for setups with server-side-rendering and removes additional SSR loads when assets likerobots.txt orfavicon.ico don't exist.

👌 Meaningful Responses

We can always send a better 404 response than an HTML page by knowing file extensions. For example, we send a fallback transparent 1x1 image for image extensions.

🔍 SEO Friendly

Instead of indexing invalid URLs with HTML pages, we properly send 404 and the right content type.

Install package:

# ✨ Auto-detectnpx nypm install serve-placeholder# npmnpm install serve-placeholder# yarnyarn add serve-placeholder# pnpmpnpm install serve-placeholder# bunbun install serve-placeholder

Import:

// ESMimport{servePlaceholder}from"serve-placeholder";// CommonJSconst{ servePlaceholder}=require("serve-placeholder");

Create and add server middleware between serve-static and router middleware:

app.use('/assets', serveStatic(..))++ app.use('/assets', servePlaceholder())app.use('/', router)

Additionally, we can have a default placeholder for arbitrary routes which handles known extensionsassuming other routes have no extension:

app.use('/assets', serveStatic(..))app.use('/assets', servePlaceholder())++ app.use('/', placeholder({ skipUnknown: true }))app.use('/', router)

A mapping from file extensions to the handler. Extensions should start withdot like.js.

You can disable any of the handlers by setting the value tonull

If the value of a handler is set tofalse, the middleware will be ignored for that extension.

• Default:404

SetsstatusCode for all handled responses. Set tofalse to disable overriding statusCode.

• Default:false

Skip middleware when no handler is defined for the current request.

Please note that if this option is set totrue, thendefault handler will be disabled!

• Type:Object

A mapping from handler to placeholder. Values can beString orBuffer. You can disable any of the placeholders by setting the value tofalse.

• Type:Object

A mapping from handler to the mime type. Mime type will be set asContent-Type header. You can disable sending any of the mimes by setting the value tofalse.

• Default:true

Set headers to prevent accidentally caching 404 resources.

When enabled, these headers will be sent:

constheaders={"cache-control":"no-cache, no-store, must-revalidate",expires:"0",pragma:"no-cache",};

• Default:true

Sets anX-Placeholder header with value of handler name.

These aredefault handlers. You can override every of them using provided options.

Published under theMIT license.Made by@pi0 andcommunity 💛

🤖 auto updated withautomd