如何在CSR React应用中注入SSR React组件？

这确实是个挺棘手的架构问题，刚好我之前在项目里处理过类似的场景，给你几个实用的解决方案，你可以根据自己的需求来选：

既然后端返回的是SSR生成的纯HTML，最直接的方式就是把它插入到你的CSR组件中：

• 先用fetch或者项目里的HTTP工具调用后端API，拿到HTML字符串
• 用React的dangerouslySetInnerHTML把HTML注入到DOM节点里，示例代码如下：

import { useEffect, useState } from 'react';

function SSRComponentContainer() {
  const [ssrContent, setSsrContent] = useState('');

  useEffect(() => {
    const fetchSSRContent = async () => {
      const res = await fetch('/api/your-ssr-component-endpoint');
      const html = await res.text();
      setSsrContent(html);
    };
    fetchSSRContent();
  }, []);

  return <div dangerouslySetInnerHTML={{ __html: ssrContent }} />;
}

• 如果这个SSR组件原本是带交互的React组件（后端只是提前渲染了HTML，还有对应的客户端逻辑），那你需要确保对应的React客户端bundle已经加载到页面，然后手动触发hydration：

// 假设后端返回的HTML里根节点ID是"ssr-component-root"
useEffect(() => {
  if (ssrContent && window.ReactDOM) {
    const rootEl = document.getElementById('ssr-component-root');
    if (rootEl) {
      // 如果后端能返回组件的序列化props，这里可以传入对应的React元素
      window.ReactDOM.hydrateRoot(rootEl, /* 你的组件元素 */);
    }
  }
}, [ssrContent]);

注意：如果组件完全是静态的，不需要交互，那跳过hydration步骤就好，直接插入HTML就行。

既然这个SSR组件渲染成本极高，除了后端的缓存，你也可以在CSR层面再加一层缓存：

• 可以把拿到的HTML存在localStorage或者内存缓存里，设置一个过期时间，下次渲染优先读缓存，缓存失效再调用API：

const SSR_CACHE_KEY = 'cached_ssr_component';
const CACHE_EXPIRE = 3600000; // 1小时，根据实际情况调整

useEffect(() => {
  const getSSRContent = async () => {
    const cachedData = localStorage.getItem(SSR_CACHE_KEY);
    if (cachedData) {
      const { html, timestamp } = JSON.parse(cachedData);
      if (Date.now() - timestamp < CACHE_EXPIRE) {
        setSsrContent(html);
        return;
      }
    }
    // 缓存失效，重新请求
    const res = await fetch('/api/your-ssr-component-endpoint');
    const html = await res.text();
    localStorage.setItem(SSR_CACHE_KEY, JSON.stringify({ html, timestamp: Date.now() }));
    setSsrContent(html);
  };
  getSSRContent();
}, []);

如果SSR组件的样式和你的CSR应用样式有冲突，可以用这两种方式隔离：

• 给包裹SSR内容的容器加一个唯一类名，让后端返回的CSS都嵌套在这个类名下
• 或者使用Shadow DOM来做彻底的样式隔离，示例代码：

import { useEffect, useState, useRef } from 'react';

function SSRComponentContainer() {
  const [ssrContent, setSsrContent] = useState('');
  const shadowRef = useRef(null);

  useEffect(() => {
    const fetchSSRContent = async () => {
      const res = await fetch('/api/your-ssr-component-endpoint');
      const html = await res.text();
      setSsrContent(html);
    };
    fetchSSRContent();
  }, []);

  useEffect(() => {
    if (shadowRef.current && ssrContent) {
      shadowRef.current.innerHTML = ssrContent;
    }
  }, [ssrContent]);

  return <div ref={shadowRef}></div>;
}

这些方案可以根据你的实际场景灵活组合，比如静态组件就用方案一+方案二，带交互的就加上hydration逻辑，有样式冲突就用Shadow DOM。

内容的提问来源于stack exchange，提问作者Vladimír Gorej