# HP1005: Attribute only present in the server HTML

> HP1005 (extra attribute): the server HTML has an attribute React does not render on the client, so it stays on the page. What causes it and how to fix it.

Source: https://hydration.jscrate.dev/docs/issues/hp1005
Last updated: 2026-09-18

HP1005 (`extra-attribute`) means the server HTML has an attribute that React
does not render on the client. React leaves it in place during hydration, so
the element keeps an attribute your client code never set. Remove the attribute
from the server output, or render it on the client too.

| | |
| --- | --- |
| Code | `HP1005` |
| Name | `extra-attribute` |
| Default severity | Warning |
| Group | DOM mismatches |
| What it means | The server HTML has an attribute that React does not render on the client. |

## What HP1005 (`extra-attribute`) means

The element exists on both sides, but one attribute is only in the server's
version. That usually means the component rendered it under a condition that is
true on the server and false in the browser.

hydration-proof compares the attributes of every element React reused with the
props React renders. For attributes present only in the server HTML, it checks
`data-*`, `aria-*`, `id`, `role`,
`title`, `alt`, `lang`, `dir`, `href`, `src`, `tabindex`, `for`, `name` and
`type`. An extra `class` or `style` is reported as
[HP1004](https://hydration.jscrate.dev/docs/issues/hp1004) or [HP1003](https://hydration.jscrate.dev/docs/issues/hp1003).

An attribute a browser extension or another script adds before hydration was
never in the server's response, so it is reported as a change outside React
([HP4001](https://hydration.jscrate.dev/docs/issues/hp4001) or [HP4002](https://hydration.jscrate.dev/docs/issues/hp4002)), not as
HP1005.

## The React error it matches

React 18 warns about it in development:

```text
Warning: Extra attributes from the server: data-rendered-on
```

See [Extra attributes from the server](https://hydration.jscrate.dev/docs/errors/extra-attributes-from-the-server)
for what the warning means. React 19 reports attribute
differences with
[a tree hydrated but some attributes didn't match](https://hydration.jscrate.dev/docs/errors/tree-hydrated-but-attributes-didnt-match),
in development only.

## Likely causes

- A server-only branch, such as `typeof window === "undefined"`, that adds the
  attribute: a [browser-only API](https://hydration.jscrate.dev/docs/causes/browser-api) check.
- A value that is set on the server and `undefined` in the browser, from
  [browser storage](https://hydration.jscrate.dev/docs/causes/storage) or
  [different data](https://hydration.jscrate.dev/docs/causes/data).
- A [generated id](https://hydration.jscrate.dev/docs/causes/unstable-id) that exists only in the server
  render.

## How to fix it

- Remove the attribute from the server output or render it on the client too.

```tsx title="hero.tsx"
"use client";

export function Hero() {
  const isServer = typeof window === "undefined";

  return (
    <section id="hero" data-rendered-on={isServer ? "server" : undefined}>
      Welcome
    </section>
  );
}
```

Render the same attributes in both places. If the value is only known in the
browser, set it after mount:

```tsx title="hero.tsx"
export function Hero() {
  return <section id="hero">Welcome</section>;
}
```

## Prevent it with ESLint

[`no-window-render-branch`](https://hydration.jscrate.dev/docs/rules/no-window-render-branch) reports
components that render something different on the server and in the browser.

## When the difference is intentional

If a server or middleware adds an attribute on purpose, list it in
`ignore.attributes` so it is never compared, or add an `ignore.issues` rule
with `code: "HP1005"` and a reason. See [ignoring findings](https://hydration.jscrate.dev/docs/ignoring).

## Example

```text
  ⚠ /about 740ms  1 warning
    HP1005 Attribute only present in the server HTML  (browser-only api used during render, 58%)
      #hero  in Hero
      attribute: data-rendered-on
      server: "server"
      client: (absent)
      components/hero.tsx:7:5
      → Code like `typeof window !== "undefined"` or window/navigator/document access renders differently on the server. Read browser values in useEffect, or render the component on the client only.
```

## Related

- [HP1006: attribute missing from the server HTML](https://hydration.jscrate.dev/docs/issues/hp1006)
- [HP1002: attribute differs](https://hydration.jscrate.dev/docs/issues/hp1002)
- [Extra attributes from the server](https://hydration.jscrate.dev/docs/errors/extra-attributes-from-the-server)
- [Browser extensions and hydration](https://hydration.jscrate.dev/docs/causes/extension)