Render Preprocessing
In certain scenarios, applications need to perform preprocessing operations before rendering. Modern.js recommends using Runtime Plugins to implement this type of logic.
Defining a Runtime Plugin
import type { RuntimePlugin } from '@modern-js/runtime';
const myRuntimePlugin = (): RuntimePlugin => ({
name: 'my-runtime-plugin',
setup: api => {
api.onBeforeRender(context => {
// Logic to execute before rendering
console.log('Before rendering:', context);
});
},
});
export default myRuntimePlugin;Registering the Plugin
Register the plugin in your project's src/modern.runtime.ts file:
import { defineRuntimeConfig } from '@modern-js/runtime';
import myRuntimePlugin from './plugins/myRuntimePlugin';
export default defineRuntimeConfig({
plugins: [myRuntimePlugin()],
});Use Case -- Global Data Injection
Through the context parameter of the onBeforeRender hook, you can inject global data into your application. Application components can access this data using the use(RuntimeContext) Hook.
This feature is particularly useful in the following scenarios:
- Applications requiring page-level preliminary data
- Custom data injection workflows
- Framework migration scenarios (e.g., migrating from Next.js)
Defining a Data Injection Plugin
import type { RuntimePlugin } from '@modern-js/runtime';
const dataInjectionPlugin = (): RuntimePlugin => ({
name: 'data-injection-plugin',
setup: api => {
api.onBeforeRender(context => {
// Inject data into the context
context.message = 'Hello World';
});
},
});
export default dataInjectionPlugin;Using Injected Data in Components
import { use } from 'react';
import { RuntimeContext } from '@modern-js/runtime';
export default function MyComponent() {
const context = use(RuntimeContext);
const { message } = context;
return <div>{message}</div>;
}Using with SSR
In SSR scenarios, the browser can access data injected via onBeforeRender during server-side rendering. Developers can decide whether to re-fetch data on the browser side to override server data based on their requirements.
import type { RuntimePlugin } from '@modern-js/runtime';
const dataInjectionPlugin = (): RuntimePlugin => ({
name: 'data-injection-plugin',
setup: api => {
api.onBeforeRender(context => {
if (process.env.MODERN_TARGET === 'node') {
// Set data during server-side rendering
context.message = 'Hello World By Server';
} else {
// Check data during client-side rendering
if (!context.message) {
// If server data is not available, set client data
context.message = 'Hello World By Client';
}
}
});
},
});
export default dataInjectionPlugin;