dioxus icon indicating copy to clipboard operation
dioxus copied to clipboard

With SSG, if root index has more than one element in the rsx, the second element shows on other pages

Open rogusdev opened this issue 9 months ago • 8 comments
trafficstars

Problem

I see content from a different route with SSG. Per discussion https://discord.com/channels/899851952891002890/1276184595192348764/1332184863368806410

Slightly modifying the sample code for SSG from https://github.com/DioxusLabs/docsite/pull/394/files#diff-f0dc0decbe64520d7aece27061742d5a65655e474131969c8fcf2864556c9110 to just change one element like so:

fn Index() -> Element {
    rsx! {
        h1 { "Index" }
        h2 { "This content is still visible" }
        h2 { "So is this?" }
    }
}

It is very worth noting in my mind that in my production app I see a full flash of the root index contents before other routes render, and then end up with the second element still visible. I can workaround the extra content by simply wrapping the elements in a div, but I thought we weren't supposed to need to do that with rsx... And I definitely still don't want to see the homepage flash on every page load if we can avoid it! (but that might be a separate bug, idk.)

Steps To Reproduce

  • dx serve --platform web --ssg
  • http://localhost:8080/other/

Index page shows all 3 elements as it should, but Other shows "Other" (as it should) and also "This content is still visible" (as it should not) -- but not "So is this?"

Expected behavior

Don't show content from other routes!

Screenshots

Image

Environment: dioxus = { version = "0.6.2", features = ["router", "fullstack"] }

rogusdev avatar Jan 24 '25 03:01 rogusdev

I did double check that if I rm -rf target/ and then dx serve --platform web (i.e. drop ssg) the problem goes away.

rogusdev avatar Jan 24 '25 03:01 rogusdev

Although when I went back again, I could not repro it again?.... idk what is happening. But something is definitely happening.

rogusdev avatar Jan 24 '25 03:01 rogusdev

Mentioned in a few discord threads:

  • https://discord.com/channels/899851952891002890/1276184595192348764/1332188428674138274 == original
  • https://discord.com/channels/899851952891002890/1332198339827073086/1332198339827073086 == possibly same/related?
  • https://discord.com/channels/899851952891002890/1332211490186330163/1332211490186330163 == request for insights into the flashing home page

rogusdev avatar Jan 24 '25 05:01 rogusdev

I cannot reproduce this with dioxus 0.6.2. There is a chance this is a bug with hot reloading. If it is, the chain of updates you made since the last rebuild could be important for reproducing the bug

ealmloff avatar Jan 24 '25 20:01 ealmloff

I am also not able to reproduce it again now, using the rm -rf target that I routinely do before builds now. However I am also doing that for my production website, but it is still showing content from the second div on my home page on other routes. I unfortunately cannot share that, but I am trying to get a minimal repro still. For the moment however, this is a serious concern for me to use SSG and I have to switch back :(

rogusdev avatar Jan 24 '25 20:01 rogusdev

Specifically, the biggest problem for me is the flashing of the home screen, because the second div doesn't show if I only have one div in the rsx ;)

rogusdev avatar Jan 24 '25 20:01 rogusdev

I can't successfully repro this in a new app just yet, but I did repro it in a shareable video form with a stripped down version of my app:

https://github.com/user-attachments/assets/a44b4a12-a98e-4290-891f-11d46d3c59ea

You can see that on reload, the home contents are shown briefly (imagine they are much more elaborate, and not at all the same as the page that is actually loading). And on the new page you still see the second div from the home.

Home looks like this:

use dioxus::prelude::*;

#[component]
pub fn Home() -> Element {
    rsx! {
        h1 {
            "Home"
        }

        h2 {
            "HOME 2nd DIV"
        }
    }
}

And the other page is effectively just:

#[component]
pub fn View(id: ReadOnlySignal<Uuid32>) -> Element {
    rsx! {
        div {
            "Project"
        }
    }
}

rogusdev avatar Jan 24 '25 22:01 rogusdev

OK, digging deeper on this stripping of my own app to try and make a minimal repro, I am suspecting that the problem is 2 things combined:

  1. I have a bad config with my proxy server that is not properly routing to the static route index.htmls (maybe)
  2. the matching not working properly in https://github.com/DioxusLabs/dioxus/issues/3644 might actually mean that my dynamic routes are also not getting properly routed from index.html unless almost forced into it with a check I have on each page. (which might be why the home page flashes first -- it is actually only loading the home page and then redirecting in my code)

At this point however, there are too many variables interfering with a clear analysis, so I'll continuing with not using SSG, and let you investigate the other ticket, and once that is resolved and I can confirm that, I will revisit this ticket to see if it has resolved itself or perhaps that my config is broken and needs tweaking -- or there is still an actual issue here that needs to be resolved.

rogusdev avatar Jan 24 '25 23:01 rogusdev