[Feature] Support SSR Rendring
snelsi opened this issue · comments
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
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>}
);
@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
bump. we'd like to see out of the box SSR support as well (planning on scaling this package)
@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.
If you see any other issues with this feel free to open another issue.