### Configure package scripts

Source: https://github.com/lomray-software/vite-ssr-boost/blob/prod/docs/guide/getting-started.md

Defines the necessary CLI commands in package.json to manage development, build, and production start processes.

```json
{
  "scripts": {
    "develop": "ssr-boost dev",
    "build": "ssr-boost build",
    "start:ssr": "ssr-boost start",
    "start:spa": "ssr-boost start --focus-only client",
    "preview": "ssr-boost preview"
  }
}
```

--------------------------------

### Create server entry point

Source: https://github.com/lomray-software/vite-ssr-boost/blob/prod/docs/guide/getting-started.md

Configures the server-side entry using entryServer. This allows for custom request handling, state serialization, and HTML streaming options.

```typescript
import entryServer from '@lomray/vite-ssr-boost/node/entry';
import App from './App';
import routes from './routes';

export default entryServer(App, routes, {
  abortDelay: 15000,
  init: async ({ config }) => ({
    onServerCreated: (app) => {
      void app;
      void config;
    },
    onServerStarted: (_, __, server) => {
      void server;
    },
    onRequest: async (req) => ({
      appProps: {
        url: req.url,
      },
    }),
    onRouterReady: () => ({
      isStream: true,
    }),
    onShellReady: () => ({
      header: '',
      footer: '',
    }),
    onResponse: ({ html }) => html,
    onError: ({ error }) => {
      console.error(error);
    },
    getState: () => ({
      app: {
        hydratedAt: Date.now(),
      },
    }),
  }),
});
```

--------------------------------

### Install vite-ssr-boost dependency

Source: https://github.com/lomray-software/vite-ssr-boost/blob/prod/docs/guide/getting-started.md

Installs the package via npm. Requires Node.js version 22 or higher and peer dependencies including Vite, React, and Babel.

```bash
npm i @lomray/vite-ssr-boost
```

--------------------------------

### Example Usage of `init` Option

Source: https://github.com/lomray-software/vite-ssr-boost/blob/prod/docs/api/browser-entry.md

Demonstrates how to use the `init` option within `entryClient` to perform asynchronous initialization. The returned values from `init` are passed as `client` props to the top-level `App` component.

```typescript
void entryClient(App, routes, {
  init: async ({ isSSRMode, router }) => ({
    isSSRMode,
    pathname: router.state.location.pathname,
  }),
});
```

--------------------------------

### Create browser entry point

Source: https://github.com/lomray-software/vite-ssr-boost/blob/prod/docs/guide/getting-started.md

Initializes the client-side application using entryClient. It handles route preloading and determines whether to perform hydration or a plain SPA mount.

```tsx
import entryClient from '@lomray/vite-ssr-boost/browser/entry';
import { createBrowserRouter } from 'react-router';
import App from './App';
import routes from './routes';

void entryClient(App, routes, {
  init: async ({ isSSRMode, router }) => {
    return {
      isSSRMode,
      currentUrl: router.state.location.pathname,
    };
  },
  routerOptions: {},
  createRouter: createBrowserRouter,
  rootId: 'root',
});
```

--------------------------------

### Configure Vite plugin

Source: https://github.com/lomray-software/vite-ssr-boost/blob/prod/docs/guide/getting-started.md

Integrates the SsrBoost plugin into the Vite configuration file. This handles SSR flags, route normalization, and optional SPA helpers.

```typescript
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import SsrBoost from '@lomray/vite-ssr-boost/plugin';

export default defineConfig({
  root: 'src',
  publicDir: '../public',
  build: {
    outDir: '../build',
  },
  plugins: [SsrBoost(), react()],
});
```

--------------------------------

### Install Dependencies with npm

Source: https://github.com/lomray-software/vite-ssr-boost/blob/prod/CONTRIBUTING.md

Clones the repository and installs project dependencies using npm. This is a prerequisite for development.

```shell
git clone git@github.com:Lomray-Software/vite-ssr-boost.git
npm i
```

--------------------------------

### Configure Vite SSR Boost for Development

Source: https://github.com/lomray-software/vite-ssr-boost/blob/prod/CONTRIBUTING.md

Example configuration for `rollup.config.js` to set up the output directory for `@lomray/vite-ssr-boost` during development. It includes copying necessary files like `package.json` and `README.md`.

```ecmascript 6
// modify rollup.config.js (don't commit)
// other imports

const dest = '../vite-template/node_modules/@lomray/vite-ssr-boost';

export default {
  input: [
    'src/**/*.ts*',
  ],
  output: {
    dir: dest,
    // other options
  },
  // other options
  plugins: [
    // other plugins
    // terser(),
    copy({
      targets: [
        { src: 'package.json', dest: dest },
        { src: 'README.md', dest: dest },
        { src: 'workflow', dest: dest },
      ],
    }),
  ],
};

```

--------------------------------

### Configure SPA Index Generation with Custom Filename and Root ID

Source: https://github.com/lomray-software/vite-ssr-boost/blob/prod/docs/api/plugin.md

Illustrates how to configure the `spaIndex` option to generate a custom SPA index file. This example specifies a filename and a root element ID for the generated HTML.

