What's the most performant code splitting way to use Mux player with Next.js and Plasmic?

Developer Support
1

What’s the most performant code splitting way to use Mux player with nextjs/plasmic?

Currently I have it straight forward:

import MuxPlayer from "@mux/mux-player-react"

PLASMIC.registerComponent(MuxPlayer, {
  name: "MuxPlayer",
  props: {
    playbackId: "string",
    autoPlay: "boolean",
    loop: "boolean",
    muted: { type: "boolean", defaultValue: true },
  },
})

then I read this: https://www.mux.com/blog/mux-player-lazy-loading-with-blurhash

I’ve tried dynamically importing, lazy loading, etc but getting hydration errors. Appreciate any optimization pointers

2

I’m new to Plasmic but I would have to think the best way would be a service worker.
https://levelup.gitconnected.com/react-and-web-workers-c9b60b4b6ae8