Support for SSR / Next.js?

[voigtd]

Was wondering if there was a workaround for making react-fullpage work with an SSR framework like Next.js?

The error I'm getting when I imported react-fullpage in a Next app was that 'window' was undefined, which is understandable since 'window' isn't available for SSR.

[cmswalker]

Due to the way fullpage.js instantiates itself, it must be within a browser environment. The window must be present in order to build 100% vh slides and set event listeners. It seems like there would be little value in SSR for this as it would need to be rehydrated immediately on document.ready in order to build the proper layout.

If you need content for SEO purposes would it be feasible to render your content without being wrapped in fullpage on the backend, then wrapping it in fullpage on the frontend when rehydrating?

[cmswalker]

Alternatively, we can do what the previous library did and enforce that window be a required prop, this would basically return a stub/noop on the backend and a full render on the frontend. Would this work @danielrvoigt ?

[cmswalker]

See https://github.com/alvarotrigo/react-fullpage/pull/24

[JulianJorgensen]

@cmswalker I just checked out the branch ssr-error and when I use it with Next.js i still get the original error (window not defined).

I'm very excited to use this library, looks very promising!

[cmswalker]

The branch doesn't have the compiled library. So if you check that out and link it you'd need to require the component directly vs the one resolved from package.json. Once merged it'll get rebuilt and released

On Sun, Sep 2, 2018, 8:39 AM Julian Jorgensen notifications@github.com wrote:

@cmswalker https://github.com/cmswalker I just checked out the branch ssr-error and when I use it with Next.js i still get the original error (window not defined).

I'm very excited to use this library, looks very promising!

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/alvarotrigo/react-fullpage/issues/17#issuecomment-417939402, or mute the thread https://github.com/notifications/unsubscribe-auth/AIEzIjIY8PRuenD-CvJrP9OFTi74fRkDks5uW_u9gaJpZM4WE46c .

[JulianJorgensen]

@cmswalker Pretty sure I did just that. I import it in my repo using import ReactFullpage from '../../react-fullpage/dist/react-fullpages'; which is linking to the fork with ssr-error branch checked out and built. I just ran yarn && yarn build

[cmswalker]

@JulianJorgensen @danielrvoigt since this was a non breaking change I went ahead and published the patch @0.0.7 Give it a shot

[JulianJorgensen]

@cmswalker thanks a bunch! However, as I suspected I do still get the original error @danielrvoigt pointed out: window is not defined when using Next.js. (I upgraded to v. 0.0.7 which included the merge you just did).

[cmswalker]

Hmm. I tested this and it worked fine without window. I'll test again with some next boilerplate. Just to be sure you're positive you aren't npm linked to the old version right?

On Sun, Sep 2, 2018, 11:51 AM Julian Jorgensen notifications@github.com wrote:

@cmswalker https://github.com/cmswalker thanks a bunch! However, as I suspected I do still get the original error @danielrvoigt https://github.com/danielrvoigt pointed out: window is not defined when using Next.js. [image: screen shot 2018-09-02 at 8 50 39 pm] https://user-images.githubusercontent.com/46347/44959641-042a4d80-aef2-11e8-8e13-de5a82b90ee1.png

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/alvarotrigo/react-fullpage/issues/17#issuecomment-417951881, or mute the thread https://github.com/notifications/unsubscribe-auth/AIEzIlRz0oODa-d0bY_rCqSDOqmG0-wUks5uXCjNgaJpZM4WE46c .

[JulianJorgensen]

@cmswalker Yes I even just deleted node_modules and installed again to be sure. I'm using v 0.0.7. Thanks for looking into this! Really appreciated!

[cmswalker]

@JulianJorgensen ah i made some additional changes, try v0.0.8 and check out https://github.com/alvarotrigo/react-fullpage#server-side-rendering

[xbreid]

I've been keeping an eye on this issue since I'm using NextJS as well. I can say on my end things seem to be working now, and can render the react fullpage component with NextJS using the import you mentioned in the readme. I will continue to develop with it in NextJS and keep you posted.

[cmswalker]

great thanks, going to mark as resolved for now

[n0umankhan]

@cmswalker thank you so much the effort you and @alvarotrigo are putting for us. Shall i request you another feature ? can you add SSR support not only for next.js or gatsby.js but also for other frameworks. In my case, I'm using react-razzle. I'm just stuck here my content is not visible to bots after using fullpage wrapper.

[n0umankhan]

@alvarotrigo can you please help on the above comment ?

[alvarotrigo]

@n0umankhan can you please create a new issue with the suggestion? I'll mark it as a possible enhancement.