```typescript
SsrBoost({
  spaIndex: {
    filename: 'index-spa.html',
    rootId: 'root',
  },
});
```

--------------------------------

### Configure Vite SSR Boost Plugin

Source: https://context7.com/lomray-software/vite-ssr-boost/llms.txt

Configures the Vite SSR Boost plugin in vite.config.ts. It normalizes SSR setup, enables tsconfig alias support, and can generate extra SPA index files. Supports custom entry files, tsconfig aliases, SPA fallback index generation, route detection paths, additional entrypoints, and custom dev server shortcuts.

```typescript
// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import SsrBoost from '@lomray/vite-ssr-boost/plugin';

export default defineConfig({
  root: 'src',
  publicDir: '../public',
  build: {
    outDir: '../build',
  },
  plugins: [
    SsrBoost({
      // Entry files (defaults shown)
      indexFile: 'index.html',
      serverFile: 'server.ts',
      clientFile: 'client.ts',

      // Enable tsconfig path aliases (default: true)
      tsconfigAliases: true,

      // Generate SPA fallback index
      spaIndex: {
        filename: 'index-spa.html',
        rootId: 'root',
      },

      // Custom route detection path
      routesPath: '/routes/',

      // Additional entrypoints for mobile/embedded apps
      entrypoint: [
        {
          name: 'mobile',
          type: 'spa',
          clientFile: './src/mobile.tsx',
          buildOptions: '--mode mobile',
        },
      ],

      // Custom dev server keyboard shortcuts
      customShortcuts: [
        {
          key: 'c',
          description: 'Clear cache',
          action: async (cliContext) => {
            console.log('Cache cleared');
          },
          isOnlyDev: true,
        },
      ],
    }),
    react(),
  ],
});
```

--------------------------------

### Configuring Middlewares with entryServer

Source: https://github.com/lomray-software/vite-ssr-boost/blob/prod/docs/api/server-entry.md

Demonstrates how to configure production middlewares like compression and static file serving using the `middlewares` option within `entryServer`. Options can be set to specific configurations or `false` to disable them.

```typescript
export default entryServer(App, routes, {
  middlewares: {
    compression: {},
    expressStatic: {
      basename: '/static',
    },
  },
});
```

--------------------------------

### Server-Side Entry Point for Vite SSR Boost

Source: https://context7.com/lomray-software/vite-ssr-boost/llms.txt

Sets up the server-side rendering entry point using Vite SSR Boost's `entryServer`. It configures abort delay, server middlewares (compression, static files), and various lifecycle hooks for server initialization.

```typescript
import entryServer from '@lomray/vite-ssr-boost/node/entry';
import App from './App';
import routes from './routes';

export default entryServer(App, routes, {
  abortDelay: 10000,
  middlewares: {
    compression: {},
    expressStatic: { basename: '/static' },
  },
  init: async ({ config }) => ({
    onRequest: async (req) => ({
      appProps: { url: req.url },
    }),
    onRouterReady: () => ({ isStream: true }),
    onShellReady: () => ({ header: '', footer: '' }),
    getState: () => ({ timestamp: Date.now() }),
    onError: ({ error }) => console.error('SSR Error:', error),
  }),
});
```

--------------------------------

### Import Browser Entry Point

Source: https://github.com/lomray-software/vite-ssr-boost/blob/prod/docs/api/browser-entry.md

Imports the `entryClient` function from the vite-ssr-boost browser entry module. This is the primary function to initialize your client-side application.

```typescript
import entryClient from '@lomray/vite-ssr-boost/browser/entry';
```

--------------------------------

### Client-Side Entry Point for Vite SSR Boost

Source: https://context7.com/lomray-software/vite-ssr-boost/llms.txt

Initializes the client-side application using Vite SSR Boost's `entryClient`. It integrates React Router, fetches server state, and configures router options for the browser environment.

```typescript
import entryClient from '@lomray/vite-ssr-boost/browser/entry';
import getServerState from '@lomray/vite-ssr-boost/helpers/get-server-state';
import App from './App';
import routes from './routes';

void entryClient(App, routes, {
  init: async ({ isSSRMode, router }) => {
    const serverState = getServerState();
    return { isSSRMode, serverState };
  },
  routerOptions: { basename: '/' },
});
```

--------------------------------

### Browser Entry Options Interface

Source: https://github.com/lomray-software/vite-ssr-boost/blob/prod/docs/api/browser-entry.md

Defines the structure for the optional configuration object passed to `entryClient`. It includes `init` for asynchronous initialization, `routerOptions` for customizing the router, `createRouter` for providing a custom router factory, and `rootId` for specifying the DOM element ID.

```typescript
interface IEntryClientOptions<T> {
  init?: (params: {
    isSSRMode: boolean;
    router: DataRouter;
  }) => Promise<T>;
  routerOptions?: Parameters<typeof createBrowserRouter>[1];
  createRouter?: typeof createBrowserRouter;
  rootId?: string;
}
```

--------------------------------

### Define Additional Build Entrypoints for Vite SSR Boost

