Queuebase is now in alpha! Sign up now to get early access.

Next.js - A simple fix for hydration issues

July 29, 2023 3 minute read

Hydration errors in Next.js can be some of the most frustrating errors to encounter. There’s a number of reasons why you might be seeing it. In this article, we’ll be looking at what hydration is, what causes these errors, and how you can fix them.

What is hydration?

According to the Next.js docs,

Hydration is when React converts the pre-rendered HTML from the server into a fully interactive application by attaching event handlers.

In other words, it’s when your client-side JavaScript is loaded and attached to your page in the browser. During this time, it’s important that the React component tree pre-rendered on the server matches the tree that’s rendered during hydration.

What causes hydration errors?

The Next.js docs list out a few reasons as to why you could be seeing this error. It can be things like improper nesting of HTML tags, trying to use browser APIs on the server, or browser extensions modifying page content.

For example, I recently ran into an issue with loading data from localStorage (via Zustand) that lead to this error every time I refreshed the page. I’ve also ran into it while trying to access the window object in a component. Both of these are part of browser APIs and do not exist on the server.

How to fix these issues

The simplest way to fix these issues is to use a useEffect to run your code client-side. Because useEffect gets called during hydration, this will make sure that your server-rendered content matches the content on initial client load, thus preventing a hydration mismatch.

import { useEffect, useState } from 'react';

export default function MyComponent() {
  const [isClient, setIsClient] = useState(false);

  useEffect(() => {
    setIsClient(true)
  },[])

  return <>{isClient ? "Client!" : "Server..."}</>
}

Here, “Server…” will be rendered initially, and “Client!” will be rendered once hydration has completed and the page is fully interactive.

Wrap up

In this article, we learned about what hydration in React is, what causes hydration errors, and how we can fix them with a useEffect. Using this pattern, we make sure that our server-rendered state always matches the client. By ensuring hydration has completed before we start using things like using client-only code, we can avoid hydration errors and make sure our application state stays consistent.

Resources

#nexjs
#javascript
#typescript
#next hydration error
#react

Newsletter

Brock's Bytes

Every Sunday, I share an exclusive email newsletter sharing my journey. If you're inesterest in code, technology, business, etc. this is the newsletter for you. Sign up now and join a growing community of readers!