Supporting SSR - window is not defined
sprucify opened this issue · comments
I was trying this with SSR: true to have a look if this module would support SSR.
Any plans to support SSR?
Yeah I was thinking about that lastly, I don't know if and how there's a way to make it work with SSR.
I'll definitely look into that as soon as possible !
So as far as I searched (many articles like these one), there is no way to make it work with SSR. Leaflet is really a client-side library.
It would probably require a lot of rewrite to render maps on the server, and still, I'm not sure about how good of an idea it is ?
However, Nuxt-Leaflet should work seamlessly on SSR environments, the map would just be ignored by SSR and rendered on the client, without any additionnal configuration.
Did you really get the "window is not defined" error when testing with the latest version ?
In my nuxt config, I had to do SSR:false for /map/** routes, but missing a lot of other functionality with that.
doesn't work. As soon as you import leaflet code it will trigger window and navigation not found.
Well everything works fine on a blank Nuxt 3 project using it (works on my computer lol) without configuring anything special. The map is just ignored by SSR and rendered on the client.
Can you provide anything more specific ? Any step to reproduce ?
Did you use nuxi generate to generate the static site and prerender the map page?
Well I don't know how the module would behave with pre-rendered pages, I tried myself and got this.
The map displays some random tiles in the wrong order 😭
I guess you expect it to be ignored by SSG ? So your page is statically generated but has some client side features in JS ?
Yes exactly.
For example be able to wrap the Map container with <ClientOnly> and leave the import scripts as is.
When I set SSR:false I also have no meta data, no SEO control, no open graph images, no google indexing, etc.
There is no need to pre-render the tiles, that can be client only.
I tried to deploy a statically generated site (from the Nuxt Playground) to Github Pages : here
This code seems to work with SSG here, I didn't configure anything in nuxt.config.ts, nuxi generate is used to pre-render the pages 😕
We have some pretty weird behavior here 😭
I got it working also on another PC
I think I had a lot of leftovers in build cache on my MAC from previous attempts with different modules/plugins.
In your source code I noticed leaflet is async loaded, I think that line perfectly prevents the * not defined errors.
Maybe not ideal for everyone to inject it globally, but my app is using the map component a lot, so works for me.
Thanks a lot for helping out and your work on this module
No problem, thanks for your feedback, the module is pretty new so it's a great thing to experience different rendering mode on it !
(Hopefully Nuxt is so well done that we do not have to do anything to get the best of all results lol)