Source: https://github.com/lomray-software/vite-ssr-boost/blob/prod/docs/api/plugin.md

Shows how to configure the `entrypoint` option to define additional build surfaces for your application. This is useful for creating separate builds like mobile or other specialized targets.

```typescript
SsrBoost({
  entrypoint: [
    {
      name: 'mobile',
      type: 'spa',
      clientFile: './src/mobile.tsx',
      buildOptions: '--mode mobile',
    },
  ],
});
```

--------------------------------

### Build and Watch Source Code with npm

Source: https://github.com/lomray-software/vite-ssr-boost/blob/prod/CONTRIBUTING.md

Commands to build the source code for production or to continuously build during development. The watch command recompiles on file changes.

```shell
npm run build
npm run build:watch
```

--------------------------------

### Configure SSR Entry Point with Vite SSR Boost

Source: https://context7.com/lomray-software/vite-ssr-boost/llms.txt

Defines the server-side rendering pipeline using entryServer. It includes configuration for streaming, middleware, and request lifecycle hooks like onRequest, onRouterReady, and onShellReady to manage state and response manipulation.

```typescript
import entryServer from '@lomray/vite-ssr-boost/node/entry';
import App from './App';
import routes from './routes';

export default entryServer(App, routes, {
  abortDelay: 15000,
  routerOptions: {
    basename: '/app',
  },
  middlewares: {
    compression: {},
    expressStatic: {
      basename: '/static',
    },
  },
  init: async ({ config }) => ({
    onServerCreated: (app) => {
      app.use('/api', apiRouter);
      app.use(requestLogger);
    },
    onServerStarted: (app, port, server) => {
      console.log(`Server running on port ${port}`);
    },
    onRequest: async (req, res) => {
      const user = await authenticateUser(req);
      const locale = detectLocale(req);
      return {
        appProps: { user, locale, url: req.url },
        hasEarlyHints: true,
        shouldSkip: req.url.startsWith('/api'),
        shouldCancel: false,
      };
    },
    onRouterReady: ({ req, context }) => ({
      isStream: !req.headers['user-agent']?.includes('Googlebot'),
    }),
    onShellReady: ({ req }) => ({
      header: `<!-- Request: ${req.url} -->`,
      footer: '<script>window.__BOOT_TIME__=Date.now()</script>',
    }),
    onResponse: ({ html, req }) => {
      return html.replace('{{REQUEST_ID}}', req.id);
    },
    onShellError: ({ error, res }) => {
      res.status(500);
      return '<html><body><h1>Server Error</h1></body></html>';
    },
    onError: ({ error, errorType }) => {
      console.error(`SSR Error [${errorType}]:`, error);
    },
    getState: ({ req, context }) => ({
      auth: { isAuthenticated: !!context.user },
      config: { apiUrl: process.env.API_URL },
    }),
  }),
});
```

--------------------------------

### Import SsrBoost Plugin

Source: https://github.com/lomray-software/vite-ssr-boost/blob/prod/docs/api/plugin.md

Demonstrates how to import the SsrBoost plugin into your Vite configuration file. This is the first step to integrating the plugin into your project.

```typescript
import SsrBoost from '@lomray/vite-ssr-boost/plugin';
```

--------------------------------

### Browser Entry Point Signature

Source: https://github.com/lomray-software/vite-ssr-boost/blob/prod/docs/api/browser-entry.md

Defines the signature of the `entryClient` function, which accepts the main application component, routes, and optional configuration options. The `options` parameter is of type `IEntryClientOptions`.

```typescript
entryClient(App, routes, options?)
```

--------------------------------

### IEntryServerOptions Interface Definition

Source: https://github.com/lomray-software/vite-ssr-boost/blob/prod/docs/api/server-entry.md

Defines the structure of the `IEntryServerOptions` interface, which allows customization of server-side rendering. Options include `abortDelay`, `init` hook, custom loggers (`loggerProd`, `loggerDev`), and middleware configurations (`compression`, `expressStatic`).

```typescript
interface IEntryServerOptions<TAppProps> {
  abortDelay?: number;
  init?: (params: { config: ServerConfig }) =>
    IEntrypointOptions<TAppProps> | Promise<IEntrypointOptions<TAppProps>>;
  loggerProd?: Logger;
  loggerDev?: Logger;
  middlewares?: {
    compression?: CompressionOptions | false;
    expressStatic?: (ServeStaticOptions & { basename?: string }) | false;
  };
  routerOptions?: Parameters<typeof createStaticHandler>[1];
}
```

--------------------------------

### Interface for Additional Build Entrypoints

Source: https://github.com/lomray-software/vite-ssr-boost/blob/prod/docs/api/plugin.md

Defines the TypeScript interface for the `entrypoint` option in the SsrBoost plugin. This interface specifies the structure for configuring custom build entrypoints, including their name, type, and file paths.

```typescript
interface IBuildEntrypoint {
  name: string;
  type: 'spa' | 'ssr';
  indexFile?: string;
  clientFile?: string;
  serverFile?: string;
  buildOptions?: string;
}

```

--------------------------------

