Server-Side Rendering Support

Is your feature request related to a problem? Please describe.

ply-react doesn’t really work with static site generators like Gatsby. It will produce the good ol’ “document is not defined” error.

Describe the solution you’d like

An out-of-the-box SSR implementation, or at least some documentation on workarounds.

Describe alternatives you’ve considered

I’ve been using loadable-component to circumvent this, but it no longer works in Gatsby v4.

[qinyiyao]

I ended up using React Suspense, which has no SSR support right now, but at least it works.

Guide from Gatsby:

import React from "react"

const ClientSideOnlyLazy = React.lazy(() =>
  import("../components/ClientSideOnly")
)
const MyPage = () => {
  const isSSR = typeof window === "undefined"

  return (
    <VideoContainer>
      {!isSSR && (
        <React.Suspense fallback={<div />}>
          <ClientSideOnlyLazy />
        </React.Suspense>
      )}
    </VideoContainer>
  )
}

//A wrapper holds the container in place to prevent layout shifting.
const VideoContainer = styled.div`
  aspect-ratio: 16 / 9;
`

[realamirhe]

I believe our package behavior might face some problems in SSR and we may want to replace the useEffect with something like useIsomorphicLayoutEffect. But this is known open Plyr issue #1909.