SvelteKIt possible alternate solution to hydrate custom elements

[rhscjohn-dev]

You can tell Sveltekit to not process a route in SSR using a hook. See hooks documentation. So let's say that you have Svelte route component called player.svelte that contains the code for VidStack.

Add the following file. src/hooks.js

export async function handle ({ event, resolve }) {
  console.log('hook:', event.url.pathname)
  const response = await resolve(event, {
    ssr: !event.url.pathname.startsWith('/player'),
  });
  return response;
}

In theory, player.svelte should only be run on the client side. Thus solving your problem until a fix is available.

Give it a try.

[mihar-22]

Thanks @rhscjohn-dev! I'll definitely consider documenting your suggestion, but it does come with the implication that an initial blank page will be delivered to the client which will impact SEO results. Not sure if this is desired by most, so need to be careful recommending it.

[mihar-22]

Closing because we'll provde SSR-friendly integrations in the near-future and we don't have Svelte-specific docs at the moment.