Issue with default state + hydration failure
Answered
Sloth bear posted this in #help-forum
Sloth bearOP
I am having an issue with default state.
For side mobile navigation and the alert component in the following pages, they render on hard refresh and wipe after fractions of a second. Help would be appreciated it understanding this concept better.
Bonus points: I am also having a hydration issue where the ui doesn't match what was rendered on the server. I am not sure what exactly is causing this.
Thanks!
Page: https://github.com/aaronhawkey/experimental/blob/main/apps/web/app/(loggedout)/login/page.tsx --> LogInForm https://github.com/aaronhawkey/experimental/blob/main/packages/ui/LogInForm/LogInForm.tsx --> Alert https://github.com/aaronhawkey/experimental/blob/main/packages/ui/Alert/Alert.tsx --> Drawer nav https://github.com/aaronhawkey/experimental/blob/main/packages/ui/Navigation/Drawer.tsx
For side mobile navigation and the alert component in the following pages, they render on hard refresh and wipe after fractions of a second. Help would be appreciated it understanding this concept better.
Bonus points: I am also having a hydration issue where the ui doesn't match what was rendered on the server. I am not sure what exactly is causing this.
Thanks!
Page: https://github.com/aaronhawkey/experimental/blob/main/apps/web/app/(loggedout)/login/page.tsx --> LogInForm https://github.com/aaronhawkey/experimental/blob/main/packages/ui/LogInForm/LogInForm.tsx --> Alert https://github.com/aaronhawkey/experimental/blob/main/packages/ui/Alert/Alert.tsx --> Drawer nav https://github.com/aaronhawkey/experimental/blob/main/packages/ui/Navigation/Drawer.tsx
Answered by Sloth bear
Solved. I was loading in font from the web which was causing issues on hard refreshes. I instead implemented font the nextjs way: https://nextjs.org/docs/app/building-your-application/optimizing/fonts#with-tailwind-css
Doing this solved the issue I had with flashing fonts AND the drawer flashing.
Doing this solved the issue I had with flashing fonts AND the drawer flashing.
2 Replies
Sloth bearOP
@Rafael Almeida â¤ï¸
Sloth bearOP
Solved. I was loading in font from the web which was causing issues on hard refreshes. I instead implemented font the nextjs way: https://nextjs.org/docs/app/building-your-application/optimizing/fonts#with-tailwind-css
Doing this solved the issue I had with flashing fonts AND the drawer flashing.
Doing this solved the issue I had with flashing fonts AND the drawer flashing.
Answer