[Feat]: Investigate SSR Support

[Westbrook]

Code of conduct

• I agree to follow this project's code of conduct.

Impacted component(s)

All

Description of the requested feature

Look into delivering components with SSR. See https://github.com/lit/lit/tree/main/packages/labs/ssr (used in Astro and possibly Next.js) or https://github.com/lit/lit/tree/main/packages/labs/eleventy-plugin-lit (our docs site).

See https://youtu.be/l6Gn5uV83sw?t=1855 for testing options.

Mockups or screenshots

No response

Implementation notes or ideas

No response

[timganter]

Additional data points for SvelteKit

SvelteKit is SSR for Svelte. Svelte is to SvelteKit as React is to NextJs.

At the time of this writing, here are steps to see the MutationObserver is not defined error that is produced when trying to use SvelteKit's SSR with SWC.

1. npm create svelte@latest my-app (choose skeleton project, typescript, eslint, prettier, playwright)
2. cd my-app
3. npm install
4. npm run dev -- --open (You should see sveltekit working and a welcome to sveltekit message)
5. stop server
6. npm install @spectrum-web-components/bundle
7. create a +layout.svelte file here src/routes/+layout.svelte
8. Put this as the contents of the +layout.svelte.

<script>
  import '@spectrum-web-components/theme/scale-medium.js'
  import '@spectrum-web-components/theme/sp-theme.js'
  import '@spectrum-web-components/theme/theme-lightest.js'
</script>

<sp-theme theme="spectrum" color="lightest" scale="medium">
  <slot></slot>
</sp-theme>

9. npm run dev again to start the server and get a MutationObserver is not defined error.

Temporary solution

You can turn SSR off in SvelteKit, essentially turning your whole app into an SPA by...

1. adding a src/routes/+layout.ts next to your src/routes/+layout.svelte.
2. add the following to your +layout.ts

export const ssr = false

For more details check out https://kit.svelte.dev/docs/page-options#ssr

[timganter]

I think something happened either in Sveltekit or Spectrum WC since I wrote my comment. Because at a glance it seems to be working now for Sveltekit! 🎉

If you try my original steps to reproduce, the MutationObserver is not defined error no longer appears. Official SvelteKit 1.0 just came out so not sure if that has anything to do with it.

Not sure what the process is for closing issues is. So, I'll leave this open for y'all to decide if it should be closed. I can report back here in this issue or reopen it if I notice the MutationObserver error coming back for Sveltekit

[stuartlynn]

@timganter is this still working? I tried the setup you suggested above with

• svelte-kit version 1.20.4
• @spectrum-web-components/bundle version 0.38.0

and see the MutationObserver is not defined error

[alexandremottet]

The MutationObserver is not defined still occurs on Next.js

[KotoriK]

Still occurs on Astro (with lit SSR integration configured) in SSR mode.

[tinykite]

As of both Svelte 4.2.11 and the recent Svelte 5 beta release (5.0.0-next.238) this error still persists server-side in SvelteKit applications.

[aralroca]

Probably a good option is to use Brisa Web Component compiler that supports SSR:

https://brisa.build/building-your-application/building/web-component-compiler

• SSR
• Signals
• Easy to maintain with JSX
• Tiny code

[castastrophe]

We have this work tracked now in Jira so I'm going to close. Please do reach out if you still need a status update on this feature.