Server Components

React Server Components is a new feature in React that allows you to build components that render on the server and return UI to the client without hydration.

Client components are still server-rendered but hydrated on the client. Learn more about Server component patterns

Chakra UI components are client components because they rely on useState, useRef and useState which are not available in server components.

Usage

Here's an example of how to use Chakra UI components with React Server Components in Next.js

import { Heading } from "@chakra-ui/react"
import fs from "node:fs"

export default async function Page() {
  const content = fs.readFileSync("path/to/file.md", "utf-8")
  return <Heading as="h1">{content}</Heading>
}

Chakra Factory

When using the chakra() factory function, use the use client directive and move the component to a dedicated file.

"use client"

import { chakra } from "@chakra-ui/react"

export const BlogPost = chakra("div", {
  base: {
    color: "red",
  },
  variants: {
    primary: {
      true: { color: "blue" },
      false: { color: "green" },
    },
  },
})

Then import the component in your page server component

import { BlogPost } from "./blog-post"

export default async function Page() {
  const content = fs.readFileSync("path/to/file.md", "utf-8")
  return <BlogPost>{content}</BlogPost>
}

Hooks

When importing hooks from Chakra UI, use the use client directive

"use client"

import { useBreakpointValue } from "@chakra-ui/react"

export function MyComponent() {
  const value = useBreakpointValue({ base: "mobile", md: "desktop" })
  return <div>{value}</div>
}

Render Props

When using render props, use the use client directive

"use client"

import { ProgressContext } from "@chakra-ui/react"

export function MyComponent() {
  return <ProgressContext>{({ value }) => <div>{value}</div>}</ProgressContext>
}