9a5c8cebf0
Co-authored-by: Tim Neutkens <tim@timneutkens.nl> Co-authored-by: Steven <steven@ceriously.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
54 lines
1,012 B
Markdown
54 lines
1,012 B
Markdown
# 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
|
|
export default class Page extends React.Component {
|
|
render() {
|
|
return <p>Hello world</p>
|
|
}
|
|
}
|
|
```
|
|
|
|
##### After
|
|
|
|
```jsx
|
|
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
|
|
export default class Page extends React.Component {
|
|
render() {
|
|
return <p>Hello world</p>
|
|
}
|
|
}
|
|
```
|
|
|
|
##### After
|
|
|
|
```jsx
|
|
'use client'
|
|
export default class Page extends React.Component {
|
|
render() {
|
|
return <p>Hello world</p>
|
|
}
|
|
}
|
|
```
|
|
|
|
### Useful Links
|
|
|
|
[Server and Client Components](https://beta.nextjs.org/docs/rendering/server-and-client-components)
|