single page apps (SPA) || static site generation (SSG) => confusing

[IwateKyle]

The docs and / or the concepts are a bit confusing. I found the SPA page documentation that suggested I turn off SSR. I thought "good, I don't want server side rendering" so I added the suggested change...

export const ssr = false;

.... then I discovered that my statically generated content went away ? "Huh?, Where's the beef?" I thought. So, the only conclusion I could come up with is that

• I can't have a statically generated SPA, (which doesn't make sense)
• or I shouldn't disable Server Side Rendering if I want a statically generated SPA (which doesn't make sense)
• or someone has a different definition of SPA and statically generated content than I do.

Regardless, I think I have my pages working the way I desire, but only after pushing enough buttons and testing the results. So, it feels fragile.

An example of a problem to help illustrate my misunderstandings.
I have a static page that statically generates great. I pull data from a test database and produce a static page. Just as I'd hoped for.

However, at the end of the same document - I inserted the <Counter/> example component that comes with the scaffold app. As I also expect, the counter has been statically inserted into the document.

But, I was expecting the control to still work as before with the + and - buttons, yet there is no client side behavior associated with the counter. Just the original starting number of zero with a minus and plus button that gives the impression that it's usable.

So, how do I get svelte components to work with the rest of my static content?

[eltigerchino]

Can you share a repository that reproduces this behaviour?

[IwateKyle]

hmmm.....prompting me for a repo caused me to go create another base demo app from the CLI.

Embarrassingly, I must admit that it seems to work the way I described that I thought it should work. The component is rendered statically while maintaining it's dynamic behavior correctly.

So, I guess there is no need to push that repo up since it works. I'm not really at a place where I can push my other non-working copy up. But, I am curious as to what I did that caused it to not work.

I'll poke around it a bit and see if I can figure it out - otherwise, maybe I can push it to github.

Thanks for the response.

[eltigerchino]

No worries!
You might try to check if client-side rendering (csr) is disabled anywhere in +page.js or +layout.js. It's true by default, but with export const csr = false the javascript gets disabled on that page or all pages affected by the layout.
https://kit.svelte.dev/docs/page-options#csr