如何为React Leaflet页面实现预渲染或SSG？

Leaflet依赖浏览器的window等API，直接用SSG工具构建时必然报错，以下是几种可行的解决思路：

一、动态导入客户端组件（推荐） #

核心逻辑是让Leaflet相关组件仅在浏览器环境加载，避开构建阶段的服务器环境。

Next.js 实现 #

用next/dynamic禁用SSR导入地图组件：

import dynamic from 'next/dynamic';

// 导入你的地图组件，禁用SSR
const MapComponent = dynamic(() => import('./YourMapComponent'), {
  ssr: false,
  loading: () => <div>加载地图中...</div>
});

// 在页面中直接使用
export default function Home() {
  return <MapComponent />;
}

Vite/Vike 实现 #

通过useEffect动态加载组件，确保只在客户端执行：

import { useState, useEffect } from 'react';

export default function MapPage() {
  const [MapComponent, setMapComponent] = useState(null);

  useEffect(() => {
    // 仅在浏览器环境导入地图组件
    import('./YourMapComponent').then(mod => setMapComponent(mod.default));
  }, []);

  if (!MapComponent) return <div>加载地图中...</div>;
  return <MapComponent />;
}

二、应急方案：模拟全局window对象 #

不推荐长期使用，可能引发Leaflet其他依赖（如document）的异常，但可以临时绕过构建报错：
在组件顶部添加判断：

// 仅在服务器环境模拟window
if (typeof window === 'undefined') {
  global.window = {};
  global.document = { createElement: () => ({}) }; // 按需补充其他API
}

或者在构建配置中添加 fallback（以Next.js为例）：

// next.config.js
module.exports = {
  webpack: (config) => {
    config.resolve.fallback = { ...config.resolve.fallback, window: false };
    return config;
  },
};

三、静态图片占位（优化加载体验） #

如果需要构建阶段生成初始视图的视觉效果，可以提前渲染一张静态地图图片作为占位，等交互地图加载完成后替换：

1. 构建时用无头浏览器工具（如puppeteer）或Leaflet无头渲染库（如leaflet-headless）生成初始坐标的地图图片，保存为静态资源。
2. 在页面中先展示图片，地图加载完成后切换：

import { useState } from 'react';
import { MapContainer } from 'react-leaflet';

export default function MapPage() {
  const [mapReady, setMapReady] = useState(false);

  return (
    <div style={{ position: 'relative', width: '100%', height: '70vh' }}>
      {/* 静态占位图 */}
      {!mapReady && (
        <img 
          src="/initial-map.jpg" 
          alt="初始地图" 
          style={{ position: 'absolute', width: '100%', height: '100%', objectFit: 'cover' }}
        />
      )}
      {/* 交互地图 */}
      <MapContainer
        onLoad={() => setMapReady(true)}
        // 你的地图配置：center、zoom等
        style={{ 
          width: '100%', 
          height: '100%',
          display: mapReady ? 'block' : 'none'
        }}
      >
        {/* 你的图层、控件等 */}
      </MapContainer>
    </div>
  );
}

额外注意 #

• 你的代码中MarkerClusterGroup标签未闭合，需修正避免渲染错误。
• 确保datafordelerUsername、datafordelerPassword等敏感信息不要暴露在客户端代码中，建议通过环境变量或后端代理处理。

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