渲染预处理

在某些场景下，应用需要在渲染前执行预处理操作。Modern.js 推荐使用 Runtime 插件 (Runtime Plugin) 来实现这类逻辑。

定义 Runtime 插件

import type { RuntimePlugin } from '@modern-js/runtime';

const myRuntimePlugin = (): RuntimePlugin => ({
  name: 'my-runtime-plugin',
  setup: api => {
    api.onBeforeRender(context => {
      // 在渲染前执行的逻辑
      console.log('Before rendering:', context);
    });
  },
});

export default myRuntimePlugin;

注册插件

在项目 src/modern.runtime.ts 文件中注册插件：

import { defineRuntimeConfig } from '@modern-js/runtime';
import myRuntimePlugin from './plugins/myRuntimePlugin';

export default defineRuntimeConfig({
  plugins: [myRuntimePlugin()],
});

应用场景 -- 全局数据注入

通过 onBeforeRender 钩子的 context 参数，可以向应用注入全局数据。应用的组件可以通过 use(RuntimeContext) Hook 访问这些数据。

Info

此功能在以下场景中特别有用：

需要页面级前置数据的应用
自定义数据注入流程
框架迁移场景（例如从 Next.js 迁移）

定义数据注入插件

import type { RuntimePlugin } from '@modern-js/runtime';

const dataInjectionPlugin = (): RuntimePlugin => ({
  name: 'data-injection-plugin',
  setup: api => {
    api.onBeforeRender(context => {
      // 向 context 中注入数据
      context.message = 'Hello World';
    });
  },
});

export default dataInjectionPlugin;

在组件中使用注入的数据

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>;
}

结合 SSR 使用

在 SSR 场景下，浏览器端可以获取服务端渲染期间通过 onBeforeRender 注入的数据。开发者可以根据需求决定是否在浏览器端重新获取数据来覆盖服务端数据。

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') {
        // 服务端渲染时设置数据
        context.message = 'Hello World By Server';
      } else {
        // 客户端渲染时检查数据
        if (!context.message) {
          // 如果没有获取到服务端数据，则设置客户端数据
          context.message = 'Hello World By Client';
        }
      }
    });
  },
});

export default dataInjectionPlugin;

#渲染预处理

#定义 Runtime 插件

#注册插件

#应用场景 -- 全局数据注入

渲染预处理

定义 Runtime 插件

注册插件

应用场景 -- 全局数据注入