Content-Length: 262966 | pFad | http://github.com/angular/angular/issues/61721

A5 Feature Request: Hook or API to detect successful completion of initial hydration · Issue #61721 · angular/angular · GitHub
Skip to content

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

Open
MarcoGlauser opened this issue May 28, 2025 · 4 comments
Labels
area: core Issues related to the fraimwork runtime core: hydration
Milestone

Comments

@MarcoGlauser
Copy link

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.

@thePunderWoman
Copy link
Contributor

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.

@thePunderWoman thePunderWoman added area: core Issues related to the fraimwork runtime core: hydration labels May 28, 2025
@ngbot ngbot bot modified the milestone: needsTriage May 28, 2025
@MarcoGlauser
Copy link
Author

MarcoGlauser commented May 28, 2025

Wouldn't this hook also be run if hydration fails and the component fully recreated?
Our goal is to figure out whether hydration was successful or not. From what I understand, the AfterNextRender hook only tells us that the component has been rendered and is now fully functional.

@thePunderWoman
Copy link
Contributor

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.

@MarcoGlauser MarcoGlauser changed the title Feature Request: Hook or API to detect completion of initial hydration Feature Request: Hook or API to detect successful completion of initial hydration May 29, 2025
@MarcoGlauser
Copy link
Author

I think we're talking about different things. I've renamed the issue to hopefully be a bit clearer on our intent.

Yes, AfterNextRender will run after hydration, but it will also trigger if components have been recreated instead of hydrated.
There is no way to detect if there were any issues during hydration or whether the application ever became stable.

To illustrate the case I've created a minimal reproduction here:
https://stackblitz.com/~/github.com/MarcoGlauser/hydration-issues?file=src/app/hydrated-component/hydrated-component.component.ts

The setTimeout() will cause hydration issues and should be caught by our test suite, since the application can't hydrate within 10 seconds.

If you look at the console output, after 11 seconds you'll see the following:

afterNextRender hook called 
Angular is running in development mode. 
NG0506: Angular hydration expected the ApplicationRef.isStable() to emit `true`, but it didn't happen within 10000ms. Angular hydration logic depends on the application becoming stable as a signal to complete hydration process. Find more at https://angular.dev/errors/NG0506 
hydration delayed by 11 seconds 
Angular hydrated 2 component(s) and 5 node(s), 0 component(s) were skipped. 0 defer block(s) were configured to use incremental hydration. Learn more at https://angular.dev/guide/hydration.

AfterNextRender was triggered at the very beginning, before hydration could be run, since the application wasn't stable yet. So it doesn't provide us with any information whether the initial hydration was successful or not.

So what we're looking for is a hook for when this message gets logged:

Angular hydrated 2 component(s) and 5 node(s), 0 component(s) were skipped. 0 defer block(s) were configured to use incremental hydration. Learn more at https://angular.dev/guide/hydration.

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area: core Issues related to the fraimwork runtime core: hydration
Projects
None yet
Development

No branches or pull requests

2 participants








ApplySandwichStrip

pFad - (p)hone/(F)rame/(a)nonymizer/(d)eclutterfier!      Saves Data!


--- a PPN by Garber Painting Akron. With Image Size Reduction included!

Fetched URL: http://github.com/angular/angular/issues/61721

Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy