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.

For more detailed information about React Server Components, see the official React documentation.

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

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:

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 which provides a CSS-based approach to handling different screen sizes without requiring client-side JavaScript.