injectFilter()

The injectFilter() hook allows us to control which and where preload/asset tags are injected in our HTML.

See Guides > Preload.

Examples

Usage

⚠ injectFilter() is a beta feature.
⚠ Note that injectFilter() is called only in production and has no effect in development.
// /renderer/_default.page.server.ts

import type { InjectFilterEntry } from 'vite-plugin-ssr'

export async function render(pageContext) {
  // ...

  const documentHtml = escapeInject`<!DOCTYPE html>
    <html>
      <body>
        <div id="page-view">${stream}</div>
      </body>
    </html>`

  const injectFilter = (assets: InjectFilterEntry[]): void => {
    assets.forEach(asset => {
      if (
        // We don't touch entry assets (recommended)
        asset.isEntry ||
        // We don't touch JavaScript preloading (recommended)
        asset.assetType === 'script'
      ) {
        return
      }

      // Preload images
      if (asset.assetType === 'image') {
        asset.inject = 'HTML_BEGIN'
      }

      // Don't preload fonts
      if (asset.assetType === 'font') {
        asset.inject = false
      }

      // Preload videos
      if (asset.mediaType?.startsWith('video')) {
        asset.inject = 'HTML_END'
      }
    })
  }

  return { documentHtml, injectFilter }
}
type InjectFilterEntry = {
  inject: false | 'HTML_BEGIN' | 'HTML_END' // Whether and where to inject
  src: string // Asset's URL
  assetType: "image" | "script" | "font" | "style" | null
  mediaType: string // MIME type
  isEntry: boolean // true  ⇒ <script> or <link rel="stylesheet" type="text/css">
                   // false ⇒ preload tag, e.g. <link rel="preload" as="font">
}