Support server-side rendering

[dmitry]

https://github.com/PaulLeCam/react-leaflet#technical-considerations have the following point:

Leaflet makes direct calls to the DOM when it is loaded, therefore this library is not compatible with server-side rendering.

I would like to discuss of the possibilities how it's possible to add server-side support for this library.

My current solution just skip rendering the leaflet on server-side, and render just on client-side:

  render() {
    const position = [51.505, -0.09];

    if (process.env.BROWSER) {
      var {Map, Marker, Popup, TileLayer} = require('react-leaflet');
      return (
        <div className="search-map">
          <Map center={position} zoom={13}>
            <TileLayer
              url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
              attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
              />
            <Marker position={position}>
              <Popup>
                <span>A pretty CSS3 popup.<br/>Easily customizable.</span>
              </Popup>
            </Marker>
          </Map>
        </div>
      );
    }
    else {
      return null;
    }
  }

I don't believe it's a best practice, but still it's something, than nothing, and I think it's better than using the headless-leaflet fork.

[PaulLeCam]

The issue is with Leaflet itself, as it doesn't check if the DOM is available when it's loaded, not directly this library.
I do not plan to support server-side rendering in this lib until it is supported by Leaflet itself, unless it's a trivial implementation with no side-effect.

The solution you presented may work for you, but it's completely dependant on your environment and your build, it would probably not work in other cases.

[iam4x]

@PaulLeCam We could provide a React Component as fallback for server side rendering, check if window exists render the map or render the fallback? Something like that:

<Map .... fallback={ReactComponent}>
  ...
</Map>

[PaulLeCam]

@iam4x Feel free to implement any workaround in your app... As I previously explained, this issue is not caused by this lib.

[dougajmcdonald]

Thanks for the workarounds gents, I ended up just using a client side bower package and not the react package, but will switch back now I know the render could be defined conditionally based on the environment

[dmitry]

@dougajmcdonald similar idea I'm using too. It's more flexible and maintainable.

[josebalius]

@dougajmcdonald I was wondering what was the solution for this? You guys are loading leaflet in with bower, and then proceeding to require react-leaflet the same way? Or are you guys also using bower to load react-leaflet?

[sohibul]

May someone give the example of this workaround

[jgimbel]

It's ugly, but it works.

let Map, MapComponents
class LeafletMap extends Component {

  componentDidMount(){
    //Only runs on Client, not on server render
    Map = require('react-leaflet').Map
    MapComponents = require('./mapComponents').default
    this.forceUpdate()
  }

  render () {
    return (
      (Map)
      ? (
        <Map
          zoom={10}
          maxZoom={18}
          minZoom={9}
        >
          <MapComponent />
        </Map>
      )
      : (null)
      }
    )
  }
}

[stereobooster]

For future googlers, there is also https://github.com/masotime/react-leaflet-universal

And some attempts to render leaflet on the server:

• https://github.com/pimterry/leaflet-map-server-component
• https://github.com/jieter/leaflet-headless