Static Pages

Blending server components and client components

Open Live Example

Full Example Source

It's easy to mix and match server and client components with RSC and next.js. Although many components can be partially or entirely rendered on the server, there are those that need to run inside the context of a browser - for example anything using the microphone, measuring window sizes or providing custom user interactions.

In this example, we have a server-rendered Page, with child component that has to

page.tsx
import MicrophoneList from './microphonelist'

export default async function Page() {
  return (
    <div>
      <h1>Blending server and client components</h1>
      <h2>Server-rendered</h2>
      <p>This section was rendered as a server component</p>
      <MicrophoneList />
    </div>
  )
}

Here's our <MicrophoneList /> child component, which will run as a client component because of the 'use client' directive. It just finds all of the microphones attached to your browser and lists them, to show that it is indeed running in the browser:

microphonelist.tsx
'use client'

import { useEffect, useState } from 'react'
import { getMicrophones } from './utils'

export default function MicrophoneList() {
  const [microphones, setMicrophones] = useState([] as MediaDeviceInfo[])

  useEffect(() => {
    const fetchMicrophones = async () => {
      setMicrophones(await getMicrophones())
    }
    fetchMicrophones()
  }, [])

  return (
    <div>
      <h1>Available Microphones</h1>
      <p>
        This component is marked `use client`, because it needs to run in the
        browser to access the mediaDevices API.
      </p>
      <ul>
        {microphones.map((mic, index) => (
          <li key={index}>{mic.label || `Microphone ${index + 1}`}</li>
        ))}
      </ul>
    </div>
  )
}

Live Demo

This example can't be easily inlined as it demonstrates how a full-page feels to the end user. Here it is inside an iframe, and there's a looping video below too.

Click here to test it out yourself

This is an iframe pointing to /examples/static-pages/server-client

Video Preview

In case the iframe doesn't work for some reason, this is a looping video of what you would see. Click the video to open the full page example in a new tab.

Similar Examples

Previous
All server-side components
Next
async page, no suspense