Support SSR (with a real placeholder)

[iBobik]

I would like to present some ideas on how could SSR be handled. Do you have some other ideas or if mine has some gotchas? Are you open to accept PR?

Fix MapboxGL 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 MapboxGL 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 MapboxGL 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 MapboxGL 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: Gugustinette/nuxt-maplibre#7

[Alex-Properate]

Very interesting ideas. My first question would be, what do you see as the primary benefit for SSR of the map?

Regardless I would be open to a PR that explores this idea, with the caveat that there remains an option for both SSR and client rendering.

To me the more "elegant" solution sounds like the tile rendering option, mostly because using a headless browser seems like a large amount of overhead. I would be happy to help brainstorm more potential solutions as well when I have some time.

[iBobik]

Thank you for quick reply.

I need to use a map on the landing page above the fold where subjective speed matters. Image placeholder will be rendered almost immediately even before hydratation.

[Alex-Properate]

Have you looked into using the mapbox static images API? If you are ok with sacrificing interactivity until hydration completes this seems like something that could be potentially rendered on the server side quite easily.

https://docs.mapbox.com/api/maps/static-images/

[iBobik]

Yes, this is what I mean by the "tiles API" in the "Render just tiles“.

[iBobik]

Hmm, this API have also ability to add GeoJSON overlays, including custom markers:
https://docs.mapbox.com/api/maps/static-images/#overlay-options
This seems very promising!