### CLI Commands for Vite SSR Boost

Source: https://context7.com/lomray-software/vite-ssr-boost/llms.txt

A set of CLI commands to manage the development, building, previewing, and deployment processes. Supports various build targets like Docker, AWS Amplify, and Vercel.

```bash
# Development server with hot reload
ssr-boost dev --host 0.0.0.0 --port 3000

# Development with custom mode
ssr-boost dev --mode staging --reset-cache

# Production build (client + server)
ssr-boost build

# Build specific parts only
ssr-boost build --focus-only client
ssr-boost build --focus-only server
ssr-boost build --focus-only app

# Build with serverless output
ssr-boost build --serverless

# Build with ejected server entrypoint
ssr-boost build --eject

# Enable robots.txt in production
ssr-boost build --unlock-robots

# Start production server
ssr-boost start --host 0.0.0.0 --port 8080

# Start SPA-only mode (no SSR)
ssr-boost start --focus-only client

# Start with custom build directory
ssr-boost start --build-dir ./dist

# Preview mode (watch build + production server)
ssr-boost preview --host localhost --port 3000

# Docker build
ssr-boost build-docker --image-name my-app:latest
ssr-boost build-docker --image-name my-app --docker-file ./Dockerfile.prod --docker-options "--no-cache"

# AWS Amplify build
ssr-boost build-amplify --is-optimize
ssr-boost build-amplify --manifest-file ./amplify-manifest.json

# Vercel build
ssr-boost build-vercel --is-optimize
ssr-boost build-vercel --config-file ./vercel.json --config-vc-file ./vc-config.json
```

--------------------------------

### Build Docker Image with SSR Boost

Source: https://github.com/lomray-software/vite-ssr-boost/blob/prod/docs/guide/deployment.md

Builds a Docker container for the SSR application. Supports custom image naming and various build flags for optimization and configuration.

```bash
ssr-boost build-docker --image-name my-app
```

--------------------------------

### Import entryServer Function

Source: https://github.com/lomray-software/vite-ssr-boost/blob/prod/docs/api/server-entry.md

Imports the `entryServer` function from the '@lomray/vite-ssr-boost/node/entry' module. This is the primary function used to set up the server-side rendering entry point.

```typescript
import entryServer from '@lomray/vite-ssr-boost/node/entry';
```

--------------------------------

### Build for Vercel

Source: https://github.com/lomray-software/vite-ssr-boost/blob/prod/docs/guide/deployment.md

Generates a build compatible with Vercel serverless functions. Supports custom configuration files and mode settings.

```bash
ssr-boost build-vercel
```

--------------------------------

### Run Project Checks with npm

Source: https://github.com/lomray-software/vite-ssr-boost/blob/prod/CONTRIBUTING.md

Commands to execute various checks on the project, including linting, TypeScript type checking, and running tests. These ensure code quality and correctness.

```shell
npm run lint:check
npm run ts:check
npm run test
```

--------------------------------

### Vite Configuration with Vite SSR Boost Plugin

Source: https://context7.com/lomray-software/vite-ssr-boost/llms.txt

Configures Vite for SSR Boost, including setting the root directory, public directory, base path, build output directory, and integrating the SsrBoost plugin with custom entrypoints and the React plugin.

```typescript
import {
  defineConfig
} from 'vite';
import react from '@vitejs/plugin-react';
import SsrBoost from '@lomray/vite-ssr-boost/plugin';

export default defineConfig({
  root: 'src',
  publicDir: '../public',
  base: '/static',
  build: {
    outDir: '../build',
  },
  plugins: [
    SsrBoost({
      spaIndex: true,
      entrypoint: [
        {
          name: 'mobile',
          type: 'spa',
          clientFile: './src/mobile.tsx',
        },
      ],
    }),
    react(),
  ],
});
```

--------------------------------

### Minimal Vite SSR Boost Plugin Usage

Source: https://github.com/lomray-software/vite-ssr-boost/blob/prod/docs/api/plugin.md

Shows the most basic way to include the SsrBoost plugin within your Vite configuration's plugins array. This minimal configuration enables the plugin's core functionalities.

```typescript
plugins: [SsrBoost(), react()];
```

--------------------------------

### Build for AWS Amplify

Source: https://github.com/lomray-software/vite-ssr-boost/blob/prod/docs/guide/deployment.md

Generates a build specifically optimized for AWS Amplify deployment. Allows configuration via manifest files and optimization flags.

```bash
ssr-boost build-amplify
```

--------------------------------

### Vite SSR Boost Plugin Default Options

Source: https://github.com/lomray-software/vite-ssr-boost/blob/prod/docs/api/plugin.md

Lists the default values for the SsrBoost plugin's configuration options. These defaults are applied if specific options are not provided during plugin initialization.

```typescript
{
  indexFile: 'index.html',
  serverFile: 'server.ts',
  clientFile: 'client.ts',
  tsconfigAliases: true,
  spaIndex: false,
}
```

--------------------------------

### IEntrypointOptions Interface Definition

Source: https://github.com/lomray-software/vite-ssr-boost/blob/prod/docs/api/server-entry.md

