https://github.com/yusukebe/vite-plugin-ssr-hot-reload
Vite plugin for hot-reloading SSR pages
https://github.com/yusukebe/vite-plugin-ssr-hot-reload
Last synced: 4 months ago
JSON representation
Vite plugin for hot-reloading SSR pages
- Host: GitHub
- URL: https://github.com/yusukebe/vite-plugin-ssr-hot-reload
- Owner: yusukebe
- Created: 2025-03-25T07:54:16.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-04-19T12:19:33.000Z (about 1 year ago)
- Last Synced: 2025-10-21T17:42:46.527Z (8 months ago)
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/vite-plugin-ssr-hot-reload
- Size: 89.8 KB
- Stars: 11
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# vite-plugin-ssr-hot-reload
A Vite plugin that forces a full page reload when your SSR entry file changes. It also injects `@vite/client` into the HTML response so hot reload can work properly.
## Install
```bash
npm install -D vite-plugin-ssr-hot-reload
```
## Usage
```ts
// vite.config.ts
import { defineConfig } from 'vite'
import ssrHotReload from 'vite-plugin-ssr-hot-reload'
export default defineConfig({
plugins: [ssrHotReload()]
})
```
## Options
### entry
You can pass `entry` to specify which files should trigger a full reload.
```ts
ssrHotReload({
entry: ['/src/pages/**/*.tsx', '/src/layouts/**/*.ts']
})
```
By default, the plugin watches:
```ts
entry: ['/src/**/*.ts', '/src/**/*.tsx']
```
### ignore
You can pass `ignore` to specify which files should be excluded from triggering a full reload, even if they match the entry patterns.
```ts
ssrHotReload({
entry: ['/src/pages/**/*.tsx'],
ignore: ['/src/pages/ignored/**/*.tsx']
})
```
### injectReactRefresh
You can pass `injectReactRefresh: true` to inject React Refresh scripts into the HTML head. This is useful for React applications that need hot module replacement for React components.
**Note:** To use this feature, you need to install `@vitejs/plugin-react` in your project.
```ts
// First, install @vitejs/plugin-react
// npm install -D @vitejs/plugin-react
// Then in your vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import ssrHotReload from 'vite-plugin-ssr-hot-reload'
export default defineConfig({
plugins: [
react(), // Make sure to include the React plugin
ssrHotReload({
injectReactRefresh: true
})
]
})
```
When enabled, the plugin injects the following scripts at the end of the `` tag:
```html
import RefreshRuntime from '/@react-refresh'
RefreshRuntime.injectIntoGlobalHook(window)
window.$RefreshReg$ = () => {}
window.$RefreshSig$ = () => (type) => type
window.__vite_plugin_react_preamble_installed__ = true
```
## What it does
- Injects `` into HTML responses (only in dev)
- Optionally injects React Refresh scripts into the HTML head when `injectReactRefresh: true` is set
- Sends a full-reload signal when an SSR module is updated
## Author
Yusuke Wada <https://github.com/yusukebe>
## License