Nextjs version 13 encountered hydration failure due to discrepancies between the initial UI and the server-rendered content

Question

Nextjs version 13 encountered hydration failure due to discrepancies between the initial UI and the server-rendered content

I am currently utilizing the latest version 13.1.0. I have implemented a ContextProvider that allows switching between light and dark themes.

'use client';
import { Theme, ThemeContext } from '@store/theme';
import { ReactNode, useState, useEffect } from 'react';

interface ContextProviderProps {
  children: ReactNode
}

const ContextProvider = ({ children }: ContextProviderProps) => {
  const [theme, setTheme] = useState<Theme>('dark');

  useEffect(() => {
    const storedTheme = localStorage.getItem('theme');
    if (storedTheme === 'light' || storedTheme === 'dark') {
      setTheme(storedTheme);
    } else {
      localStorage.setItem('theme', theme);
    }
    // added to body because of overscroll-behavior
    document.body.classList.add(theme);
    return () => {
      document.body.classList.remove(theme);
    };
  }, [theme]);

  const toggle = () => {
    const newTheme = theme === 'light' ? 'dark' : 'light';
    setTheme(newTheme);
    localStorage.setItem('theme', newTheme);
  };

  return (
    <ThemeContext.Provider value={{ theme, toggle }}>
      {children}
    </ThemeContext.Provider>
  );
};

export { ContextProvider };

This is integrated into my root layout

import '@styles/globals.scss';
import { GlobalContent } from '@components/GlobalContent/GlobalContent';
import { ContextProvider } from '@components/ContextProvider/ContextProvider';
import { Inter } from '@next/font/google';
import { ReactNode } from 'react';

const inter = Inter({ subsets: ['latin'] });

interface RootLayoutProps {
  children: ReactNode
}

const RootLayout = ({ children }: RootLayoutProps) => {
  return (
    <html lang="en" className={inter.className}>
      <head />
      <body>
        <ContextProvider>
          <GlobalContent>
            {children}
          </GlobalContent>
        </ContextProvider>
      </body>
    </html>
  );
};

export default RootLayout;

The theme value is consumed in the GlobalContent component

'use client';
import styles from '@components/GlobalContent/GlobalContent.module.scss';
import { GlobalHeader } from '@components/GlobalHeader/GlobalHeader';
import { GlobalFooter } from '@components/GlobalFooter/GlobalFooter';
import { ThemeContext } from '@store/theme';
import { ReactNode, useContext } from 'react';

interface GlobalContentProps {
  children: ReactNode
}

const GlobalContent = ({ children }: GlobalContentProps) => {
  const { theme } = useContext(ThemeContext);
  return (
    <div className={`${theme === 'light' ? styles.lightTheme : styles.darkTheme}`}>
      <GlobalHeader />
      <div className={styles.globalWrapper}>
        <main className={styles.childrenWrapper}>
          {children}
        </main>
        <GlobalFooter />
      </div>
    </div>
  );
};

export { GlobalContent };

An error has occurred:

Hydration failed because the initial UI does not match what was rendered on the server.

https://i.stack.imgur.com/oJb9b.png

React docs error link

I am puzzled by this error since I am using localStorage within my useEffect, so I anticipate the HTML generated on the server to be consistent with the client prior to the initial render.

How can I troubleshoot and resolve this issue?

javascript reactjs next.js local-storage

Answer 1

Answer №1

To achieve in Next.js 13, make sure to render jsx after the component has been mounted


function CustomComponent() {
  const [isMounted, setIsMounted] = useState(false);
  useEffect(() => {
    setIsMounted(true);
  }, []);

  if (!isMounted) return <></>;
  // continue with your code implementation
}

Answer 2

To achieve in Next.js 13, make sure to render jsx after the component has been mounted


function CustomComponent() {
  const [isMounted, setIsMounted] = useState(false);
  useEffect(() => {
    setIsMounted(true);
  }, []);

  if (!isMounted) return <></>;
  // continue with your code implementation
}

Answer 3

Answer №2

For a temporary fix, I have implemented a workaround that resolves the issue but sacrifices SSR functionality.

By utilizing a dynamic import on my ContextProvider, the server-rendering is disabled and the error disappears. This also eliminates the flashing problem between dark and light themes stored in localStorage. However, it does mean that SSR benefits are relinquished. If anyone has a better solution, please share it.

import '@styles/globals.scss';
import { GlobalContent } from '@components/GlobalContent/GlobalContent';
import { Inter } from '@next/font/google';
import dynamic from 'next/dynamic';
import { ReactNode } from 'react';

