No SSR Support. about use-viewport-sizes HOT 9 CLOSED

I'm kinda late for this, but THANKS!

from use-viewport-sizes.

Hi @charlie632,

Thanks a lot for bringing this up and setting up the clear example here.

I haven't personally quite had a use case for SSR yet (tend to try for a CDN, load balancing, bundling/cache-ing vendor packages for the client side to take load, etc before digging out the big guns). But since it wouldn't hurt to dive deeper here and it's on my bucket list, I'll try to check into this a bit and think on it this weekend -- do have some competing priorities atm though which leaves me a bit limited.

In the meantime, if you discover anything at all I'm completely open to supporting that! PR also welcome although one of the main goals is to keep the build size very lean at the end of the day.

from use-viewport-sizes.

@charlie632

I believe adding a simple polyfill which checks for window and assigns global.window would fix this issue -- but when the content reaches the page during SSR, do you know if the functionality then work again on client side? (React + Node + SSR is still a bit of a magic black box for me at this point in time).

from use-viewport-sizes.

@charlie632

Hopefully it's mutually understood that... we cannot grab viewport dimensions which don't exist using SSR. With that said, here is a code-sandbox which, shortly after first SSR render, viewport sizes update witha provided callback you can pass to useEffect. It is a bit of a trade-off to have this included since this is basically a 0.01% use-case, and I don't want auto re-renders for 99.99% client side only users. Outside of that, this should work in the same way as it did before.

https://codesandbox.io/s/2xm2njj07y

I am debating whether to include in an update as it will increase file size a little but: what are your thoughts on the result here?

from use-viewport-sizes.

@rob2d Wow, that was fast!

Yeah, I think the SSR use cases are still a bit low compared to CSR ones, but Next is truly gaining some momentum, so I think this might become a necessity in the future. I think maybe it's not the time to release the update tho. I can help with tinkering over the weekend to see what I come up with for this solution, because I see some warnings in the sandbox you provided. Besides that, great job!

Regards.

from use-viewport-sizes.

@charlie632 I try 🙃 the warnings are expected; with React Hooks, useLayoutEffect is not available because you technically can't render/paint on SSR, so there is nothing to measure. There was another issue on Facebook/react located somewhere on this which said it's to be expected and not an actual bug. The reason useLayoutEffect is used now is I want to add the resize handler before a component first paints on client-side so that I can check for changes in window and set an initial width/height when necessary -- this is again mostly for the client side use case which is what 99+% of users will be using it for. It is just a sneaky way of getting around any kind of window polyfills I added so that I don't even need to go through the hassle of mocking a browser window object to begin with.

For me, SSR isn't something to support in my own apps; SEO is actually handled mainly through HTML meta and Node 10 can share ES7 modules/app components for things like routing. I am really not trying to tailor anything to Next just to be on the bandwagon of what others are doing as the tech doesn't seem quite appropriate if you're not in a very special niche like Netflix where you use half of the bandwidth on the internet and need to support such legitimately heavy server loads w/o something being done efficiently in your host env. Would also argue that using React for your use-case might be overkill. But it is good to at least support it to the point where things do not break if I can here! 🙂

Will try to add this in an NPM update tomorrow. With the tangent on SSR aside, I do appreciate you bringing this up. Helps to make the library more usable!

from use-viewport-sizes.

@charlie632 should be there in v0.2.0v0.2.3(😅) on NPM. Thanks!

from use-viewport-sizes.

haha no problem. 0.2.6 is stable on client end and last I checked at least ran on your test. I haven't gotten around to writing automated tests yet since I have some work deadlines, but if you find any issues on SSR (my tests were limited) please feel free to update!

from use-viewport-sizes.

I just finished implementing this on a NextJS app I'm working on and works perfectly. I will keep working with this, but so far so good.

from use-viewport-sizes.