The Warning
You might get a similar warning to:
Warning: Extra attributes from the server: data-new-gr-c-s-check-loaded,data-gr-ext-installed,cz-shortcut-listen,data-lt-installed.
OR:
Causes
Before we start supressing warnings, let's understand what causes the warning. Hydration warnings occur when what was rendered on the server does not match was is rendered on the client (usually the browser). This can occur for many reasons, and sometimes it is unavoidable. One reason is because of a Browser Extension adding additional attributes to the HTML elements. This creates a mismatch between what was rendered on the server and what is rendered on the client. This is a case when you should ignore the error, becuase it is out of your control.
Here is a short list of extensions that can cause such warnings to appear:
- Grammarly
- ColorZilla
- LanguageTool
If you inspect the HTML in the Elements section of the devTools you will see the extra attributes that the extensions have added.
In the image above, there are attributes added and they are commonly abbreviated. In this example, lt represents attribtues for LanguageTool, gr for Grammarly and cz for ColorZilla.
Supress
You can supress the hydration warnings by setting supressHydrationWarning to true in the opening <html> tag of the RootLayout:
// file:layout.tsx
export default RootLayout({ children }) {
return (
<html lang="en" suppressHydrationWarning={true}>
<body>
{children}
</body>
</html>
)
}
supressHydrationWarning only works one level deep, so if you put it in the <html> element, it won't supress hydration warnings for the <body> element, since it is in a deeper level. This means that it won't supress hydration warnings for our server components which are in a deeper level. Note that supressHydrationWarning is intended to be an escape hatch - don't overuse it.