const inter = Inter({ subsets: ['latin'] });

interface RootLayoutProps {
  children: ReactNode
}

// Fixes: Hydration failed because the initial UI does not match what was rendered on the server.
const DynamicContextProvider = dynamic(() => import('@components/ContextProvider/ContextProvider').then(mod => mod.ContextProvider), {
  ssr: false
});

const RootLayout = ({ children }: RootLayoutProps) => {
  return (
    <html lang="en" className={inter.className}>
      <head />
      <body>
        <DynamicContextProvider>
          <GlobalContent>
            {children}
          </GlobalContent>
        </DynamicContextProvider>
      </body>
    </html>
  );
};

export default RootLayout;

This workaround does not globally disable SSR. As an experiment, I created a new test page with the code below:

async function getData() {
  const res = await fetch('https://rickandmortyapi.com/api/character', { cache: 'no-store' });
  if (!res.ok) {
    throw new Error('Failed to fetch data');
  }

  return res.json();
}

export default async function Page() {
  const data = await getData();

  return (
    <main>
      {data.results.map((c: any) => {
        return (
          <p key={c.id}>{c.name}</p>
        );
      })}
    </main>
  );
}

After executing npm run build, the test page confirms the usage of SSR.

https://i.stack.imgur.com/sJYuU.png

Upon inspecting the response for the test page, it reveals the HTML response received.

https://i.stack.imgur.com/YWpwg.png

Answer 4

For a temporary fix, I have implemented a workaround that resolves the issue but sacrifices SSR functionality.

By utilizing a dynamic import on my ContextProvider, the server-rendering is disabled and the error disappears. This also eliminates the flashing problem between dark and light themes stored in localStorage. However, it does mean that SSR benefits are relinquished. If anyone has a better solution, please share it.

import '@styles/globals.scss';
import { GlobalContent } from '@components/GlobalContent/GlobalContent';
import { Inter } from '@next/font/google';
import dynamic from 'next/dynamic';
import { ReactNode } from 'react';

const inter = Inter({ subsets: ['latin'] });

interface RootLayoutProps {
  children: ReactNode
}

// Fixes: Hydration failed because the initial UI does not match what was rendered on the server.
const DynamicContextProvider = dynamic(() => import('@components/ContextProvider/ContextProvider').then(mod => mod.ContextProvider), {
  ssr: false
});

const RootLayout = ({ children }: RootLayoutProps) => {
  return (
    <html lang="en" className={inter.className}>
      <head />
      <body>
        <DynamicContextProvider>
          <GlobalContent>
            {children}
          </GlobalContent>
        </DynamicContextProvider>
      </body>
    </html>
  );
};

export default RootLayout;

This workaround does not globally disable SSR. As an experiment, I created a new test page with the code below:

async function getData() {
  const res = await fetch('https://rickandmortyapi.com/api/character', { cache: 'no-store' });
  if (!res.ok) {
    throw new Error('Failed to fetch data');
  }

  return res.json();
}

export default async function Page() {
  const data = await getData();

  return (
    <main>
      {data.results.map((c: any) => {
        return (
          <p key={c.id}>{c.name}</p>
        );
      })}
    </main>
  );
}

After executing npm run build, the test page confirms the usage of SSR.

https://i.stack.imgur.com/sJYuU.png

Upon inspecting the response for the test page, it reveals the HTML response received.

https://i.stack.imgur.com/YWpwg.png

Answer 5

Answer №3

Encountered a similar issue while trying to integrate the Navbar component into RootLayout within layout.tsx in Next.js 13.

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
       <Navbar />
      <body className={font.className}>
        {children}
      </body>
    </html>
  );
}

I made a modification to the code above and placed the Navbar inside the body tag, which resolved the issue.

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={font.className}>
        <Navbar />
        {children}
      </body>
    </html>
  );
}

Answer 6

Encountered a similar issue while trying to integrate the Navbar component into RootLayout within layout.tsx in Next.js 13.

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
       <Navbar />
      <body className={font.className}>
        {children}
      </body>
    </html>
  );
}

I made a modification to the code above and placed the Navbar inside the body tag, which resolved the issue.

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={font.className}>
        <Navbar />
        {children}
      </body>
    </html>
  );
}

Answer 7

Answer №4

The error was resolved by dynamically importing the default export of ContextProvider in _app.tsx. The context state is also being persisted in localStorage without any issues.

_app.tsx

import dynamic from "next/dynamic";
 
