Vite React Server Side Plugin

A Plugin for Vite to enable Server Side Rendering for React with Pipeable Stream.

Vite React Server Side Plugin

Installation

npm

npm install -D @aklesky/vite-react-ssr-plugin

yarn

yarn add -D @aklesky/vite-react-ssr-plugin

Usage

import plugin from '@aklesky/@aklesky/vite-react-ssr-plugin/plugin.js'
import { defineConfig } from 'vite'

export default defineConfig({
    // ...
    root: "src",
    plugins: [plugin({
        entry: './entries/server.tsx',
        bootstrapModules: ['./entries/client.tsx'],
    })],
    // ...
  }
)

Configuration Parameters

entry

An entry point for loading a React component on a server via ssrLoadModule

More about ssrLoadModule

    entry: string

enableDoctypeHeader

Enable or disable the doctype header to be added to the stream.

Enabled by default

    enableDoctypeHeader?: boolean

    // ...
    if (options.enableDoctypeHeader) {
        http.ServerResponse.write('<!DOCTYPE html>')
    }

ignoreUrlExpressions

An array of regular expressions to ignore the certain urls.

By default, this will exclude any URLs with file extensions and URLs starting with "/@...".

uri.pathname = '/@vite/client'

default [/\.([^.]*?)(?=\?|#|$)/, /\/@[.]*?/]

    ignoreUrlExpressions?: RegExp[]

title

An Html Title to be added to the stream.

default: Vite.js React Server Side Plugin

    title?: string

nonce

A nonce string to allow scripts for script-src Content-Security-Policy.

    nonce?: string

identifierPrefix

A string prefix React uses for IDs generated by useId.

    identifierPrefix?: string

Read more about the identifierPrefix parameter

progressiveChunkSize

The number of bytes in a chunk.

    progressiveChunkSize?: number

Read more about the default heuristic.

default 12800

namespaceURI

A string with the root namespace URI for the stream. Defaults to regular HTML.

    namespaceURI?: string

bootstrapScripts

An array of string URLs for the <script> tags to emit on the page. Use this to include the <script type="module"> that calls hydrateRoot.

   bootstrapScripts?: string[]

bootstrapModules

An array of string URLs for the <script type="module"> tags to emit on the page.

    bootstrapModules?: string[]

enableTimeout

Enable the server rendering to “give up” after a timeout

default false

    enableTimeout?: boolean

timeout

Force the server rendering to “give up” after a timeout

    timeout?: number

default 10000 ms

Read more about aborting server rendering

addClosingHtmlBodyTag

Write closing body and html tags to the end of the stream and end it.

    addClosingHtmlBodyTag?: boolean

default true

Writable.end('\<\/body>\<\/html\>')

Event Handlers

These event handler functions primarily focus on receiving two arguments and return a callback function that takes in additional arguments.

Learn more about the callback function that takes in additional arguments.

onAllReadyHandler

    onAllReadyHandler?: (req: http.IncomingMessage, res: http.ServerResponse) => (pipe: () => Writable, error?: Error) => Promise<void>

onShellReadyHandler

    onShellReadyHandler?: (req: http.IncomingMessage, res: http.ServerResponse) => (pipe: () => Writable, error?: Error) => Promise<void>

onShellErrorHandler

    onShellErrorHandler?: (req: http.IncomingMessage, res: http.ServerResponse) => (error: unknown, writeable: Writable) => Promise<void>

onErrorHandler

    onErrorHandler?: (req: http.IncomingMessage, res: http.ServerResponse) => (error: unknown, writeable: Writable) => Promise<void>

onFinishEventHandler

    onFinishEventHandler?: (req: http.IncomingMessage, res: http.ServerResponse) => () => Promise<string | void>

onTimeoutHandler

    onTimeoutHandler?: (req: http.IncomingMessage, res: http.ServerResponse) => (cb?: () => void) => Promise<void>

@aklesky/vite-react-ssr-plugin