Sometimes when we hit back or forward from browser, SPA will display page without CSS. Why and how to prevent this?

This only happens occasionally. I think it has something to do with internal routing and cache somehow because the problem doesn’t occur when I open devtab (with cache disabled).

@sid so this is a bug but not been resolved right?

Correct.

This is so embarrassing. I hate the fact that visitors can accidentally see the ugly face of the page without makeup (css). :sweat_smile:

:laughing:

Ok there’s http header to fix this issue that can be set in the html (but wouldn’t work every time) , or from server side like node.js or php. Since I’m using nginx, I be able to fix this issue by configuring it from there.

Although a proponent of SPA, I steer away from it for my node projects. I feel it is still in its infancy in Wappler.

MPA’s using the template is my current preference.

We feel the same. Even the page load is really weird and slow (compared to PHP).
But, we are sticking to it for our NodeJS projects so far. Its still faster when compared with MPA.

1 Like

Meanwhile I have to cry in MPAs. I can’t use SPAs altogether with nodejs due to absence of nested layouts.

Does this literally mean rendering layout, inside another layout… And each layout can have their own content pages? Or does it mean something else?
What would be the use case for this?

The most simple example.

Imagine having a simple main layout that has header, content1 and footer.

And imagine that content1 being another layout that may have a sidebar or not, content2 and other partials.

The main layout will always be the same but content1 will change its layout design based on different things.

Can you guys share a page where this style losing happens and how to recreate it? Or at least share how’s the page built so i can try recreating this. Up until now i have not been able to recreate such an issue.

@ben can you please share what’s missing / not implemented in SPA for Node?

@JonL aren’t partials what you need here, or maybe i don’t get your idea?

I understand. We had a similar design requirement recently. We ended up creating a partial which would be added in separate content pages where required.
Similar to what Patrick has suggested on the FR.

Would be interesting to see how well the sub nesting works with DMX stuff, if the team decides to implement this. Voted for the FR.

1 Like

When you assigned Patrick, I though you guys were able to recreate it.
Sending you private message with link to check this.

The absence of nested layouts would mean that the main(and only layout) would be bloated with dynamic hide/show partials that will render depending on their page they are in, making it more complicated to maintain.

Say I have marketing site, a forum, a blog, the product/app itself and an admin dashboard to manage the accounts because it’s a SAAS.

Marketing, forum and blog share the same main layout A where you can find the header for main navigation, footer for information links and popups, popouts and other marketing stuff.

Now each one of them have their own set of partials that only make sense in their context.

Forum has a set of partials that don’t make sense for a blog or an about page. i.e, forum subheader,

A blog has another set of partials that make no sense in forum or about. i.e categories sidebar for categories, ads,etc

The product app doesn’t even share the main layout A. It needs it’s own main layout B to maximize the amount of space dedicated to the App to provide a good UX. And then the product has some other parts that need their own specific layouts. The user settings may have a different layout than another part of the app.

Admin dashboard has also another main layout and a different set of partials depending on the context inside of the admin.

All this can only be achieved graciously with nested layouts. Without them it’s just a shit show of hiding/showing partials in layouts depending on context.

1 Like

And to add to this I just wanted to say that I already use nested layouts in my projects even though they are not supported out-of-the box. My implementation is done by adding data to the routes and calling partials dynamically. It is quite easy.

The problem is that this approach is not compatible with App Connect SPAs router component. Ergo I cry in MPA. Thus my FR.

@patrick already mentioned that if implemented it would probably be based on the approach I take for them. Mainly it is adapting the SPA router to account for nested layouts.

Here’s the latest update, which should fix this problem

dmxRouting.zip (1.9 KB)