-
Notifications
You must be signed in to change notification settings - Fork 26.3k
Feature Request: Hook or API to detect successful completion of initial hydration #61721
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Comments
There's actually already an API for this. You can rely on the AfterNextRender hook. This was developed intentionally to run after hydration finishes and is safe to use for this purpose. |
Wouldn't this hook also be run if hydration fails and the component fully recreated? |
If you're looking for a component level hook, that's a different story and wouldn't really work. Hydration is a process that may leave some dehydrated content behind on purpose for a number of reasons. It also doesn't run on a per component basis. Hydration is happening on the entire page and then cleans up the remaining dehydrated code at the end of that process. So you wouldn't be able to hook into it like that. This is why afterRender is appropriate, because that is an application level hook, and not a component level hook. |
I think we're talking about different things. I've renamed the issue to hopefully be a bit clearer on our intent. Yes, To illustrate the case I've created a minimal reproduction here: The If you look at the console output, after 11 seconds you'll see the following:
So what we're looking for is a hook for when this message gets logged:
That way we can add a test to hopefully make sure that hydration actually ran without issues within 10 seconds or less. We can't test against the console output, since it's only logged by dev builds. But we're testing our production bundle with e2e tests. |
Which @angular/* package(s) are relevant/related to the feature request?
platform-server
Description
We've run into issues with hydration from time to time when a new feature would break hydration but we wouldn't notice for a while.
Currently, we manually check for hydration success by watching for the
angular hydrated n components
message in the console, which is not ideal for automation or robust testing.To avoid this, we want to add an additional e2e test to our codebase, that checks whether initial hydration was successful or not.
But there seems to be no straightforward way in Angular to programmatically detect when the initial hydration process has completed and the application has become fully stable for the first time.
Proposed solution
Introduce a hook, event, or public api that allows developers to detect when the initial hydration process has completed and the application is stable for the first time. This could be a lifecycle event or a promise that resolves when the initial hydration is done. We don't care about deferred hydration components.
Basically the same as the
angular hydrated n components
message but as api.Alternatives considered
We're thinking of using
isStable
for the time being to detect when the app first becomes stable, but because the application has become stable doesn't necessarily mean that hydration was successful. There can be other issues stopping hydration from working properly, like html mismatch etc.The text was updated successfully, but these errors were encountered: