kdlgates / developer-resume

This is my simple developer resume for the web as initiated by create-next-app. Was also my first use case for lifting state in React, routing, and Single-Page App local vs. server-side rendering. At time of writing this deployed by Vercel at https://kdlgates.com

This is my simple developer resume for the web as initiated by create-next-app. Was also my first use case for lifting state in React, routing, and Single-Page App local vs. server-side rendering. At this time of writing it is also deployed by Vercel at https://kdlgates.com

On a system with Node.js installed:

npm run start

Then open http://localhost:3000 with your browser.

developer-resume's Issues

Theme Picker Hydration Error

The useLocalStorage custom hook appears to be working just fine, but Next's SSR throws an error about a local and server mismatch.

Can still print the theme value 'blue' but 'offwhite' theme is still maintained on the SSR, frustratingly simply setting it again with the radio button's onChange handler solves it no problem, can't seem to simulate that even with the correct local value. Good motivation to learn more about SSR and pre-rendering, it is frustrating how tricky triggering the re-render with the correct but mismatched local value seems to be.

Next's hydration help article on the error suggets just keeping any state change methods in a useEffect to trigger the parent Component to refresh but still no luck. Got some guidance to consider a rewrite with either a custom hook and using DOM logic for the storage/state loading or consider using the React Themes system and using a ThemeContext wrapper to manage CSS (though the friendly user on Reactiflux who suggested this uses Tailwind to manage CSS so that might be a bit above my level if I'm to solve this this weekend...).