-
Notifications
You must be signed in to change notification settings - Fork 24.8k
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
prerender.io compatibility with hydration #55240
Comments
annotateForHydration
function into public API?annotateForHydration
function into public API?
@Dok11 the |
Ok, I installed const promiseApp = new Promise<ApplicationRef>((resolve) => {
resolve(this.applicationRef);
});
renderApplication(() => promiseApp, {
document: this.document,
}).then(() => {
const script = this.renderer2.createElement('ng-pre-script');
script.id = 'ng-state';
script.setAttribute('type', 'application/json');
script.style = 'display: none;';
script.textContent = this.transferState.toJson();
this.renderer2.appendChild(this.document.body, script);
}); but it provides an error:
I think there is a conflict between regular app initialization in the
and with manually call Even if we somehow fix this error in runtime, there is another trouble. The main.js of bundle with my initial approach are take 340 KB, but after installation |
annotateForHydration
function into public API?
It appears that you're utilizing the platform-server package within the client-side version of the application, which is not officially supported. Given that If you aim to fully leverage the capabilities of Angular, the recommended approach is to utilize the Angular CLI to generate prerendered pages. |
What exactly? |
The HTTP transfer cache, which enhances performance during hydration by re-using HTTP requests performed on the server. In this case this feature will not work when using this method because HTTP requests are solely cached when Angular operates within a server context. Consequently, requests are stored on the server and reused exclusively when the application is running in the browser. For more information, please refer to: Caching Data When Using HttpClient From my understanding Prerender.io works pretty similar to puppeteer where the application is rendered in a browser. In my view, for hydration to be effective, the |
In my case, the |
@Dok11 I believe this behavior would change as a result of 11705f5 - HTTP requests will no longer be added to the
The
If Prerender.io works as Alan mentioned above, the best option would be to enable SSR or SSG for your application. In this case, Angular would produce an HTML, which can be used by Prerender.io and this HTML would be hydratable on the client. Another option might be to avoid using hydration completely and use client-only rendering (i.e. do not use |
So you have plans by changing API to work hydration only with universal and no other ways? |
@Dok11, hydration requires usage of |
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
Which @angular/* package(s) are relevant/related to the feature request?
core
Description
As I found, this function required to use, if I want to use hydration with
prerender.io
service (without Angular Universal).In my experiments all works fine, when I use next code after page is stable:
Some points:
Here I use
ɵannotateForHydration
instead ofannotateForHydration
, because this is in the private Angular's API.I create
ng-pre-script
instead ofscript
, becauseprerender.io
cuts all scripts. But I can replace tag name while retrivieng html-code from backend, so it's not a trouble.Proposed solution
Just put the
annotateForHydration
function into public APIAlternatives considered
Using a
ɵannotateForHydration
?The text was updated successfully, but these errors were encountered: