mirror of
https://github.com/vercel/next.js.git
synced 2026-09-20 02:25:18 +08:00
9c757f6d5c
Closes: - https://linear.app/vercel/issue/DOC-4655/client-components - https://linear.app/vercel/issue/DOC-4656/server-components - https://linear.app/vercel/issue/DOC-4657/composition-patterns Redirects: https://github.com/vercel/front/pull/45564 This PR: - Adds new **Server and Client Components** page to **Getting Started** - Explains how Server and Client components are rendered - Clarifies when to use them - Reviews and simplifies composition patterns (examples) - Improves the **How does PPR work** section in light of static, dynamic, and streaming.
44 lines
798 B
Plaintext
44 lines
798 B
Plaintext
---
|
|
title: React client hook in Server Component
|
|
---
|
|
|
|
## Why This Error Occurred
|
|
|
|
You are using a React client hook in a Server Component.
|
|
|
|
## Possible Ways to Fix It
|
|
|
|
Mark the component using the hook as a Client Component by adding `'use client'` at the top of the file.
|
|
|
|
### Before
|
|
|
|
```jsx filename="app/example.js"
|
|
import { useEffect } from 'react'
|
|
|
|
export default function Example() {
|
|
useEffect(() => {
|
|
console.log('in useEffect')
|
|
})
|
|
return <p>Hello world</p>
|
|
}
|
|
```
|
|
|
|
### After
|
|
|
|
```jsx filename="app/example.js"
|
|
'use client'
|
|
|
|
import { useEffect } from 'react'
|
|
|
|
export default function Example() {
|
|
useEffect(() => {
|
|
console.log('in useEffect')
|
|
})
|
|
return <p>Hello world</p>
|
|
}
|
|
```
|
|
|
|
## Useful Links
|
|
|
|
- [Server Components](/docs/app/getting-started/server-and-client-components)
|