Hydration missmatch in navigation after ISR rebuild in HomePage

[Mitsunee]

Summary

Due to unknown reasons the navigation does not render the correct HTML during ISR. This can be seen easily by opening the page source and searching for >Timers<

Expected Result

<a href="/" class="Navigation_link_cksm Navigation_active_cksm"><svg ...>...</svg><span>Timers</span></a>

Incorrect Result

<a href="/" class="Navigation_link_cksm">Timers</a>

Further Information

In a debug deployment the following things have been confirmed:

• useRouter works as expected, still has "/" on the asPath property
• the testActive callback works as expected, returning true for the "Timers" route
  • ISR still receives true from this callback!
• Non-ISR pages as well as pages that have not been rebuilt by ISR have the intended result
• ErrorBoundaries will catch Hydration Errors, but are reset when React switches to client-rendering the page as this rebuilds the entire DOM from scratch. They are still useful to log warnings to the client before this reset occurs.

A discussion on the next.js repository has been opened here: https://github.com/vercel/next.js/discussions/48130

Affected Code

https://github.com/Mitsunee/fgo-timers/blob/13b9516dce8efee47ce5d5d10b5a223ce34eabce/src/client/components/Layout/Navigation.tsx#L18-L53

[Mitsunee]

• Turns out the solution is to not use regular expressions in React Components. Pretty sure it's still fine in API routes and getStatic/ServerProps?
• There's an additional hydration error in HomePage on ChaldeaGateCard since ISR is non-blocking the first visit of the day will missmatch