Server Components
Server Components
# React Server Components
Server Components allow you to write UI that can be rendered and optionally cached on the server. In Next.js, the rendering work is further split by route segments to enable streaming and partial rendering.
**By default, all components in the App Router are Server Components.** This allows you to automatically adopt server rendering with no extra configuration, and you can seamlessly opt-in to Client Components when needed.
## Why Server Components?
- **Data Fetching:** Server Components allow you to move data fetching to the server, closer to your database.
- **Security:** You can keep sensitive data and logic on the server, such as tokens and API keys.
- **Performance:** Server Components keep large dependencies on the server, reducing the client-side JavaScript bundle size.
To use a Client Component (which can use `useState` and `onClick`), you simply add the `"use client"` directive at the top of the file.
Server Components allow you to write UI that can be rendered and optionally cached on the server. In Next.js, the rendering work is further split by route segments to enable streaming and partial rendering.
**By default, all components in the App Router are Server Components.** This allows you to automatically adopt server rendering with no extra configuration, and you can seamlessly opt-in to Client Components when needed.
## Why Server Components?
- **Data Fetching:** Server Components allow you to move data fetching to the server, closer to your database.
- **Security:** You can keep sensitive data and logic on the server, such as tokens and API keys.
- **Performance:** Server Components keep large dependencies on the server, reducing the client-side JavaScript bundle size.
To use a Client Component (which can use `useState` and `onClick`), you simply add the `"use client"` directive at the top of the file.