Hi <@UFT11FKSP>, I was looking into SsrRouters and...

# kilua

[Sunil Kumar]

Hi @Robert Jaros, I was looking into SsrRouters and found that we have multiple routers. I was checking the AsyncSsrRouter and SimpleSsrRouter

So we should use AsyncSsrRouter if we are fetching some async data?:

This router will defer the rendering on the server until some asynchronous
* operation (e.g. fetching data) is finished.

If we use SimpleSsrRouter even when fetching data, then what impact it will have?

This router can be used to directly declare UI components for each route,
* which will be rendered on the server immediately for every request.

I understood their definitions, but can u tell us what exactly are theses differences, when they do make sense and when we should use each one?
Does it means, if we are fetching some async data, then we should prefer AsyncSsrRouter else SimpleSsrRouter

[Robert Jaros]

Hi

[Robert Jaros]

SimpleSsrRouter is ... simple. It can be used for some very basic applications, which don't need any external data sources. Just like these simple ssr apps in the project's examples directory. See here: https://github.com/rjaros/kilua/blob/main/examples/ssr-javalin/src/webMain/kotlin/example/main.kt#L43-L72

[Robert Jaros]

It's just a generalization of the non-ssr Kilua routers - they are used exactly the same way. You should be able to replace BrowserRouter with SimpleSsrRouter without any code changes.

[Robert Jaros]

But if you want your application to render server side html with some data, which is not directly available, you need AsyncSsrRouter.

[Robert Jaros]

E.g. you probably want /article/15 url to display the content of article number 15. When you are on the client side, it's easy - your app is already loaded, when the url is triggered by user navigation, you probably show some progress bar, fetch the data from the server, change the state in some store and then render the correct article content.
But when the same url is send to the server you would like the SSR engine to return html page with the same, correct article content. You need to let the server know, when the content is ready to be returned. And that's the work of AsyncSsrRouter. You also use "state based routing" (https://kilua.gitbook.io/kilua-guide/2.-frontend-development-guide/routing#layout-based-routing-vs.-state-based-routing) for this (routeAction instead of route).

[Robert Jaros]

The result is something like this: https://github.com/rjaros/kilua/blob/main/examples/realworld/src/webMain/kotlin/io/realworld/App.kt#L59-L119

[Robert Jaros]

The lambda passed to routeAction (or other *Action functions) is suspending and should return only then the whole data fetching process is ready. You should make all the actions I've mentioned previously inside this lambda call (e.g. show progress, fetch data, update state, hide progress). The same code is used on the client side so it will work correctly as well. And on the server side it will wait until data is ready before rendering the composition to html file content.

[Sunil Kumar]

Cool, Got it, Thnx for deep explanation.🙌