Comments (8)
arctic-hen7
commented on May 30, 2024
@lukechu10 would you be able to shine any light on this? (Note: it occurs with and without hydration.)
from perseus.
lukechu10
commented on May 30, 2024
It's a FOUC (Flash Of Unstyled Content). If you go into the browser devtool's network tab, you can block the style.css and then the issue is solved. The elements already have some inline styling so that is shown first before the css file is loaded.
I think the problem is that when navigating, perseus replaces the entire <head> and not just the dynamic part. This causes the style.css file to be re-fetched. I think the intended behavior should be that the static part provided by the index_view should never be modified.
Also there is another "jolt" when loading the page. This jolt seems to coincide with the addition of the route announcer. This might be a problem with the CSS and therefore adding a new node changes the behavior of the CSS selector.
from perseus.
lukechu10
commented on May 30, 2024
Also there is another "jolt" when loading the page. This jolt seems to coincide with the addition of the route announcer. This might be a problem with the CSS and therefore adding a new node changes the behavior of the CSS selector.
Actually, that's because the SSR-ed HTML is for some reason different from the hydrated HTML. There is an additional <div> around the <header> once the HTML is hydrated.
from perseus.
arctic-hen7
commented on May 30, 2024
Perseus doesn't actually replace the whole head in content, but in terms of mechanics it does. That can probably be faiy easily fixed, since the delimiter functionality of what not to replace is already built in.
As for the initial load part, that's just because we can't put the dynamic view inside the router at the root yet. I did reflect that in the server side HTML at some point, though I seem to have removed it.
A plan of action then would be to add that div back and modify the head replacement logic on the client side to not delete and re-add elements that shouldn't change. I'll get on with that today.
Greatly appreciated, @lukechu10 !
from perseus.
arctic-hen7
commented on May 30, 2024
Intriguingly, this seems to go away when just fixing the issue with the extra <div> not being provided by the server...
from perseus.
lukechu10
commented on May 30, 2024
Intriguingly, this seems to go away when just fixing the issue with the extra
<div>not being provided by the server...
Yeah that's because the CSS styles differently depending on whether the div is there or not.
from perseus.
arctic-hen7
commented on May 30, 2024
That would make sense on the first load, but in subsequent loads, the render is direct to that <div>... Am I missing something really obvious here?
from perseus.
arctic-hen7
commented on May 30, 2024
The old head delimiter comment has now been replaced by a <meta itemprop="__perseus_head_boundary" content=""> element, which can be used as a marker to delete anything after it and replace it, avoiding any interaction with the static content before it that's shared between all pages.
from perseus.
Related Issues (20)
- Latest beta fails with `cargo-clif` HOT 2
- `perseus export --serve` does not work in 0.4.0-beta.12 HOT 7
- perseus serve -w stuck on infinite loop when using build.rs build script. HOT 6
- Failed to compile while running `cargo clippy` HOT 5
- ReactiveState derive macro panics when used on newtype structs HOT 2
- Nested static aliases fail with exporting HOT 8
- Cannot deploy a perseus app using beta.19 HOT 2
- Populate `lang` attribute on root `html` element when translator is present. HOT 2
- Incremental generation is broken for a template named index in the beta.19 HOT 4
- Build state function with non-`Clone` state results in suboptimal compiler error HOT 3
- Using the translation feature as well as having global build state causes an error when the user navigates directly to the root page (or any valid page) when not including the locale in the path. HOT 1
- Failed to run `cargo install perseus-cli` without the `--locked` flag HOT 4
- Using the builder pattern `input().bind_value(...)` perseus panics HOT 5
- Using global state in a Capsule as well as a Template leads to unreachable code being reached at build-time HOT 2
- Vectors do not work in `ReactiveState` HOT 4
- [Router] [Bug] When using `.incremental_generation()`, you cannot navigate to a new route on the same page. HOT 3
- When trying to run a perseus app with docker, it gets: `Error: asset './dist/render_conf.json' not found in store` HOT 2
- Fail proceed 'perseus build' after upgraded to v0.4.1 HOT 3
- Build-time state can be user or "segment" specific, and it's actually easy to setup HOT 3
- Missing </body></html> HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from perseus.