const TodoProvider = dynamic(
  () => import("@/util/context").then((ctx) => ctx.default),
  {
    ssr: false,
  }
);

export default function MyApp({ Component, pageProps }: AppProps) {
  return (
    <TodoProvider>
      <Component {...pageProps} />
    </TodoProvider>
  );
}

context.tsx

import React, {
  useState,
  FC,
  createContext,
  ReactNode,
  useEffect,
} from "react";

export const TodoContext = createContext<TodoContextType | null>(null);

interface TodoProvider {
  children: ReactNode;
}

const getInitialState = () => {
  if (typeof window !== "undefined") {
    const todos = localStorage.getItem("todos");
    if (todos) {
      return JSON.parse(todos);
    } else {
      return [];
    }
  }
};

const TodoProvider: FC<TodoProvider> = ({ children }) => {
  const [todos, setTodos] = useState<ITodo[] | []>(getInitialState);
  const saveTodo = (todo: ITodo) => {
    const newTodo: ITodo = {
      id: Math.random(),
      title: todo.title,
      description: todo.description,
      status: false,
    };
    setTodos([...todos, newTodo]);
  };
  const updateTodo = (id: number) => {
    todos.filter((todo: ITodo) => {
      if (todo.id === id) {
        todo.status = !todo.status;
        setTodos([...todos]);
      }
    });
  };

  useEffect(() => {
    if (typeof window !== "undefined") {
      localStorage.setItem("todos", JSON.stringify(todos));
    }
  }, [todos]);

  return (
    <TodoContext.Provider value={{ todos, saveTodo, updateTodo }}>
      {children}
    </TodoContext.Provider>
  );
};

export default TodoProvider;

Answer 8

The error was resolved by dynamically importing the default export of ContextProvider in _app.tsx. The context state is also being persisted in localStorage without any issues.

_app.tsx

import dynamic from "next/dynamic";
 
const TodoProvider = dynamic(
  () => import("@/util/context").then((ctx) => ctx.default),
  {
    ssr: false,
  }
);

export default function MyApp({ Component, pageProps }: AppProps) {
  return (
    <TodoProvider>
      <Component {...pageProps} />
    </TodoProvider>
  );
}

context.tsx

import React, {
  useState,
  FC,
  createContext,
  ReactNode,
  useEffect,
} from "react";

export const TodoContext = createContext<TodoContextType | null>(null);

interface TodoProvider {
  children: ReactNode;
}

const getInitialState = () => {
  if (typeof window !== "undefined") {
    const todos = localStorage.getItem("todos");
    if (todos) {
      return JSON.parse(todos);
    } else {
      return [];
    }
  }
};

const TodoProvider: FC<TodoProvider> = ({ children }) => {
  const [todos, setTodos] = useState<ITodo[] | []>(getInitialState);
  const saveTodo = (todo: ITodo) => {
    const newTodo: ITodo = {
      id: Math.random(),
      title: todo.title,
      description: todo.description,
      status: false,
    };
    setTodos([...todos, newTodo]);
  };
  const updateTodo = (id: number) => {
    todos.filter((todo: ITodo) => {
      if (todo.id === id) {
        todo.status = !todo.status;
        setTodos([...todos]);
      }
    });
  };

  useEffect(() => {
    if (typeof window !== "undefined") {
      localStorage.setItem("todos", JSON.stringify(todos));
    }
  }, [todos]);

  return (
    <TodoContext.Provider value={{ todos, saveTodo, updateTodo }}>
      {children}
    </TodoContext.Provider>
  );
};

export default TodoProvider;

Answer 9

Answer №5

Encountering an issue with the popover component due to HTML tag nesting:

  <Popover open={open}>
    <PopoverTrigger>
      ...

To resolve, use the asChild prop like so:

For example;

  <Popover open={open} onOpenChange={setOpen}>
            <PopoverTrigger asChild>
                <Button
                    variant="outline"
                    size="sm"
                    role="combobox"
                    aria-expanded={open}
                    aria-label="Select a store"
                    className={cn("w-[200px] justify-between", className)}
                >

Credits to AissaSemaoui's input here

Answer 10

Encountering an issue with the popover component due to HTML tag nesting:

  <Popover open={open}>
    <PopoverTrigger>
      ...

To resolve, use the asChild prop like so:

For example;

  <Popover open={open} onOpenChange={setOpen}>
            <PopoverTrigger asChild>
                <Button
                    variant="outline"
                    size="sm"
                    role="combobox"
                    aria-expanded={open}
                    aria-label="Select a store"
                    className={cn("w-[200px] justify-between", className)}
                >

