Seamless integration with Nextjs

[giovannipds]

As we've discussed at shaka-project/shaka-player#2163, the component may not be working right away with https://github.com/zeit/next.js, probably because of Shaka's non support for SSR.

There's a sample here loading the Shaka dynamically so it's possible to avoid Shaka that non support: https://github.com/amit08255/shaka-player-react-with-ui-config/tree/master/nextjs-shaka-player

It may be interesting to handle this in the component.

[matvp91]

Thank you for the report. I've tried several idea's, the final result can be see in PR #3.

The first idea I had was to make shaka-player-react "importable" by next.js, but this failed as global objects like "document" and "window" are not recognized by node. I quickly gave up on the idea for the following reasons:

• It makes no sense to load shaka-player in your node process, it'll be interpreted with no real goal. Shaka relies heavily on browser API's and serves no real purpose on a backend.
• Due to the fact that the UI is vanilla JS (& not React), there is no way to generate Shaka's UI through SSR. Even if this was the case, I doubt we'll get any win from it (as video is purely a client-side thing and this library adds only two DOM nodes, a div and the video element).
• Next.js is responsible for managing it's dependencies, whether code runs on the server or the client is totally up to Next.js and not a library (for the reasons mentioned above, it would be practically impossible).

With these comments in mind, I've managed to make it work by relying on next/dynamic, which allows you to ignore components to be handled by the server. I've noticed this is also how it works in the sample you've posted.

import dynamic from 'next/dynamic';

const ShakaPlayer = dynamic(
  () => import('shaka-player-react'), 
  { ssr: false },
);

// Use <ShakaPlayer ... /> as if it was directly imported from shaka-player-react

Unless I've missed something, this feels like a reasonable approach to use shaka-player-react with Next.js. I'll add a Next.js explanation in the README.

Let me know what you think.

[giovannipds]

I'd probably agree with you in everything. Great effort, thanks! =] Feel free to close the issue as soon as it gets documented.