Defines the `IEntrypointOptions` interface, representing the configuration object returned by the `init` function. It includes various lifecycle hooks for server events, such as `onServerCreated`, `onRequest`, `onResponse`, and `onError`.

```typescript
interface IEntrypointOptions<TAppProps> {
  onServerCreated?;
  onServerStarted?;
  onRequest?;
  onRouterReady?;
  onShellReady?;
  onShellError?;
  onResponse?;
  onError?;
  getState?;
}
```

--------------------------------

### entryServer Function Signature

Source: https://github.com/lomray-software/vite-ssr-boost/blob/prod/docs/api/server-entry.md

Defines the signature of the `entryServer` function, which accepts the main application component (`App`), application routes, and optional configuration options. The `options` parameter is of type `IEntryServerOptions`.

```typescript
entryServer(App, routes, options?)
```

--------------------------------

### Browser Entry for Client Hydration and SPA Mounting

Source: https://context7.com/lomray-software/vite-ssr-boost/llms.txt

Handles client-side hydration for SSR pages and SPA mounting using Vite SSR Boost's browser entry. It preloads matched lazy routes before router creation to prevent hydration mismatches. Supports async initialization before rendering and custom router configurations.

```typescript
// src/client.tsx
import entryClient from '@lomray/vite-ssr-boost/browser/entry';
import { createBrowserRouter } from 'react-router';
import App from './App';
import routes from './routes';

void entryClient(App, routes, {
  // Async initialization before render
  init: async ({ isSSRMode, router }) => {
    // Initialize analytics, auth, or other client services
    const analytics = await initializeAnalytics();

    return {
      isSSRMode,
      currentUrl: router.state.location.pathname,
      analytics,
    };
  },

  // Router configuration
  routerOptions: {
    basename: '/app',
  },

  // Custom router factory (default: createBrowserRouter)
  createRouter: createBrowserRouter,

  // Root element ID (default: 'root')
  rootId: 'root',
});
```

--------------------------------

### Add Mobile Entrypoint

Source: https://github.com/lomray-software/vite-ssr-boost/blob/prod/docs/examples/recipes.md

Configures a secondary mobile entrypoint in the Vite plugin settings and provides the corresponding client-side entry file.

```ts
export default defineConfig({
  plugins: [
    SsrBoost({
      entrypoint: [
        {
          name: 'mobile',
          type: 'spa',
          clientFile: './src/mobile.tsx',
          buildOptions: '--mode mobile',
        },
      ],
    }),
    react(),
  ],
});
```

```tsx
const AppMobile: FC = (props) => {
  return <App {...props} />;
};

void entryClient(AppMobile, routes, {});
```

--------------------------------

### Vite SSR Boost Plugin Options Interface

Source: https://github.com/lomray-software/vite-ssr-boost/blob/prod/docs/api/plugin.md

Defines the TypeScript interface for the SsrBoost plugin options, outlining all configurable parameters. This includes settings for index files, server/client files, route paths, SPA index generation, tsconfig aliases, custom shortcuts, and build entrypoints.

```typescript
interface IPluginOptions {
  indexFile?: string;
  serverFile?: string;
  clientFile?: string;
  routesPath?: string;
  spaIndex?: boolean | {
    filename?: string;
    rootId?: string;
  };
  tsconfigAliases?: boolean | {
    root?: string;
    tsconfig?: string;
  };
  customShortcuts?: {
    key: string;
    description: string;
    action: (cliContext) => Promise<void> | void;
    isOnlyDev?: boolean;
  }[];
  entrypoint?: IBuildEntrypoint[];
}

```

--------------------------------

### Configure Static Assets Base Path

Source: https://github.com/lomray-software/vite-ssr-boost/blob/prod/docs/guide/deployment.md

Synchronizes the Vite base path with the server-side static middleware to ensure assets are served correctly in production environments.

```typescript
export default entryServer(App, routes, {
  middlewares: {
    expressStatic: {
      basename: '/static',
    },
  },
});

export default defineConfig({
  base: '/static',
});
```

--------------------------------

### NPM Scripts Configuration for Workflows

Source: https://context7.com/lomray-software/vite-ssr-boost/llms.txt

Defines npm scripts for common development and deployment workflows using the vite-ssr-boost CLI. These scripts streamline repetitive tasks.

```json
{
  "scripts": {
    "dev": "ssr-boost dev",
    "dev:host": "ssr-boost dev --host 0.0.0.0",
    "build": "ssr-boost build",
    "build:client": "ssr-boost build --focus-only client",
    "build:serverless": "ssr-boost build --serverless",
    "start": "ssr-boost start",
    "start:spa": "ssr-boost start --focus-only client",
    "preview": "ssr-boost preview",
    "docker": "ssr-boost build-docker --image-name myapp",
    "deploy:amplify": "ssr-boost build-amplify --is-optimize",
    "deploy:vercel": "ssr-boost build-vercel --is-optimize"
  }
}
```

--------------------------------

### Load Client-Only Components

Source: https://github.com/lomray-software/vite-ssr-boost/blob/prod/docs/examples/recipes.md

