search

nk-o / jarallax

Parallax scrolling for modern browsers
https://jarallax.nkdev.info
MIT License
1.39k stars 214 forks source link

Server side rendering #126

Closed moltar closed 2 years ago

moltar commented 5 years ago

Issue description:

The use of lite-ready assumes that we are in a client-side environment.

But during server-side rendering (SSR), the DOM is not available and compilation errors out.

There are workarounds. And I think maybe this should be directed towards lite-ready, rather than this module. But maybe there is another, module similar to lite-ready that correctly detects whether we are in client side or not.

There is a can-use-dom module that detects if DOM can be used.

https://github.com/akiran/can-use-dom

import domReady from 'lite-ready';

Version used:

Latest.

Code to reproduce the issue (HTML blocks + JavaScript initialization)

Just requiring it in a Vue component while rendering server side.

Thank you!

nk-o commented 5 years ago

Parallax is a frontend effect. How you will use it on the server side?

moltar commented 5 years ago

Yes, it is used on the front-end, but build tools don't know this. Most SSR build tools expect the component to work in all environments. There are workarounds though, so it's not a show stopper. Just would be easier if it did comply with the ecosystem.

E.g. I am specifically talking about Nuxt in this case. If I import this in one of the Vue pages, it will fail compilation.

nk-o commented 5 years ago

I'm not familiar with Nuxt and Vue, but recently I worked on the React project with server-side rendering also. And in situations, when there was different methods for server and client side, I'm just included it in this way:

image

Based on this project https://github.com/kriasoft/react-starter-kit

I'm not using Jarallax for server side. If you want, feel free to make PR with a fix.

JamesAlphonse commented 5 years ago

Anyone have an update this? Facing similar issues with Nuxt SSR.

silverhand7 commented 3 years ago

I also faced the same issues.

nk-o commented 2 years ago

added Next.js example https://github.com/nk-o/jarallax/tree/master/examples/next

In this example used dynamic import to prevent errors in SSR:

https://github.com/nk-o/jarallax/blob/f09c9ae68259455d27c693401acf4b45677f5266/examples/next/pages/index.js#L4

If you have more workarounds, I will be glad to look at them.