# vite-ssr-components
**_vite-ssr-components_** provides JSX components and Vite plugins for helping the development and deployment for SSR application with Vite.
## Motivation
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
## Install
```bash
npm i -D vite-ssr-components
```
## Quick Start
### 1. Add the SSR Plugin
```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()],
})
```
### 2. Use Components in Your SSR Code
```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 `Link` 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.
### ViteClient
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:
```
### Script
Adds script tags with proper Vite handling. In production mode, automatically reads `manifest.json` 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
- `src` (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