jwplayer / jwplayer-react

ISC License
28 stars 13 forks source link

[Feature] Support SSR Rendring #14

Closed snelsi closed 1 year ago

snelsi commented 2 years ago

JWPlayer fails to render on Server Side. Tested in the Next.js application.

The JWPlayer component tries to access window property, which doesn't exist on the server, resulting in the following error:

window is not defined
ReferenceError: window is not defined
    at /sandbox/node_modules/@jwplayer/jwplayer-react/lib/jwplayer-react.js:2:9899
    ...

Checkout this sandbox: https://codesandbox.io/s/next-js-forked-yl5wme?file=/pages/index.js

Expected result: JWPlayer component should skip Server Side rendering, or defer the usage of the window to prevent the error

jasonlav commented 2 years ago

Issue can be resolved by hiding the player on SSR render and then rendering it on the frontend. I am unfamiliar with Next.js, but with Gatsby it can be done using the following:

const [showPlayer, setShowPlayer] = useState(false);

useEffect(() => {
    setShowPlayer(true);
}, []);

return (
    {showPlayer && <JWPlayer>}
);
snelsi commented 2 years ago

@jasonlav Yes, you can manually hide this error by skiping server side rendering of the component. But this logic should be included in the library out of the box, since most of the modern web-applications are rendered on the Server Side

mdaoust-sidlee commented 1 year ago

Any official update on this issue? Even with the suggested recommentation from @jasonlav I have the following error (which might be related to #12 and #13) :

image

kenchambers commented 1 year ago

bump. we'd like to see out of the box SSR support as well (planning on scaling this package)

jdunningjwp commented 1 year ago

@snelsi @jasonlav @kenchambers @mdaoust-sidlee We have made an update to support server side rendering on branch improvement/add-support-for-SSR. Please test this new feature out and let us know if you have any feedback.

jwbrandon commented 1 year ago

If you see any other issues with this feel free to open another issue.