Uses the OnlyClient component to dynamically import and render components exclusively in the browser, preventing them from running during SSR.

```tsx
<OnlyClient
  load={() => import('./MapWidget')}
  fallback={<div>Loading map...</div>}
>
  {(MapWidget) => <MapWidget />}
</OnlyClient>
```

--------------------------------

### React Router Configuration for SSR Boost

Source: https://context7.com/lomray-software/vite-ssr-boost/llms.txt

Defines the application routes using React Router, compatible with Vite SSR Boost. It includes layout routes, index routes, lazy-loaded components, and a catch-all route for 404 pages.

```typescript
import type { TRouteObject } from '@lomray/vite-ssr-boost/interfaces/route-object';
import Layout from './Layout';
import HomePage from './pages/Home';

const routes: TRouteObject[] = [
  {
    path: '/',
    element: <Layout />,
    children: [
      { index: true, element: <HomePage /> },
      { path: 'about', lazy: () => import('./pages/About') },
      { path: 'dashboard', lazy: () => import('./pages/Dashboard') },
      { path: '*', lazy: () => import('./pages/NotFound') },
    ],
  },
];

export default routes;
```

--------------------------------

### Generate SPA Shell

Source: https://github.com/lomray-software/vite-ssr-boost/blob/prod/docs/examples/recipes.md

Enables the generation of an index-spa.html file via the SsrBoost plugin, which is useful for service worker routing.

```ts
export default defineConfig({
  plugins: [
    SsrBoost({
      spaIndex: true,
    }),
    react(),
  ],
});
```

--------------------------------

### Implement Server-Aware Redirects with Navigate Component

Source: https://context7.com/lomray-software/vite-ssr-boost/llms.txt

Uses the Navigate component to perform client-side navigation while ensuring correct HTTP status codes are sent during SSR. This is essential for SEO and proper browser handling of redirects.

```tsx
import Navigate from '@lomray/vite-ssr-boost/components/navigate';

const PermanentRedirect = () => (
  <Navigate to="/new-page" replace />
);

const TemporaryRedirect = () => (
  <Navigate to="/login" status={302} replace />
);

const ProtectedRoute = ({ user, children }) => {
  if (!user) {
    return <Navigate to="/login" status={302} replace />;
  }
  return children;
};

const routes = [
  {
    path: '/old-page',
    element: <Navigate to="/new-page" status={301} replace />,
  },
  {
    path: '/dashboard',
    element: (
      <ProtectedRoute user={currentUser}>
        <Dashboard />
      </ProtectedRoute>
    ),
  },
];
```

--------------------------------

### Configure routesPath for route discovery

Source: https://github.com/lomray-software/vite-ssr-boost/blob/prod/docs/guide/routing.md

Shows how to specify the routesPath option in the SsrBoost configuration to help the plugin locate route declarations when they are not in standard locations.

```ts
SsrBoost({
  routesPath: '/routes/',
});
```

--------------------------------

### Configure Streaming Behavior in onRouterReady

Source: https://github.com/lomray-software/vite-ssr-boost/blob/prod/docs/guide/rendering-modes.md

This configuration allows developers to toggle between streaming and full HTML rendering. By returning isStream: false, the server will wait for the complete HTML tree before sending the response, which is useful for crawler-specific requirements.

```typescript
{
  isStream: false
}
```

--------------------------------

### Define React Router routes

Source: https://github.com/lomray-software/vite-ssr-boost/blob/prod/docs/guide/routing.md

Demonstrates the supported structure for defining routes using React Router's RouteObject. It highlights the use of static imports for lazy loading to ensure proper build-time analysis.

```tsx
import type { RouteObject } from 'react-router';
import HomePage from './pages/home';

const routes: RouteObject[] = [
  {
    path: '/home',
    Component: HomePage,
  },
  {
    path: '/layout',
    element: <AppLayout />,
  },
  {
    path: '/lazy',
    lazy: () => import('./pages/lazy'),
  },
];
```

--------------------------------

### Configure Static Asset Base

Source: https://github.com/lomray-software/vite-ssr-boost/blob/prod/docs/examples/recipes.md

Aligns the Vite build base path with the server-side express static middleware configuration to ensure assets are served correctly.

```ts
export default defineConfig({
  base: '/static',
});
```

```tsx
export default entryServer(App, routes, {
  middlewares: {
    expressStatic: {
      basename: '/static',
    },
  },
});
```

--------------------------------

### Perform Server-Side Redirect

Source: https://github.com/lomray-software/vite-ssr-boost/blob/prod/docs/examples/recipes.md

Uses the Navigate component to trigger a server-side redirect response with a specific HTTP status code instead of a client-side navigation.

```tsx
return <Navigate to="/login" status={302} replace />;
```

--------------------------------

### Configure Router Basename

Source: https://github.com/lomray-software/vite-ssr-boost/blob/prod/docs/examples/recipes.md

Sets a custom base path for the router on both client and server entry points to ensure consistent navigation routing.

```tsx
void entryClient(App, routes, {
  routerOptions: {
    basename: '/custom',
  },
});
```

