Have you guys tried IntersectionObserver with NextJS? How did you initialise it for server side rendering ?

Think about what you just said.

Wtf is that ?

If a component is SSR enabled then it has a fallback in case IntersectionObserver isn't defined. You can use IntersectionObserver in many ways and it isn't really possible to fake it so you'd need Selenium otherwise.

@petergriffin I have and I am constrained. But this is what it is. If you have a good example do let me know. But scouring the Internet for the past week hasn’t helped me.

@YouAllSuck Its an native api to execute certain action on intersecting a dom node while in viewport. Usually used with infinite scrolling.

@homo-lorens I have read about using a polyfill haven’t given it a proper run though. Might need to try it once.

Like with many with in SSR environments, if it doesn’t exist, there is probably a good reason for it. Faking the intersection observer is a horribly stupid idea server-side. Simply check if you run server side and if so, run some special fallback logic for it instead of weird polyfill wonky crap.

@WhatDaCode It is probably designed for a very special case, but @ me if I'm wrong.

@WhatDaCode ahhhhh yes. its all so clear now. the computer industry started adopting jargon which is pure gibberish.

@petergriffin Aren’t we faking a lot of the solutions? Isn’t that the whole purpose behind our existence as developers? It doesn’t have to be perfect it just needs to fit the scenarios and support certain browsers. I have seen examples with polyfills working for some, can’t give up yet.

@homo-lorens Its advised in the some sections to use the IntersectionObserver inside useEffect but that leaves me with a issue where with each render callback to IntersectionObserver isn’t triggered. Trying to figure out why. NextJS does provide IntersectionObserver in useEffect but I really wanted it to be used with useRef and we can’t use useRef inside any hooks in ReactJs.

@WhatDaCode trust me, certain aspects of SSR are better when done separate for each specific target, browser and server.

It’s just like writing an universal app for Android and iPhone. Yes you can have one codebase for both, but to truly make both apps for Android and iOS great, you need to do some specific target oriented code stuff.

Been there, done that.

Just an update here I managed to pull it off finally the issue wasn’t because initialisation was wrong but due to an error in logic. You can find a demo code here on my github repo.

https://github.com/clivemchd/...

@petergriffin Just managed to pull it off. The issue was with logic and not with the native api itself.