**_vite-ssr-components_** provides JSX components and Vite plugins for helping the development and deployment for SSR application with Vite.
npm install vite-ssr-components_vite-ssr-components_ provides JSX components and Vite plugins for helping the development and deployment for SSR application with Vite.
When using Cloudflare's Vite plugin for SSR applications, several challenges arise:
- Missing Vite client scripts: The Vite client script (/@vite/client) needs to be manually embedded in server-side rendered HTML
- No SSR hot reload: Server-side code changes don't trigger hot reloads during development
- Complex asset path resolution: Resolving script and asset paths after build requires manual manifest.json handling
- Manual build configuration: Manually specifying entry files in vite.config.ts for each Script/Link component
This library solves these issues by providing:
- ViteClient component for development mode
- SSR hot reload plugin for seamless development experience
- Automatic asset path resolution using Vite's manifest.json
- Automatic build entry detection from Script/Link components with flexible component-attribute mapping
- Framework agnostic components for both hono/jsx and React
``bash`
npm i -D vite-ssr-components
`ts
// vite.config.ts
import { defineConfig } from 'vite'
import { cloudflare } from '@cloudflare/vite-plugin'
import ssrPlugin from 'vite-ssr-components/plugin'
export default defineConfig({
plugins: [cloudflare(), ssrPlugin()],
})
`
`tsx
import { Script, Link, ViteClient } from 'vite-ssr-components/hono'
// import { Script, Link, ViteClient } from 'vite-ssr-components/react'
function App() {
return (
That's it! The plugin automatically:
- Scans your source files for Script/Link components
- Detects the referenced files from component attributes
- Adds the detected files to Vite's build input
- Configures client build settings
- Enables SSR hot reload
Components
> [!IMPORTANT]
> If you define custom components with the same names as the default
and Script components, unexpected behavior may occur. In such cases, use different names for your custom components or specify custom component names in the plugin's components configuration.$3
Adds Vite client script for development mode.
`tsx
import { ViteClient } from 'vite-ssr-components/hono'
// import { ViteClient } from 'vite-ssr-components/react'function App() {
return (
)
}
// Renders:
`$3
Adds script tags with proper Vite handling. In production mode, automatically reads
to resolve the correct built file paths.`tsx
import { Script } from 'vite-ssr-components/hono'
// import { Script } from 'vite-ssr-components/react'function App() {
return (
)
}
// Development:
// Production:
`#### Options
-
(required): Source path of the script file
- manifest: Custom Vite manifest object (auto-loaded if not provided)
- prod: Force production mode (defaults to import.meta.env.PROD)
- baseUrl: Base URL for assets (defaults to /)
- All standard HTML script attributes are supported`tsx