How to support SSR

[iBobik]

I would like to present some ideas on how could SSR be handled. Do you have some ideas if it has some gotchas and are you open to accept PR?

Fix Leaflet library to work on the server

Mentioning this just for completeness. Probably very hard.

Render just tiles

Use the tiles provider API to get image the same way like the Leaflet does - just replace variables in the URL in LTileLayer and place that in an <img>. Maybe more difficult if we have bounds only (I don't know how this is implemented).

Maybe also add more responsive variants of the image in an srcset.

When hydratation completes <img> will be replaced by the Leaflet element.

+ render also markers

When we have bounds coordinates of the map and markers coordinates then it could be pretty easy to calculate DOM coordinates where markers should be positioned.

Maybe not necessary, having tiles rendered is usually enough for the effect.

Headless browser to generate screenshot

Run headless browser (e.g. Puppeteer), render all pages with the map, resize to all usual screen sizes and take screenshots of the map element. Then link this screenshots in and <img srcset=...> used as a placeholder.

This is probably doable without integration with the Leaflet as a universal Nuxt module useable with basically any client-side only component.

Will render not only tiles but basically everything the map will render.

Related: #223 #4

[Maxel01]

Hey,
I don't know what you exactly mean with SSR. What do you want to achieve? As far as I know SSR is working without any problems.

With the predefined vue-leaflet components (which are imported here) SSR should work as the leaflet-src will be imported only in the onMounted callback which is client side only.
Do you wish to use these components with SSR or are you planning on creating your own components with leaflet code (plugins, ...).

[iBobik]

Hey,
I mean „server-side rendering“, so the map will actually be rendered on the server, so the prerendered pages will have the map even before hydratation. Not blank space where after few seconds tiles and markers will appear.

I need it for landing page there subjective speed matters.

[Maxel01]

Unfortunately, that's something I can't help you with.