```tsx
export default entryServer(App, routes, {
  routerOptions: {
    basename: '/custom',
  },
});
```

--------------------------------

### Render Client-Only Components with OnlyClient

Source: https://context7.com/lomray-software/vite-ssr-boost/llms.txt

OnlyClient dynamically loads and renders components exclusively on the client side. This is ideal for browser-specific libraries, maps, or charts that are incompatible with server-side rendering environments.

```tsx
import OnlyClient from '@lomray/vite-ssr-boost/components/only-client';

const MapSection = () => (
  <OnlyClient
    load={() => import('./components/MapWidget')}
    fallback={<div>Loading map...</div>}
  >
    {(MapWidget) => <MapWidget center={[51.505, -0.09]} zoom={13} />}
  </OnlyClient>
);
```

--------------------------------

### onRequest Hook Return Value

Source: https://github.com/lomray-software/vite-ssr-boost/blob/prod/docs/api/server-entry.md

Specifies the possible return values for the `onRequest` lifecycle hook within `IEntrypointOptions`. These values allow control over application properties (`appProps`), early hints (`hasEarlyHints`), skipping requests (`shouldSkip`), or canceling the rendering path (`shouldCancel`).

```typescript
{
  appProps?: TAppProps;
  hasEarlyHints?: boolean;
  shouldSkip?: boolean;
  shouldCancel?: boolean;
}
```

--------------------------------

### Navigate Component for SSR and Client

Source: https://github.com/lomray-software/vite-ssr-boost/blob/prod/docs/api/components-and-helpers.md

The Navigate component handles client-side routing and server-side redirects. It accepts standard navigation props and an optional status code for server responses.

```tsx
import Navigate from '@lomray/vite-ssr-boost/components/navigate';

<Navigate to="/login" status={301} />
```

--------------------------------

### Route Interfaces

Source: https://github.com/lomray-software/vite-ssr-boost/blob/prod/docs/api/components-and-helpers.md

Provides TypeScript interfaces for defining typed route components and route objects consistent with the package conventions.

```typescript
import type { FCRoute, FCCRoute } from '@lomray/vite-ssr-boost/interfaces/fc-route';
import type { TRouteObject } from '@lomray/vite-ssr-boost/interfaces/route-object';
```

--------------------------------

### OnlyClient Component

Source: https://github.com/lomray-software/vite-ssr-boost/blob/prod/docs/api/components-and-helpers.md

Ensures a component is only loaded and rendered on the client side. It supports dynamic imports, custom fallbacks, and error handling components.

```tsx
import OnlyClient from '@lomray/vite-ssr-boost/components/only-client';

<OnlyClient load={() => import('./heavy-chart')}>
  {(Chart) => <Chart />}
</OnlyClient>
```

--------------------------------

### Hydrate Client State with getServerState

Source: https://context7.com/lomray-software/vite-ssr-boost/llms.txt

The getServerState helper retrieves serialized state injected by the server during the SSR process. It is used in the client entry point to initialize application stores with server-provided data.

```typescript
import getServerState from '@lomray/vite-ssr-boost/helpers/get-server-state';

void entryClient(App, routes, {
  init: async ({ isSSRMode }) => {
    const serverState = getServerState<ServerState>();
    return { isSSRMode, stores: { auth: createAuthStore(serverState?.auth) } };
  },
});
```

--------------------------------

### onRouterReady Hook Return Shape - TypeScript

Source: https://github.com/lomray-software/vite-ssr-boost/blob/prod/docs/guide/server-lifecycle.md

Specifies the return shape for the `onRouterReady` hook, invoked after the static handler resolves and router context is available. This hook is crucial for deciding between streaming and full-document rendering based on factors like user agent or route matching.

```typescript
{
  isStream?: boolean;
}
```

--------------------------------

### onShellReady Hook Return Shape - TypeScript

Source: https://github.com/lomray-software/vite-ssr-boost/blob/prod/docs/guide/server-lifecycle.md

Details the return shape for the `onShellReady` hook, which allows prepending or appending HTML content around the React stream. Common uses include injecting analytics bootstrap scripts, state container tags, or request-specific metadata.

```typescript
{
  header?: string;
  footer?: string;
}
```

--------------------------------

### Set HTTP Status Codes with ResponseStatus

Source: https://context7.com/lomray-software/vite-ssr-boost/llms.txt

The ResponseStatus component allows developers to define HTTP status codes (like 404, 403, or 500) directly within the React component tree during server-side rendering. This ensures that the server responds with the correct status code for error pages and specific routes.

```tsx
import ResponseStatus from '@lomray/vite-ssr-boost/components/response-status';

const NotFoundPage = () => (
  <>
    <ResponseStatus status={404} />
    <div className="error-page">
      <h1>404 - Page Not Found</h1>
    </div>
  </>
);
```

--------------------------------

### ResponseStatus Component

Source: https://github.com/lomray-software/vite-ssr-boost/blob/prod/docs/api/components-and-helpers.md

Allows setting the HTTP response status code directly from within the React component tree during server-side rendering.

