Next.js中使用renderToString报错，求可行解决方案

错误原因 #

Next.js App Router下的默认页面组件是Server Component，这类组件在服务端执行，不允许导入react-dom/server中的API（比如renderToString）——因为Server Component本身就是服务端渲染机制的一部分，手动调用这类API会打破框架的性能与安全设计逻辑。

解决方案 #

方案1：将组件标记为Client Component #

在文件顶部添加'use client';指令，将组件转为客户端组件，即可正常使用renderToString。注意要把renderToString的调用放到组件内部（避免模块顶层执行，因为客户端组件的模块代码在服务端也会被部分解析）：

'use client';
import { renderToString } from 'react-dom/server';

export default function Home() {
  const html = renderToString(<h2>some content</h2>);

  return (
    <main>
      <div>
        <h1>My React App</h1>
        {/* 通过dangerouslySetInnerHTML插入生成的HTML字符串 */}
        <div dangerouslySetInnerHTML={{ __html: html }} />
      </div>
    </main>
  );
}

方案2：针对Leaflet自定义标记的更优写法 #

如果是为了实现Leaflet自定义标记，推荐直接通过ReactDOM将组件挂载到标记的DOM容器中，避免使用renderToString和dangerouslySetInnerHTML，更符合React的渲染逻辑：

'use client';
import { useEffect, useRef } from 'react';
import ReactDOM from 'react-dom/client';
import L from 'leaflet';
import 'leaflet/dist/leaflet.css'; // 导入Leaflet样式

export default function Home() {
  const mapContainerRef = useRef(null);
  const mapRef = useRef(null);
  const markerPopupContentRef = useRef(document.createElement('div'));

  useEffect(() => {
    // 初始化地图
    if (!mapRef.current && mapContainerRef.current) {
      mapRef.current = L.map(mapContainerRef.current).setView([51.505, -0.09], 13);
      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(mapRef.current);
    }

    // 创建带自定义React内容的标记
    if (mapRef.current && !markerPopupContentRef.current._hasMounted) {
      const marker = L.marker([51.505, -0.09]).addTo(mapRef.current);
      
      // 挂载React组件到容器
      const root = ReactDOM.createRoot(markerPopupContentRef.current);
      root.render(<h2>自定义Leaflet标记</h2>);
      markerPopupContentRef.current._hasMounted = true;

      // 绑定弹窗到标记
      marker.bindPopup(markerPopupContentRef.current);
    }

    // 清理函数
    return () => {
      if (mapRef.current) {
        mapRef.current.remove();
        mapRef.current = null;
      }
      if (markerPopupContentRef.current._hasMounted) {
        ReactDOM.unmountComponentAtNode(markerPopupContentRef.current);
      }
    };
  }, []);

  return (
    <main>
      <div>
        <h1>My React App</h1>
        <div ref={mapContainerRef} style={{ height: '400px', width: '100%' }} />
      </div>
    </main>
  );
}

内容的提问来源于stack exchange，提问作者pomipiwimo