Dynamic SSR/PWA

[ollyde]

Describe the problem

I have a SvelteKit app, working great.

I want to be able to export the app to Capacitor, so need static assets and code.

Would be the most awesome kick-ass thing ever if I could have two build settings.

1. SSR normal site
2. App assets

And would be super-mega-awesome if this could switch automatically and the code would magically work.

Describe the proposed solution

Enable a switch to allow SSR apps to create static assets for PWAs without changing code.

Alternatives considered

:*-(

Flutter..

Importance

would make my life easier

Additional Information

1. Get the advantages of SSR on web
2. Get the instant response on PWA.

Making this feature work will bring us into a new dimension for development.

No response

[khromov]

I recently built a Capacitor app + PWA from the same code base, you can read a blog post about the architecture here.

I did not use SSR because it was not necessary for my use case, but there is nothing to prevent you from that. There is already a switch, set:

export const ssr = true / false

...in your src/routes/+layout.ts to enable/disable SSR. You can for example make a "pre" script before building your app for PWA/Capacitor that sets this value to either true or false. But there's a lot more complexity to it than that to have a working Capacitor/PWA hybrid app, as you will see in the blog post.

[ollyde]

@khromov thanks for the reply, I'm reading the blog.

Yes indeed we have made cap svelte PWAs apps before.

But we want SSR for web/performance/seo reasons while maintaining the same code-base for PWA, so the best of both worlds.

The issue with the pre-script is, how do the +server scripts work?

[ollyde]

@khromov I noticed you're not using platform native transitions, I tried to swipe back and couldn't in your app, you can do this easily in Capacitor, any reason why?

[khromov]

The issue with the pre-script is, how do the +server scripts work?

+server.ts files are stripped from the output if you compile with adapter-static, unless you set them as export const prerendered = true, I touch on this in the blog post. So your static export won't have any of the server code.

you're not using platform native transitions

I'm not familiar with this, is it a plugin or something in Capacitor core? You can send a link and I'll check it out.

[ollyde]

@khromov capacitor includes native page transitions with a custom view controller: https://capacitorjs.com/docs/ios/viewcontroller. It doesn't work on simulator only real device.
This is also coming to Android (Android is only just now implementing this 15 years later)

Yes I saw that in your post export const prerendered = true but you didn't explain how that works.

Is the code then exported an executed a layer above in static JS for example?

[ollyde]

@khromov you can use this code to make it feel more 'native' ionic-team/capacitor#1097 (comment)

[khromov]

@ollyde If you set export const prerendered = true for a +server.ts file, it will be executed during build time both for adapter-static and adapter-node. If you set false (default) it will be executed during runtime on adapter-node and not exist at all in adapter-static export.

[ollyde]

@khromov yes but what do you mean by executed. Do you mean server.ts will be run on the client before the page is displayed allowing data to be passed to it? If that is the case how do we show loading indicators on the client then?

[khromov]

@ollyde Server endpoints are never executed on the client. In the context of +server.ts together with setting export const prerender = true, if you were to build the app it would run the server endpoint at build time, on the computer where you executed npm run build, any output from this endpoint would be generated as a static file in the build folder.

For example if you had /src/routes/posts.json/+server.ts and you built your page to the build/ folder, you would end up with a file called build/posts.json. This data would be static and not updated after the build. I use this approach to generate my apple-app-site-association file for example, because I want to use TypeScript for the type completion. :-)

[ollyde]

@khromov oh that's a shame, hence why this ticket exists.

Would be nice to have +server.ts converted to some client-side caller with loading indicator options. Of course not all +server files can do this, but const prerender = true can take care of that.

My quest is to get SSR working on hosted platforms and PWA working for apps without any configuration :D

[khromov]

It would be helpful if you specified how you would imagine it to work, for example, what files would be created, how would the code look (provide a "pseudo-code" example), and what would the output be like + a pipeline of how the data flow.

As for your last message, "client-side caller with loading indicator options" is exactly what a +page.ts load function would do. It runs on the server and in the client and it can be used to fetch data both in adapter-static and other dynamic adapters. In dynamic adapters it would generate server side rendered HTML, and in adapter-static it would depend a bit how your build environment was set up, but the data would usually be refreshed client side. (Unless it's data that relies on for example cookies or localStorage values, such as data for logged in users)

[ollyde]

@khromov the +page::load function only runs on the client to make requests no? Unless I missing something out here.

[khromov]

@ollyde +page load is called "universal" and also runs on the server, please see:
https://kit.svelte.dev/docs/load#universal-vs-server

[ollyde]

So the PWA can also use page load, but then how do indicators and the like work?

For example if I use an infinite double way list?

[khromov]

"how do indicators and the like work"

You have to build your own loading indicator, you can do this for example using beforeNavigate and afterNavigate hooks.

If you prefer to do the load state in your component, you can use streaming promises:
https://kit.svelte.dev/docs/load#streaming-with-promises

All of this works with adapter-static.

You might like the official Svelte Discord channel, it's better suited for open-ended discussion:
https://discord.com/invite/svelte

[ollyde]

@khromov thanks for this info. Going to give this a try.

[NatoBoram]

It seems like I am describing the same "Dynamic SSR/PWA" issue in #10332, but the discussion is much better.

• Simply having a +page.server.ts page crashes static builds #10332

I also made a repo to reproduce the issue I'm having at https://github.com/NatoBoram/bug-report-sveltekit-ssr-csr