Credits to AissaSemaoui's input here

Answer 11

Answer №6

When using ShadCn, make sure to place the ThemeProvider tag within the html and body tags

Answer 12

When using ShadCn, make sure to place the ThemeProvider tag within the html and body tags

Answer 13

Answer №7

During my development process, I found myself working with nextjs version 14 and nexui version 2.

I discovered that placing my providers directly inside the body tag of the root component resolved the issue for me.

The relevant files where these changes were made are located at "@/app/layout.tsx".

export default async function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {

  const session = await getServerSession(authOptions)
  return (
    <html lang="en">
      <body className={inter.className}>
        <Providers session={session}>
          {children}
        </Providers>
      </body>

    </html>
  );
}

The modifications to improve the structure can be found in the file "@/app/providers.tsx".

export function Providers({ children, session }: { children: React.ReactNode, session: any }) {
    return (
        <SessionProvider session={session}>
            <NextUIProvider>
                {children}
            </NextUIProvider>
        </SessionProvider>
    );
}

Answer 14

During my development process, I found myself working with nextjs version 14 and nexui version 2.

I discovered that placing my providers directly inside the body tag of the root component resolved the issue for me.

The relevant files where these changes were made are located at "@/app/layout.tsx".

export default async function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {

  const session = await getServerSession(authOptions)
  return (
    <html lang="en">
      <body className={inter.className}>
        <Providers session={session}>
          {children}
        </Providers>
      </body>

    </html>
  );
}

The modifications to improve the structure can be found in the file "@/app/providers.tsx".

export function Providers({ children, session }: { children: React.ReactNode, session: any }) {
    return (
        <SessionProvider session={session}>
            <NextUIProvider>
                {children}
            </NextUIProvider>
        </SessionProvider>
    );
}

Answer 15

Answer №8

The primary layout structure is determined at the highest level of the application directory and is applicable to all routes. A fundamental aspect of this layout revolves around the inclusion of html and body tags, enabling users to customize the original HTML content provided by the server.

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        {/* Designing the Layout */}
        <main>{children}</main>
      </body>
    </html>
  )
}

Moreover, layouts within the folder hierarchy are typically organized in a hierarchical fashion, signifying that they encapsulate child layouts through their children property. To establish nested layouts, simply insert a layout.js file within specific route segments (folders). The template for achieving this structure would resemble:

export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return <section>{children}</section>
}

Answer 16

The primary layout structure is determined at the highest level of the application directory and is applicable to all routes. A fundamental aspect of this layout revolves around the inclusion of html and body tags, enabling users to customize the original HTML content provided by the server.

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        {/* Designing the Layout */}
        <main>{children}</main>
      </body>
    </html>
  )
}

Moreover, layouts within the folder hierarchy are typically organized in a hierarchical fashion, signifying that they encapsulate child layouts through their children property. To establish nested layouts, simply insert a layout.js file within specific route segments (folders). The template for achieving this structure would resemble:

export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return <section>{children}</section>
}

Nextjs version 13 encountered hydration failure due to discrepancies between the initial UI and the server-rendered content

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Answer №8

Similar questions

Why does my console refuse to log the input entered for the search?

What is the best way to test a Redux dumb component that displays smart components?

Adding a Scrollbar to an Extensive Organizational Chart Made with react-d3-tree

JavaScript Asynchronous Functions Not Handling Await Calls Correctly

Describing a function in Typescript that takes an array of functions as input, and outputs an array containing the return types of each function

What is the best method to utilize a promise to delay the execution of a function until the data is received and stored

Trouble confirming the password field with regular expressions in angular.js

Storing a date in MySQL using Vue.js and Node.js

Issue with activating a Modal through a button inside a table row on React

Navigating CSV-derived JSON data in Flask and Javascript: Best Practices

Is there a way to retrieve all active HTTP connections on my Express.js server?

What is the best way to modify or revise meta fields for individual products in order to retrieve multiple images for each product in Shopify?

Performing AJAX in Rails4 to update boolean values remotely

Unable to get CSS transition to function properly after adding a class using jQuery

What is causing myInterval to not be cleared properly?

Divide text to reduce its width within the confines of a specific height on a div element

Load link dynamically using the rel attribute

What is the most effective method for importing .module.scss classes in a React project?

Is there a way to make this eval() function function properly in Internet Explorer?

"Have you ever wondered how the router object in express.js is seamlessly integrated with app.use(), considering that it only accepts