---
title: "React Server Components"
canonical: https://sky-ui.cf.sky.com/guides/react-server-components
apiPackages: [{"name":"@sky-uk/ui-core","representedVersion":"13.2.0"}]
---

# React Server Components

## React Server Components

React Server Components (RSC) are a type of component that renders ahead of time, before bundling, in an environment separate from your client app or SSR server. This separate environment can be a build-time process (when you deploy) or a web server (on every request).

In frameworks that support RSC (like Next.js), components are server components by default. To use client-side features like hooks or browser APIs, you must explicitly mark a component with the `'use client'` directive.

**Note:** For more detailed information about React Server Components, see the [official React documentation](https://react.dev/reference/rsc/server-components).

## Next.js App Router Support

If you're using Next.js with the App Router, you can now use React Server Components with Sky UI. Components that are RSC-compatible can be imported and used directly in your server components without the `'use client'` directive.

## Benefits of Server Components

Running components on the server provides several advantages:

- **Reduced bundle size**: Server components don't ship JavaScript to the client, resulting in smaller bundle sizes and faster page loads
- **Improved performance**: Heavy rendering work happens on the server, reducing the workload on client devices
- **Automatic code splitting**: Server components are naturally code-split, only sending the necessary client-side JavaScript

**Note:** To use React Server Components with Sky UI, you need `styled-components` version `6.4.0` or higher installed in your project.

## RSC-Compatible Components

The following Sky UI components are compatible with React Server Components:

| Component |  |  |
| --- | --- | --- |
| Box | Button | Card |
| CheckboxIndicator | Container | Flex |
| GlobalReset | Grid | Highlight |
| Icon | IconButton | Image |
| Info Card | Link | Markdown |
| Scrim | Signpost | Tag |
| Text | VisuallyHiddenText |  |

### Using RSC-Compatible Components

RSC-compatible components can be used directly in server components:

```tsx
import { InfoCard, Icon } from '@sky-uk/ui-core';

export default function Page() {
  return (
    <>
      <Icon name="star" />
      <InfoCard>
        <InfoCard.Heading>Server-rendered card</InfoCard.Heading>
        <InfoCard.Description>This renders on the server!</InfoCard.Description>
      </InfoCard>
    </>
  );
}
```

## Building Custom RSC-Compatible Components

If you're composing custom components that need responsive behaviour while remaining RSC-compatible, see the [Responsive CSS utility](/core/utilities/responsive-css) which provides a CSS-based approach to handling different screen sizes without requiring client-side JavaScript.