```tsx
import ResponseStatus from '@lomray/vite-ssr-boost/components/response-status';

<ResponseStatus status={404} />
```

--------------------------------

### TypeScript Route Type Interfaces

Source: https://context7.com/lomray-software/vite-ssr-boost/llms.txt

Provides TypeScript interfaces for defining typed route components and route objects. These interfaces ensure type safety and align with package conventions for route declarations.

```typescript
import type { FCRoute, FCCRoute } from '@lomray/vite-ssr-boost/interfaces/fc-route';
import type { TRouteObject } from '@lomray/vite-ssr-boost/interfaces/route-object';

// Typed route component with route-specific props
const HomePage: FCRoute<{ title: string }> = ({ title }) => (
  <div>
    <h1>{title}</h1>
  </div>
);

// Typed route component with children
const Layout: FCCRoute<{ sidebar?: boolean }> = ({ sidebar, children }) => (
  <div className={sidebar ? 'with-sidebar' : ''}>
    <nav>Navigation</nav>
    <main>{children}</main>
  </div>
);

// Typed route configuration
const routes: TRouteObject[] = [
  {
    path: '/',
    element: <Layout sidebar={true} />,
    children: [
      {
        path: 'home',
        element: <HomePage title="Welcome" />,
      },
      {
        path: 'lazy',
        lazy: () => import('./pages/LazyPage'),
      },
    ],
  },
];
```

--------------------------------

### getServerState Helper

Source: https://github.com/lomray-software/vite-ssr-boost/blob/prod/docs/api/components-and-helpers.md

Retrieves the serialized state injected by the server during SSR, allowing the client to hydrate with the same data.

```typescript
import getServerState from '@lomray/vite-ssr-boost/helpers/get-server-state';

const state = getServerState();
```

--------------------------------

### ScrollToTop Component

Source: https://github.com/lomray-software/vite-ssr-boost/blob/prod/docs/api/components-and-helpers.md

Automatically scrolls the window to the top when the pathname changes. Useful for maintaining expected navigation behavior in single-page applications.

```tsx
import ScrollToTop from '@lomray/vite-ssr-boost/components/scroll-to-top';

<ScrollToTop shouldReloadReset={true} />
```

--------------------------------

### onRequest Hook Return Shape - TypeScript

Source: https://github.com/lomray-software/vite-ssr-boost/blob/prod/docs/guide/server-lifecycle.md

Defines the expected return shape for the `onRequest` hook, which is called for every incoming request before rendering. It allows for setting request-scoped application properties, performing authentication or locale preparation, creating per-request state managers, and short-circuiting certain URLs.

```typescript
{
  appProps?: Record<string, unknown>;
  hasEarlyHints?: boolean;
  shouldSkip?: boolean;
  shouldCancel?: boolean;
}
```

--------------------------------

### withSuspense HOC

Source: https://github.com/lomray-software/vite-ssr-boost/blob/prod/docs/api/components-and-helpers.md

A higher-order component that wraps a target component with a Suspense boundary while hoisting non-React statics.

```tsx
import withSuspense from '@lomray/vite-ssr-boost/components/with-suspense';

const MyComponentWithSuspense = withSuspense(MyComponent);
```

--------------------------------

### Wrap Components with withSuspense HOC

Source: https://context7.com/lomray-software/vite-ssr-boost/llms.txt

The withSuspense higher-order component wraps lazy-loaded components in a Suspense boundary. It also handles the hoisting of non-React statics from the wrapped component.

```tsx
import withSuspense from '@lomray/vite-ssr-boost/components/with-suspense';
import { lazy } from 'react';

const LazyDashboard = withSuspense(
  lazy(() => import('./pages/Dashboard')),
  <div className="loading">Loading dashboard...</div>
);
```

--------------------------------

### Set HTTP Response Status

Source: https://github.com/lomray-software/vite-ssr-boost/blob/prod/docs/examples/recipes.md

Uses the ResponseStatus component within a route to explicitly set the HTTP status code for the server response.

```tsx
const NotFound = () => (
  <>
    <ResponseStatus status={404} />
    <h1>Page not found</h1>
  </>
);
```

--------------------------------

### Set router basename

Source: https://github.com/lomray-software/vite-ssr-boost/blob/prod/docs/guide/routing.md

Configures a custom basename for the router on both client and server sides to support applications hosted at non-root paths.

```tsx
// Client side
void entryClient(App, routes, {
  routerOptions: {
    basename: '/custom',
  },
});

// Server side
export default entryServer(App, routes, {
  routerOptions: {
    basename: '/custom',
  },
});
```

--------------------------------

### Reset Scroll Position with ScrollToTop

Source: https://context7.com/lomray-software/vite-ssr-boost/llms.txt

ScrollToTop automatically resets the window scroll position to the top whenever the pathname changes. This provides standard SPA navigation behavior for users.

```tsx
import ScrollToTop from '@lomray/vite-ssr-boost/components/scroll-to-top';

const App = ({ children }) => (
  <>
    <ScrollToTop />
    <main>{children}</main>
  </>
);
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.