React Server Components (RSC) - Flowbite

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).