Tips for rendering a server-side component within a client-side component in a React 18 - Next.js 14 application router

Question

Tips for rendering a server-side component within a client-side component in a React 18 - Next.js 14 application router

As outlined in this RFC:

Server Components or call server hooks/utilities cannot be imported by Client Components, as they are specific to server functionality.

Currently, I am developing a project using react v18.2 and nextjs v14 with app router integration.

The page I am currently working on is focused primarily on client-side features:

https://i.stack.imgur.com/ctR6M.png

This page serves as a client component due to its reliance on various client-side functionalities for form interactions utilizing the React useState() hook.

Below is an excerpt of the actual code from the page.tsx file, showcasing a sizable component that utilizes the JoyUI components library (built on MUI).

Key attention should be given to the very first line of the code where I have employed the "use client" directive, indicating that this component (NewModeratorPage) heavily relies on client-side features.
Another crucial aspect to note is the use of the <SelectCompany /> component within the return block of the <NewModeratorPage /> component:

'use client'

import React from 'react'
// Components imports

const NewModeratorPage = () => {
  // Component logic
  
}

export default NewModeratorPage

<SelectCompany /> functions as a server component, rendering a <Select> element populated with options fetched from an external API.

Hence, the <SelectCompany /> component is involved in data fetching operations, suggesting that it is better suited as a server component.

Upon user request, the page is delivered with the pre-fetched form and <SelectCompany/> content, eliminating any loading delays related to client-side data retrieval.

To indicate that this component is a server component, the "use server" directive is used.

Here's an overview of the <SelectCompany /> server component code snippet:

"use server"

import React, { PropsWithChildren } from 'react'
// Component imports

const SelectCompany = async ({ children, ...props }: SelectCompanyProps) => {
  // Data fetching operation
  
}

export default SelectCompany

I encountered the following browser error:

Error: async/await is not yet supported in Client Components, only Server Components. This error is often caused by accidentally adding `'use client'` to a module that was originally written for the server.

In addition, in my Linux terminal, I received the following error message:

Internal error: Error: Server Functions cannot be called during initial render. This would create a fetch waterfall. Try to use a Server Component to pass data to Client Components instead.

The root cause of these errors appears to be the restriction on client components importing server components,

So what is the solution to my case? I want <SelectCompanies /> to function as a server component.

reactjs next.js next.js13

Answer 1

Answer №1

In the documentation of Next.js, there are both supported and unsupported patterns discussed.

Unsupported Approach:

'use client'
 
// You cannot import a Server Component into a Client Component.
import ServerComponent from './Server-Component'
 
export default function ClientComponent({
  children,
}: {
  children: React.ReactNode
}) {
  const [count, setCount] = useState(0)
 
  return (
    <>
      <button onClick={() => setCount(count + 1)}>{count}</button>
 
      <ServerComponent />
    </>
  )
}

An alternative approach would be to pass the server component as a child element like this:

Supported Approach:

'use client'
 
import { useState } from 'react'
 
export default function ClientComponent({
  children,
}: {
  children: React.ReactNode
}) {
  const [count, setCount] = useState(0)
 
  return (
    <>
      <button onClick={() => setCount(count + 1)}>{count}</button>
      {children}
    </>
  )
}

// This pattern works:
// You can pass a Server Component as a child or prop of a
// Client Component.
import ClientComponent from './client-component'
import ServerComponent from './server-component'
 
// Pages in Next.js are Server Components by default
export default function Page() {
  return (
    <ClientComponent>
      <ServerComponent />
    </ClientComponent>
  )
}

By including them as children, we have full visibility of all server components and can effectively render or stream them.

Answer 2

In the documentation of Next.js, there are both supported and unsupported patterns discussed.

Unsupported Approach:

'use client'
 
// You cannot import a Server Component into a Client Component.
import ServerComponent from './Server-Component'
 
export default function ClientComponent({
  children,
}: {
  children: React.ReactNode
}) {
  const [count, setCount] = useState(0)
 
  return (
    <>
      <button onClick={() => setCount(count + 1)}>{count}</button>
 
      <ServerComponent />
    </>
  )
}

An alternative approach would be to pass the server component as a child element like this:

Supported Approach:

'use client'
 
import { useState } from 'react'
 
export default function ClientComponent({
  children,
}: {
  children: React.ReactNode
}) {
  const [count, setCount] = useState(0)
 
  return (
    <>
      <button onClick={() => setCount(count + 1)}>{count}</button>
      {children}
    </>
  )
}

// This pattern works:
// You can pass a Server Component as a child or prop of a
// Client Component.
import ClientComponent from './client-component'
import ServerComponent from './server-component'
 
// Pages in Next.js are Server Components by default
export default function Page() {
  return (
    <ClientComponent>
      <ServerComponent />
    </ClientComponent>
  )
}

By including them as children, we have full visibility of all server components and can effectively render or stream them.

Tips for rendering a server-side component within a client-side component in a React 18 - Next.js 14 application router

Answer №1

Unsupported Approach:

Supported Approach:

Similar questions

"Disabling checkbox selection for DataGrid cells/fields in React Material UI - A Step-by-Step

What is the method for displaying data from a JSON file that is associated with the wallet address of the authenticated user in next.js?

Updating nested data in Prisma - a comprehensive guide

React-hook-form being problematic: Radio button passing null value when selecting female option

Tips for resolving the npm ResourceUnavailable issue

Can I fetch the visible rows (along with their order) from a React Material-table?

Is it possible to access Next.js API endpoints from another application?

Guide: Implementing material-ui theme with redux in gatsby

Is it possible for Angular's `HttpClient` to use complex property types in the `.get()` generics aside from just `string` or `number`?

During the prerendering process of the /write page in Next.js, a ReferenceError is thrown stating that the

The dynamic duo of NextJS and react-query

I am facing difficulties in adding dynamic content to my JSON file

MUI CSS: Mastering image manipulation

The issue of focus being lost with HOC and Formik

Displaying an array value instead of a new value list in a React component

Starting a React app within a Laravel project can be a seamless process when following

The upcoming developer manages to execute the program successfully, however, it continues to load indefinitely

The npm postinstall script will only execute if no packages are currently being installed

Error encountered while trying to install eslint-plugin-react with an incompatible engine

Discovering the status of a wrapped component using Jest