Skip to content

Commit

Permalink
docs: added an adr around suppression
Browse files Browse the repository at this point in the history
  • Loading branch information
meza committed Mar 10, 2023
1 parent 8ca71e1 commit 3faefe7
Show file tree
Hide file tree
Showing 4 changed files with 43 additions and 2 deletions.
2 changes: 1 addition & 1 deletion docs/adr/.adr-sequence.lock
Original file line number Diff line number Diff line change
@@ -1 +1 @@
10
11
39 changes: 39 additions & 0 deletions docs/adr/0011-suppressing-hydration-warnings-on-scripts.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
# 11. Suppressing Hydration Warnings on Scripts

Date: 2023-03-10

## Status

Accepted

## Context

![Hydration Warning](../images/hydration.png)

When using the app in development mode, the console is filled with hydration warnings.
This usually is because the server and client render different content.
This is not a problem in production, but it is annoying in development.

In this case however the error stems from a change in the [DOM specification](https://github.com/whatwg/html/pull/2373)
which aims to reduce attack vectors by removing the nonce attribute from elements.

This inadvertently breaks causes differences between the server and the client side and React freaks out.

There is an [outstanding issue](https://github.com/facebook/react/issues/26028) to look into the problem.

We had
a [solution](https://github.com/meza/trance-stack/blob/12907646f56f58c604a1eaeae68f1549d9b570ec/src/components/StaticContent/StaticContent.tsx)
for this that was taken from a [stackoverflow post](https://stackoverflow.com/a/60365819).

This solution worked, but it seemed to be introducing a lot of "magic" to mask the problem.

## Decision

After some discussion, we decided to do the same
thing [Remix does](https://github.com/remix-run/remix/blob/8a07860f3eea1cbfc2c67d0018cb9ac76c6df9d1/packages/remix-react/scroll-restoration.tsx#L70)
and suppress the warnings at the script level without any additional magic.

## Consequences

- We will no longer see hydration warnings in development mode.
- We have to keep an eye on the React issue to see if they come up with a better solution.
4 changes: 3 additions & 1 deletion docs/adr/decisions.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,4 +9,6 @@
- [7. ARC takes a backseat](0007-arc-takes-a-backseat.md)
- [8. Use AWS CDK for deployments](0008-use-aws-cdk-for-deployments.md)
- [9. No more need to bundle environment variables](0009-no-more-need-to-bundle-environment-variables.md)
- [10. Authentication is done by Auth0](0010-authentication-is-done-by-auth0.md)
- [10. Auth by Auth0](0010-authentication-is-done-by-auth0.md)
- [11. Suppressing Hydration Warnings on Scripts](0011-suppressing-hydration-warnings-on-scripts.md)
- [12. Suppressing Hydration Warnings on Scripts](0012-suppressing-hydration-warnings-on-scripts.md)
Binary file added docs/images/hydration.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 3faefe7

Please sign in to comment.