Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Hydration: detect when index.html is altered between the server and the client #51160

Closed
AndrewKushnir opened this issue Jul 24, 2023 · 2 comments
Closed

Hydration: detect when index.html is altered between the server and the client #51160

AndrewKushnir opened this issue Jul 24, 2023 · 2 comments
Assignees
@JeanMeche
Labels
area: core Issues related to the framework runtime core: hydration feature: in backlog Feature request for which voting has completed and is now in the backlog feature Issue that requests a new feature
Milestone
Backlog

Comments

@AndrewKushnir
Copy link
Contributor

AndrewKushnir commented Jul 24, 2023 •
edited

Which @angular/* package(s) are relevant/related to the feature request?

core

Description

The non-destructive hydration expects the DOM tree to have the same structure in both places. This also includes whitespaces and comment nodes that Angular produces during the rendering on the server. Those whitespaces and nodes must be present in the HTML generated by the server-side rendering process. This is also documented at: https://angular.io/guide/hydration#constraints.

In practice, some CDNs (example) have mechanisms to remove all comment nodes and spaces from all text nodes from HTML while serving the content (there are also cases where this type of optimization is performed at the build step). Those mechanisms are frequently enabled by default. This leads to situations where an application worked in dev mode correctly, but started failing in production. Since the production code is also minified, it makes it hard to look at the stack trace and identify the origin of the problem.

This feature requests proposes that we add a special detection mechanism for such cases. For example, we can do the following:

  • on the server, while serializing DOM, add a comment node to a well known location (e.g. as a first node in the <body>)
  • on the client (both in dev and prod modes), before starting hydration process, verify the presence of those "marker" nodes and throw an error if they are not present
  • we should also add an error guide for this error, so that the link to the guide is present in production mode

One of the examples where this issue becomes a hard-to-debug problem: #50133 (comment)
@AndrewKushnir AndrewKushnir added feature Issue that requests a new feature area: core Issues related to the framework runtime feature: in backlog Feature request for which voting has completed and is now in the backlog core: hydration labels Jul 24, 2023
@ngbot ngbot bot modified the milestone: Backlog Jul 24, 2023
@alxhub
Copy link
Member

alxhub commented Jul 25, 2023

Clever! I like it.

@JeanMeche JeanMeche self-assigned this Jul 25, 2023
JeanMeche added a commit to JeanMeche/angular that referenced this issue Jul 25, 2023
@JeanMeche
refactor(core): throw an error when hydration marker is missing from DOM
e2349d3 
non-destructive hydration expects the DOM tree to have the same structure in both places.
With this commit, the app will throw an error if comments are stripped out by the http server (eg by some CDNs).

fixes angular#51160
JeanMeche added a commit to JeanMeche/angular that referenced this issue Jul 25, 2023
@JeanMeche
refactor(core): throw an error when hydration marker is missing from DOM
ff0ead2 
non-destructive hydration expects the DOM tree to have the same structure in both places.
With this commit, the app will throw an error if comments are stripped out by the http server (eg by some CDNs).

fixes angular#51160
@JeanMeche JeanMeche mentioned this issue Jul 25, 2023
Closed
2 tasks
JeanMeche added a commit to JeanMeche/angular that referenced this issue Jul 25, 2023
@JeanMeche
refactor(core): throw an error when hydration marker is missing from DOM
1b890a9 
non-destructive hydration expects the DOM tree to have the same structure in both places.
With this commit, the app will throw an error if comments are stripped out by the http server (eg by some CDNs).

fixes angular#51160
JeanMeche added a commit to JeanMeche/angular that referenced this issue Jul 26, 2023
@JeanMeche
refactor(core): throw an error when hydration marker is missing from DOM
49748d2 
non-destructive hydration expects the DOM tree to have the same structure in both places.
With this commit, the app will throw an error if comments are stripped out by the http server (eg by some CDNs).

fixes angular#51160
JeanMeche added a commit to JeanMeche/angular that referenced this issue Jul 26, 2023
@JeanMeche
refactor(core): throw an error when hydration marker is missing from DOM
04f37f0 
non-destructive hydration expects the DOM tree to have the same structure in both places.
With this commit, the app will throw an error if comments are stripped out by the http server (eg by some CDNs).

fixes angular#51160
JeanMeche added a commit to JeanMeche/angular that referenced this issue Jul 26, 2023
@JeanMeche
refactor(core): throw an error when hydration marker is missing from DOM
604aa26 
non-destructive hydration expects the DOM tree to have the same structure in both places.
With this commit, the app will throw an error if comments are stripped out by the http server (eg by some CDNs).

fixes angular#51160
JeanMeche added a commit to JeanMeche/angular that referenced this issue Jul 26, 2023
@JeanMeche
refactor(core): throw an error when hydration marker is missing from DOM
28367ca 
non-destructive hydration expects the DOM tree to have the same structure in both places.
With this commit, the app will throw an error if comments are stripped out by the http server (eg by some CDNs).

fixes angular#51160
JeanMeche added a commit to JeanMeche/angular that referenced this issue Jul 28, 2023
@JeanMeche
refactor(core): throw an error when hydration marker is missing from DOM
5d58766 
non-destructive hydration expects the DOM tree to have the same structure in both places.
With this commit, the app will throw an error if comments are stripped out by the http server (eg by some CDNs).

fixes angular#51160
JeanMeche added a commit to JeanMeche/angular that referenced this issue Jul 28, 2023
@JeanMeche
refactor(core): throw an error when hydration marker is missing from DOM
ce1283a 
non-destructive hydration expects the DOM tree to have the same structure in both places.
With this commit, the app will throw an error if comments are stripped out by the http server (eg by some CDNs).

fixes angular#51160
JeanMeche added a commit to JeanMeche/angular that referenced this issue Jul 31, 2023
@JeanMeche
refactor(core): throw an error when hydration marker is missing from DOM
4c9389c 
non-destructive hydration expects the DOM tree to have the same structure in both places.
With this commit, the app will throw an error if comments are stripped out by the http server (eg by some CDNs).

fixes angular#51160
JeanMeche added a commit to JeanMeche/angular that referenced this issue Jul 31, 2023
@JeanMeche
refactor(core): throw an error when hydration marker is missing from DOM
df3f675 
non-destructive hydration expects the DOM tree to have the same structure in both places.
With this commit, the app will throw an error if comments are stripped out by the http server (eg by some CDNs).

fixes angular#51160
JeanMeche added a commit to JeanMeche/angular that referenced this issue Jul 31, 2023
@JeanMeche
refactor(core): throw an error when hydration marker is missing from DOM
ff1c380 
non-destructive hydration expects the DOM tree to have the same structure in both places.
With this commit, the app will throw an error if comments are stripped out by the http server (eg by some CDNs).

fixes angular#51160
JeanMeche added a commit to JeanMeche/angular that referenced this issue Aug 1, 2023
@JeanMeche
refactor(core): throw an error when hydration marker is missing from DOM
01d9c4d 
non-destructive hydration expects the DOM tree to have the same structure in both places.
With this commit, the app will throw an error if comments are stripped out by the http server (eg by some CDNs).

fixes angular#51160
JeanMeche added a commit to JeanMeche/angular that referenced this issue Aug 1, 2023
@JeanMeche
refactor(core): throw an error when hydration marker is missing from DOM
824e3c2 
non-destructive hydration expects the DOM tree to have the same structure in both places.
With this commit, the app will throw an error if comments are stripped out by the http server (eg by some CDNs).

fixes angular#51160
@dylhunn dylhunn closed this as completed in 0a38dc3 Aug 4, 2023
JeanMeche added a commit to JeanMeche/angular that referenced this issue Aug 4, 2023
@JeanMeche
refactor(core): throw an error when hydration marker is missing from …
aa0164c 
…DOM (angular#51170)

non-destructive hydration expects the DOM tree to have the same structure in both places.
With this commit, the app will throw an error if comments are stripped out by the http server (eg by some CDNs).

fixes angular#51160

PR Close angular#51170
thomasturrell pushed a commit to thomasturrell/angular that referenced this issue Aug 29, 2023
@JeanMeche
refactor(core): throw an error when hydration marker is missing from …
94e71af 
…DOM (angular#51170)

non-destructive hydration expects the DOM tree to have the same structure in both places.
With this commit, the app will throw an error if comments are stripped out by the http server (eg by some CDNs).

fixes angular#51160

PR Close angular#51170
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 4, 2023
ChellappanRajan pushed a commit to ChellappanRajan/angular that referenced this issue Jan 23, 2024
@JeanMeche @ChellappanRajan
refactor(core): throw an error when hydration marker is missing from …
c926292 
…DOM (angular#51170)

non-destructive hydration expects the DOM tree to have the same structure in both places.
With this commit, the app will throw an error if comments are stripped out by the http server (eg by some CDNs).

fixes angular#51160

PR Close angular#51170
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@JeanMeche JeanMeche

Labels
area: core Issues related to the framework runtime core: hydration feature: in backlog Feature request for which voting has completed and is now in the backlog feature Issue that requests a new feature
Projects
None yet
Milestone
Backlog
Development

Successfully merging a pull request may close this issue.

refactor(core): throw an error when hydration marker is missing from DOM JeanMeche/angular
3 participants
@JeanMeche @alxhub @AndrewKushnir