React Server Components (RSC) - Flowbite

Learn how to use Flowbite React components inside React Server Components

React Server Components individually fetch data and render entirely on the server, and the resulting HTML is streamed into the client-side React component tree.

RSCs can help reduce the size of the client-side JavaScript bundle and improve loading performance.

Usage#

Without 'use client' directive:

import { Button } from 'flowbite-react';

function Component() {
  return <Button>Default</Button>;
}

With 'use client' directive:

'use client';

import { Button } from 'flowbite-react';

function Component() {
  return <Button onClick={() => console.log('clicked!')}>Default</Button>;
}

Incorrect: without 'use client' directive and user event passed as prop (onClick) resulting in error:

// errors

import { Button } from 'flowbite-react';

function Component() {
  return <Button onClick={() => console.log('clicked!')}>Default</Button>;
}

Compound components#

Compound components DO NOT work in React Server Components, therefore each component must be specifically imported as such:

Incorrect usage:

// errors

import { Button } from 'flowbite-react';

function Component() {
  return (
    <Button.Group>
      <Button color="gray">Profile</Button>
      <Button color="gray">Settings</Button>
      <Button color="gray">Messages</Button>
    </Button.Group>
  );
}

Correct usage:

// works

import { Button, ButtonGroup } from 'flowbite-react';

function Component() {
  return (
    <ButtonGroup>
      <Button color="gray">Profile</Button>
      <Button color="gray">Settings</Button>
      <Button color="gray">Messages</Button>
    </ButtonGroup>
  );
}

Support#

All Flowbite React components are server-ready, meaning they can be rendered inside React Server Components without the need of 'use client' directive at the top of the file.

Here's a list of all Flowbite React components that are fully rendered on the server:

Alert, Avatar, Badge, Banner, Blockquote, Breadcrumb, Button, Card, Checkbox, File input, Floating Label, Footer, Helper text, Kbd, Label, List, List Group, Progress, Radio, Range slider, Select, Spinner, Textarea, Text input, Tooltip.

Notes#

User event props (such as onClick, onBlur, ...etc) DO NOT work in React Server Components.

To pass any user events to a Flowbite React component (such as onClick, onBlur) the parent component must have the 'use client' directive.

Only serializable data can be passed to a server component as props (eg: functions will not work).