pnpm add rasengan@~1.2.2
GETTING STARTED
Upgrading
Latest Stable version
To update to the latest version of Rasengan.js, you just have to run the following command:
pnpm add rasengan@latest
Latest Beta version
To update to the latest beta version of Rasengan.js, you just have to run the following command:
pnpm add rasengan@beta
Upgrade from 1.1.x to 1.2.x
If you want to improve the performance of your application — especially as it grows in size — upgrading to version 1.2.x is a great choice.
This version introduces several major features:
New Error Boundary Overlay (since v1.2.2)
Rasengan v1.2.2 introduces a completely redesigned error handling experience with a developer-friendly overlay that catches errors from every source:
- React rendering errors — Caught by a class-based
ErrorBoundaryFallbackcomponent wrapping your application tree - Route loader errors — Every route is automatically wrapped with an error boundary that feeds into the overlay
- Global unhandled errors and rejections —
window.onerrorandwindow.onunhandledrejectionare registered and captured - Vite HMR errors — Errors during hot module replacement are displayed in the overlay
- SSR errors — Server-side rendering errors are serialized into
window.__RASENGAN_SSR_ERROR__and forwarded to the client overlay after hydration
Lazy Loaded Routes (since v1.2.0)
Routes are now loaded on demand, based on the page the user is visiting. This means your app only loads what it needs, when it needs it — which helps reduce initial load time and makes navigation feel faster.
Everything is handled automatically, there is no option to opt out this feature.
SSG (Static Site Generation) (since v1.2.0)
You can now generate static HTML files for your pages ahead of time. This improves performance, SEO, and allows your site to be served extremely fast, without waiting for server responses or client-side rendering.
The configuration is simple, inside the rasengan.config.js file, you just have to enable the prerender option.
import { defineConfig } from 'rasengan'; import { rasengan } from 'rasengan/plugin'; export default defineConfig({ prerender: true, vite: { plugins: [rasengan()], }, });
This is the minimal configuration, it will enable the prerender globally into your application. If you prefer, you can select what you really want to prerender.
import { defineConfig } from 'rasengan'; import { rasengan } from 'rasengan/plugin'; export default defineConfig({ prerender: { routes: ['/', 'blog/**'], }, vite: { plugins: [rasengan()], }, });
This approach is ideal for hybrid applications, where:
- Public pages are statically generated
- Authenticated or dynamic routes remain rendered via SSR or SPA
So, to upgrade you have to follow the following steps:
Before
import '@/styles/index.css'; import { type AppProps } from 'rasengan'; import AppRouter from '@/app/app.router'; export default function App({ Component, children }: AppProps) { return <Component router={AppRouter}>{children}</Component>; }
After
import '@/styles/index.css'; import { type AppProps } from 'rasengan'; export default function App({ Component, children }: AppProps) { return <Component>{children}</Component>; }
Before
import { renderApp } from 'rasengan/client'; import App from './main'; renderApp(App, { reactStrictMode: true });
After
import { renderApp } from 'rasengan/client'; import App from './main'; import AppRouter from '@/app/app.router'; renderApp(App, AppRouter, { reactStrictMode: true });
pnpm run dev
