vercel__next.js/errors/class-component-in-server-component.mdx

---
title: React Class component rendered in a Server Component
---

## Why This Error Occurred

You are rendering a React Class Component in a Server Component, `React.Component` and `React.PureComponent` only works in Client Components.

## Possible Ways to Fix It

Use a Function Component.

### Before

```jsx filename="app/page.js"
export default class Page extends React.Component {
  render() {
    return <p>Hello world</p>
  }
}
```

### After

```jsx filename="app/page.js"
export default function Page() {
  return <p>Hello world</p>
}
```

Mark the component rendering the React Class Component as a Client Component by adding `'use client'` at the top of the file.

### Before

```jsx filename="app/page.js"
export default class Page extends React.Component {
  render() {
    return <p>Hello world</p>
  }
}
```

### After

```jsx filename="app/page.js"
'use client'

export default class Page extends React.Component {
  render() {
    return <p>Hello world</p>
  }
}
```

## Useful Links

- [Server Components](/docs/app/getting-started/server-and-client-components)