Connect/Express middleware to respond with better placeholders based on request instead of 404 page
Last updated 2 months ago by pi0 .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install serve-placeholder 
SYNC missed versions from official npm registry.

♡ serve-placeholder

Connect/Express middleware to respond with better placeholders based on request instead of 404 page

Standard JS david dm codecov circleci

npm version npm downloads package phobia


???? Rendering 404 errors is costly

  • Each 404 error for assets means a new SSR request that adds extra loads to the server and increases crash chances.

???? Graceful Responses

  • Sometimes, we can send better responses alongside with 404 code instead of nothing. For example, for images, we send a fallback transparent 1x1 image.

???? SEO Friendly

  • Don't allow indexing invalid URLs with ugly html pages.
  • Remove extra SSR loads when assets like robots.txt or favicon.ico doesn't exist.


Install package:

npm install serve-placeholder


yarn add serve-placeholder

Import and use middleware:

const placeholder = require('serve-placeholder')
// import placeholder from 'serve-placeholder'

// [regular middleware such as serve-static]

// Response with appreciate placeholders
//app.use(placeholder({ /* options */ }))

// [global error handler]



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

You can disable any of the handlers by setting the value to null

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


  • Default: 404

Sets statusCode for all handled responses. Set to false 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 to true, then default handler will be disabled!


  • Type: Object

A mapping from handler to placeholder. Values can be String or Buffer. You can disable any of the placeholders by setting the value to false.


  • Type: Object

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


  • Default: true

Set headers to prevent accidentally caching 404 resources.

When enabled, these headers will be sent:

  'cache-control': 'no-cache, no-store, must-revalidate',
  'expires': '0',
  'pragma': 'no-cache'


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

Handler Extensions Mime type Placeholder
default any unknown extension - -
css .css text/css /* style not found */
html .html, .htm text/html <!-- page not found -->
js .js application/javascript /* script not found */
json .json application/json {}
map .map application/json [empty sourcemap v3 json]
plain .txt, .text, .md text/plain [empty]
image .png, .jpg, .jpeg, .gif, .svg, .webp, .bmp, .ico image/gif [transparent 1x1 image]


MIT. Made with ???? by Nuxt.js team!

Current Tags

  • 1.2.3                                ...           latest (2 months ago)

10 Versions

  • 1.2.3                                ...           2 months ago
  • 1.2.2                                ...           a year ago
  • 1.2.1                                ...           2 years ago
  • 1.2.0                                ...           2 years ago
  • 1.1.1                                ...           2 years ago
  • 1.1.0                                ...           2 years ago
  • 1.0.0                                ...           2 years ago
  • 0.1.1                                ...           2 years ago
  • 0.1.0                                ...           2 years ago
  • 0.0.0                                ...           2 years ago
Maintainers (2)
Today 1,298
This Week 2,554
This Month 17,628
Last Day 1,256
Last Week 7,081
Last Month 35,496
Dependencies (1)
Dev Dependencies (12)

Copyright 2014 - 2017 © |