aral / vite-plugin-ssr-svelte

WIP: an attempt to create a lightweight and flexible SSR solution for Svelte using vite-plugin-ssr.

WIP: Svelte SSR example using vite-plugin-ssr

An attempt to create a Svelte version of the vite-plugin-ssr vue template.

Vite plugins used

• vite-plugin-ssr
• vite-plugin-svelte

Outstanding issues

• Cheat: “layout” is being manually imported into all pages.

  In the Vue example, it’s trivial to implement a layout template but Svelte pages must be compiled. You could add that feature to this example by manually creating and rendering a Svelte page wrapped in the layout component but that would add a lot of complexity to this small example while still not being indicative of real-world use (where you could have a hierarchy of layout templates and would likely have to keep a graph of your dependencies).

  Relatedly, instead of local scoped styles, we’re scoping the styles to the content of the slot in the “Colored page” using the new * :global() syntax in Svelte.

• Cheat: logo.svg link hardcoded in head (in default.page.server.js)

Install and run

1. Clone this repository
2. Install dependencies: npm i
3. Run it: npm run dev
4. Hit https://localhost in your browser.

vite-plugin-ssr-svelte's Issues

Update to vps 0.4 and Vite 3

Note that with vps 0.4 the _default.page.* files need to live in /renderer/ for them to apply to all pages.

Vps migration guide: https://vite-plugin-ssr.com/migration-0.4.

Clicking button having no effect

Hi @aral,

I'm testing this out, using the instructions in the readme, and encountering some odd behavior.

When I run using npm run dev, on Chrome, clicking the button seems to have no effect.

When I run in Safari (again using npm run dev), clicking on the button usually has no effect, but sometimes, if I navigate back and forth between "Home" and "About", clicking the button causes the count to increment, and once it starts working, it continues working until page refresh. The problem seems to happen less if the developer console is open - but still happens sometimes.

Interestingly, I'm not seeing the same issue when I try your subsequent sveltekit-version-of-vite-plugin-ssr-project PR.

Any idea what could be going on? Is it possible there is a race condition, somehow?

Did anything change in this second PR that could explain the difference in behavior above?

Feedback

Nice work 👌.

Couple of things that may help you.

Initial flash of unstyled content during dev.

Normally vite-plugin-ssr already takes care of that, see: https://github.com/brillout/vite-plugin-ssr/blob/f17158be83a20114313a0b94d073678efdbc2a0f/src/getPreloadTags.node.ts#L17-L29

Note that this also works for Vue SFCs.

You can have a look whether the CSS snippets of the svelte components are included.

Also see the disucsion here vitejs/vite#2282

Cheat: logo.svg link hardcoded in head (in default.page.server.js)

I don't see what the problem could be here? There is nothing view framework specific about setting the favicon, see the boilerplates.

No idea how to not replace server-side rendered prop values (e.g., replace the initial counter value in Counter.svelte with Math.random() and note that the value during server render is replaced during Svelte hydration).

Not exactly sure what you mean here but note that hydration (whether it's React, Vue, Svelte, ...) should always render the same content than the server-side rendered HTML. Otherwise it's a hydration mismatch, see https://vite-plugin-ssr.com/hydration.