Svelte SSR

[buhrmi]

This adds SSR support for Svelte.

Setup is rather simple compared to the other frameworks. Here is an example for Vite:

// ssr.js
import { createInertiaApp } from '@inertiajs/inertia-svelte'
import createServer from '@inertiajs/server'
import layout from '../pages/_layout.svelte'

const pages = import.meta.glob('../pages/*.svelte')

createServer((page) => createInertiaApp({
  page,
  resolve: async name => {
    const page = await pages[`../pages/${name}.svelte`]()    
    return Object.assign({layout}, page)
  }
}))

As you can see, there is neither a setup, nor a render function. When importing a Svelte component during SSR, the Svelte compiler automatically creates a render() function on the imported component.

To make client-side hydration work (that is, reuse the server-side generated HTML), enable the hydratable compiler option and add hydrate: true to your client-side setup:

// application.js
createInertiaApp({ 
  // .....
  setup({ el, App}) {
    new App({ target: el, hydrate: true })
  },
})

[pySilver]

Any updates on this? Is it going to be merged?

[buhrmi]

I don't know, hoping for someone to help me peer-test it in case I've missed something.

[pySilver]

@buhrmi if you mind to provide some instructions for webpack mix I'd be happy to test it.

[FluffyDiscord]

@buhrmi can we please get a bit more attention ? this is crucial pull request

[reinink]

@buhrmi Hey thanks for contributing this! I'd LOVE to get SSR working with Svelte, and it's something I've hacked on myself, but without any success. I'm just in the middle of a big restructure to Inertia (see #1282), but once that's done I'm definitely going to have a closer look at this 👍

[buhrmi]

Yeah makes sense. I'll update this PR once #1282 is merged (or make a new PR if there are too many conflicts).

[flydev-fr]

Pheww @buhrmi hero 🚀🤘

[pedroborges]

Thanks a lot for your contribution, @buhrmi. @reinink just changed the base branch to next, could you please update your PR to only include the changes related to SSR?

I'd like to start testing your PR as soon as possible, do you have a reproducible repo with backend that I could test this on? Or could you provide the steps to set it up on the backend?