Nuxt v2 SSR项目增量迁移至React并保留SSR支持的问题

问题核心 #

你在Nuxt v2中封装React组件时遇到的问题本质是：Vue的beforeMount钩子仅在客户端触发，而beforeCreate/created阶段无法访问DOM refs，导致服务器端无法生成React组件的HTML，无法实现SSR。

解决思路与代码修改 #

核心是利用Nuxt专为SSR设计的serverPrefetch钩子，在服务器端完成React组件的HTML渲染，同时在客户端完成hydrate（而非重新渲染），确保SSR和客户端 hydration 一致。

关键修改点：

• 添加serverPrefetch钩子，在服务器端生成React组件的HTML并存储到组件data中
• 模板中直接渲染服务器端生成的HTML，避免依赖refs在服务器端获取DOM
• 客户端使用hydrateRoot替代createRoot，完成React组件的 hydration，而非重新挂载
• 修正component props的类型错误（原代码中错误定义为string类型）

修改后的完整组件代码：

<template>
  <div 
    ref="container" 
    class="react-wrapper"
    v-html="serverRenderedHtml"
  />
</template>

<script lang="ts">
import { createElement } from 'react';
import { renderToString } from 'react-dom/server';
import { hydrateRoot, Root, Container } from 'react-dom/client';
import Vue, { PropType } from 'vue';
import type { ComponentType } from 'react';

export default Vue.extend({
  name: 'ReactWrapper',
  inheritAttrs: false,
  props: {
    component: {
      // 修正为正确的React组件类型
      type: Function as PropType<ComponentType>,
      required: true,
    },
  },
  data() {
    return {
      reactRoot: null as Root | null,
      serverRenderedHtml: ''
    };
  },
  // Nuxt SSR专属钩子，仅在服务器端执行
  async serverPrefetch() {
    try {
      this.serverRenderedHtml = renderToString(
        createElement(this.component, { ...this.$attrs })
      );
    } catch (error) {
      console.error('[react-wrapper] 服务器端渲染React组件失败:', error);
      this.serverRenderedHtml = '';
    }
  },
  mounted(): void {
    const container = this.$refs.container as Container;
    if (container && process.client) {
      // 客户端对服务器端生成的HTML进行hydrate，而非重新渲染
      this.reactRoot = hydrateRoot(
        container,
        createElement(this.component, { ...this.$attrs })
      );
    }
  },
  methods: {
    updateReactComponent(): void {
      if (process.client && this.reactRoot) {
        this.reactRoot.render(
          createElement(this.component, { ...this.$attrs })
        );
      }
    },
  },
  watch: {
    $attrs: {
      deep: true,
      handler(): void {
        this.updateReactComponent();
      },
    },
  },
  beforeUnmount(): void {
    // 组件卸载时清理React根实例
    if (process.client && this.reactRoot) {
      this.reactRoot.unmount();
    }
  },
});
</script>

额外说明 #

1. 为什么用serverPrefetch：Nuxt的SSR流程中，服务器端只会执行beforeCreate、created和serverPrefetch钩子，serverPrefetch是专门用于服务器端数据预取或静态内容生成的钩子，适合在这里完成React组件的HTML渲染。
2. 客户端hydrate的重要性：使用hydrateRoot可以复用服务器端生成的DOM结构，避免重新渲染，提升性能并保证SSR的一致性，这是实现同构渲染的关键。
3. 关于bundleRenderer配置：如果遇到React组件在服务器端打包的问题，可以调整Nuxt的render.bundleRenderer配置，确保React相关依赖被正确包含在服务器端bundle中，但上述组件修改是解决生命周期问题的核心。

内容的提问来源于stack exchange，提问作者d-_-b