Feedback

[brillout]

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:/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.

[aral]

Thanks :) I’ll take another look tomorrow based on your suggestions. Appreciate the tips.

[aral]

@brillout Thanks again – the flashing content was just what you said, I wasn’t adding the rendered CSS to the server-rendered page (doh). Fixed. Also, adding https: true while creating the Vite server seems to have somewhat fixed the issue with the multiple reloads. On Chrom(ium), the page wasn’t displaying at all previously. I need to investigate why but it still loads a few times at the start before settling.

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.

The url for the logo was not being reported correctly. I’m going to look into that now.

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.

Sorry, that was just me being silly: of course hydration happens page-level, not the component-level. I think at some point I got it into my head that I wanted to hydrate the Counter component instead of the index page and confused myself.

[brillout]

it still loads a few times at the start before settling.

I'm aware of this. It's a Vite problem. Although since recently this problem seems to occur less. A fix would probably be only a minor change in Vite's source code (probably only 2-3 LOC really), I just didn't had the time yet to dig into it.

Sorry, that was just me being silly: of course hydration happens page-level, not the component-level. I think at some point I got it into my head that I wanted to hydrate the Counter component instead of the index page and confused myself.

SSR is always a bit confusing at first :-).

Looking forward for us to polish the Svelte integration (as well as the HTTPS integration - is there anything left to do on that side?). I'll then add new doc pages.

[aral]

it still loads a few times at the start before settling.

I'm aware of this. It's a Vite problem.

Ah, interesting, I’m not seeing it with SvelteKit. I just whipped up a SvelteKit version of the same example (in case it makes it easier for you to track down the issue based on the differences in behaviour): https:/aral/sveltekit-version-of-vite-plugin-ssr-project

(That version also has the layout template set up properly, as per SvelteKit’s conventions.)

SSR is always a bit confusing at first :-).

Haha, that’s an understatement. It’s amazing the level of complexity involved in JS tooling at the moment :)

(Which is why vite-plugin-ssr is such a breath of fresh air. I really appreciate the modular “do one thing well” approach.)

Looking forward for us to polish the Svelte integration (as well as the HTTPS integration - is there anything left to do on that side?). I'll then add new doc pages.

I’ve now removed the HTTPS from this example (so that we’re changing only one thing in each example.) In the HTTPS example, I need to look into fixing HMR and then it should be good to go. I might have to add an API call to @small-tech/https (and thus to @small-tech/auto-encrypt and @small-tech/auto-encrypt-localhost) for obtaining references to the TLS certificate and key for when creating the Vite middleware before the server is created.

I’ll let you know when I’m confident everything is working as expected.

[brillout]

Neat 👌 and yes keep me updated.

Looking forward to add your examples to the official list of examples.

Haha, that’s an understatement. It’s amazing the level of complexity involved in JS tooling at the moment :)

I've a little vision going on about this :-).