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

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

After

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

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

After

'use client'

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

Useful Links

• Server Components