Server-side rendering

[nnarhinen]

The component currently won't work when rendered server side.

We must investigate what is needed in order to support this.

[sdvassil]

@nnarhinen and @ondreian Any idea when this would get picked up? We recently added the React component to our Gatsby developer portal site. Everything renders correctly locally, but not server-side. We were initially getting some build errors on the server:

I contacted Redocly since they host our builds. They were able to fix the build but also got this error and pointed me to this issue.

[maryS49]

@nnarhinen Any chance this could be included as a user story to fix with the React feature for Q3? It would be helpful to be able to include the dev demos on the wowza site especially with Wowza 2.0 and movement of all docs eventually to the wowza docs site. Taking down the flowplayer docs site would happen when we release WV 2.0. All docs should be migrated over to the wowza site by then.

[hglbrg-sli]

Offering some insight here as one of your customers and someone who has had to work around this issue.

As the package is not a module the only way to make it work in an SSR (or SSG) environment is to defer its loading to a point in time where a window (or browser) object is present. This can be done using React.lazy for React, next/dynamic in NextJS or onMount() in Svelte. This works very well and should be a recommendation in the docs until the package is a proper module that can be imported as is.

The simplest way is to make a new component which uses Flowplayer from its imports like a wrapper and then import that wrapper-component using one of the methods above. It is of course possible to import the package "as a module" using the same methods but I found it is safer to wrap it (plus that fit our use case much better anyway as we needed to put in our own props into it (styling, callbacks to our API etc.)

In NextJS:

FlowPlayerComponent.tsx

import Flowplayer from '@flowplayer/react-flowplayer';

const FlowPlayerComponent = () => {
  // most code omitted for brevity
   return (
     <Flowplayer
       src=""
       token=""
       ref={}
       opts={{}}
      />
    )
}

export default FlowPlayerComponent

YourOtherComponentWhereYouWantToImportFlowplayer.tsx

import dynamic from 'next/dynamic'

const FlowPlayerComponent = dynamic(() => import('./FlowPlayerComponent'), {
  ssr: false,
});

const YourOtherComponentWhereYouWantToImportFlowplayer = () => {
// most code omitted for brevity
  return (
    // ...
    <FlowPlayerComponent />
    // ...
  )
}

export default YourOtherComponentWhereYouWantToImportFlowplayer