Passing data between React client and server components

GitHub link for the code for this blog post: https://github.com/prakash118/react-server-function

Let's investigate the relationship between Server and Client Components in React through a practical example: analyzing the requirements for the following feature request.

Requirements

1. Server-Side Data Fetching: Implement server-side data fetching for user information to enhance security and improve application performance.
2. User Data Filtering: Enable filtering of fetched user data based on search keywords and gender.
3. And the wireframe (not a designer)

To address the first requirement, let's implement a React Server-Side Component (RSC) responsible for fetching user data and rendering the initial user list. This can be achieved using the following code structure:

// Users component
`use server`;
import { Suspense } from 'react';
import { User } from '@/types/user';

async function UserImp() {
  const getAllUsers = async () => {
    const res = await fetch('http://localhost:3000/api/users');
    return await res.json();
  };
  const users = await getAllUsers();
  return (
    <ul>
      {users.map((user: User) => (
        <li key={user.id}>{user.first_name} {user.last_name}</li>
      ))}
    </ul>
  );
}

export default function Users() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <UserImp />
    </Suspense>
  );
}

To fulfill the second requirement, let's implement search and gender filtering capabilities. Typically, this would involve creating a container component that manages the filter state (search keywords and selected gender). This container component would then render the user data display component, passing down the filter values as props. This structure can be illustrated as follows:

// UsersContainer component
'use client';
import { useState } from 'react';
import Search from './search';
import Toggle from './toggle';
import Users from './users'; // Server component

export default function UsersContainer() {
  const [searchText, setSearchText] = useState('');
  const [genderFilter, setGenderFilter] = useState('Both');
  return (
    <div>
      <div>
        <Search searchText={searchText} handleSearch={setSearchText} />
        <Toggle genderFilter={genderFilter} handleToggle={setGenderFilter} />
      </div>
      {/* This will fail during build */}
      {/* as Users is a server component */}
      <Users /> 
    </div>
  );
}

#Issue 1

While the initial implementation might seem straightforward, the build process will fail with the error Error: × Server Actions must be async functions. To ensure accurate error reporting and facilitate debugging, I recommend installing the server-only npm package and use in all Server Components, like so import 'server-only'; at the top of the file. Although the build will still fail, the error message will be more informative and specific, unlike the error encountered previously. This will help us pinpoint the actual issue more effectively.

The core problem is the invalid nesting of a Server Component within a Client Component, as depicted in the following diagram.

The diagram demonstrates the allowed nesting patterns: Server Components can contain other Server Components or Client Components, and Client Components can contain other Client Components. Crucially, Client Components cannot contain Server Components. This limitation arises from their distinct rendering environments. Server Components execute on the server, while Client Components execute later in the browser. Consequently, client-side code within Client Components cannot directly access the server-side code of Server Components.

The solution lies in leveraging React's composition pattern. Server Components can be passed to Client Components either as children or via props. The rendering process involves the Server Component first rendering on the server. The resulting output (HTML, CSS, and any necessary JavaScript) is then passed to the Client Component, which React hydrates on the client-side to make the output interactive. Let's examine a practical example.

// UsersContainer component
'use client';
import ... // imports here

export default function UsersContainer({
  children,
}: {
  children: React.ReactNode;
}) {
  ... // states here
  return (
    <div>
      ... // other components
      {children} <-- Server component as a children
    </div>
  );
}

// Page component
import UsersContainer from './components/users-container';
import Users from './components/users';  // Server component

export default function Page() {
  return (
    <UsersContainer>
      <Users /> <-- Server component
    </UsersContainer>
  );
}

This addresses our initial issue. However, how do we pass data from the Client Component to the Server Component?

#Issue 2

As you might expect, passing data from the client to the server component isn't possible. This limitation stems from the same constraints described in the first issue.

This issue can be addressed by separating the server component into two parts: one for data fetching (remaining on the server) and another for data display (handled on the client). The following component tree visualizes this structure, using green for server components and orange for client components.

By utilizing the Context API, we can efficiently provide the necessary data to the leaf components. This grants them access to the required filter options, enabling the component to display the filtered user data. Furthermore, given our use of the composition pattern within the context provider component, let's refactor the preceding code accordingly.

filter-option-proide.tsx (Client component)

'use client';
import ... // imports

... // FilterOptionContextProps interface

const FilterOptionContext = createContext<FilterOptionContextProps | undefined>(
  undefined
);

export default function FilterOptionProvider({
  children,
}: {
  children: React.ReactNode;
}) {
  const [searchText, setSearchText] = useState('');
  const [gender, setGender] = useState<GenderOption>('Both');
  return (
    <FilterOptionContext.Provider
      value={{ searchText, setSearchText, gender, setGender }}
    >
      <div className="m-4">
        ... // other components
        {children}
      </div>
    </FilterOptionContext.Provider>
  );
}

export function useFilterOptionContext() {
  const context = useContext(FilterOptionContext);
  return context;
}

users.server.tsx (Server component)

import 'server-only';
import ... // imports

export default function UsersServer() {
  const getAllUsers = async () => {
    const res = await fetch('http://localhost:3000/api/users', {
      cache: 'force-cache',
    });
    return await res.json();
  };

  return (
    <ErrorBoundary fallback={<div>Error</div>}>
      <Suspense fallback={<div>Loading...</div>}>
        <UsersClient usersPromise={getAllUsers()} />
      </Suspense>
    </ErrorBoundary>
  );
}

users.client.tsx (Client component)

'use client';
import ... // imports

export function UsersClient({
  usersPromise,
}: {
  usersPromise: Promise<User[]>;
}) {
  const { searchText, gender } = useFilterOptionContext();
  const users = use(usersPromise);
  const filteredUsers = users.filter((user) => {
    const fullName = `${user.first_name} ${user.last_name}`.toLowerCase();
    return (
      (!searchText || fullName.includes(searchText.toLowerCase())) &&
      (gender === 'Both' || user.gender === gender)
    );
  });
  return (
    <div className="grid grid-cols-2 gap-2">
      {!filteredUsers.length ? (
          // No users found
      ) : (
        filteredUsers.map((user) => (
          <div key={user.id}>
            // user's name
          </div>
        ))
      )}
    </div>
  );
}

server-client.tsx (Server component)

...
    <FilterOptionProvider>
      <UsersServer />
    </FilterOptionProvider>
...

This sequential rendering, often termed "waterfall rendering," occurs because the client component responsible for displaying user data must wait for the data to be fetched before it can render. In larger applications, this approach can create performance bottlenecks. However, the use of Suspense allows us to display a fallback UI while the data is being retrieved, improving the user experience during the loading period.

With both issues resolved and the filters functioning as required, let's explore an alternative approach using Server Functions (formerly known as Server Actions).

Server Functions (aka Actions)

Server Functions are functions executed on the server, residing either within a Server Component or as standalone entities. They offer a powerful way to manage data fetching, protect sensitive information like API keys, and simplify codebase. Because they operate exclusively on the server, they must be marked with the 'use server' directive. While defined on the server, Server Functions can be invoked from Client Components. Crucially, these functions are asynchronous, requiring the use of async/await. Furthermore, data exchanged with Server Functions must be serializable (e.g., primitives, objects, and arrays). For more information on Server Functions check the React docs. Let's examine an example.

server-func/actions.ts (Server function)

'use server'; // important
import users from '@/app/api/users/users-data.json';
import ...

export const getAllUsers = async ({
  searchText,
  gender,
}: {
  searchText: string;
  gender: GenderOption;
}) => {
  const filteredUsers = (users as User[]).filter((user) => {
    const fullName = `${user.first_name} ${user.last_name}`.toLowerCase();
    return (
      (!searchText || fullName.includes(searchText.toLowerCase())) &&
      (gender === 'Both' || user.gender === gender)
    );
  });
  return filteredUsers;
};

server-func/users.tsx (Client component)

'use client';
import ... // imports

export default function Users() {
  const { searchText, gender } = useFilterOptionContext();
  const [users, setUsers] = useState<User[] | undefined>(undefined);
  const [isPending, startTransition] = useTransition();

  useEffect(() => {
    startTransition(async () => {
      const data = await getAllUsers({ searchText, gender }); <-- Server Function
      setUsers(data);
    });
  }, []);

  return (
    <div className="grid grid-cols-2 gap-2">
      {isPending ? (
        // Loading.. 
      ) : users.length === 0 ? (
        // No users found
      ) : (
        users.map((user) => (
          <div key={user.id}>
            // user's name
          </div>
        ))
      )}
    </div> 
  );
}

server-func/server-func.tsx (Client component)

...
    <FilterOptionProvider>
      <Users />
    </FilterOptionProvider>
...

Leveraging our existing Context API implementation, the code above reuses this setup. The Server Function is responsible for data fetching, and it can also perform database operations directly on the server. In the Client Component, this Server Function is invoked upon component mount.

This is a basic implementation of Server Functions moving the filtering logic to server, particularly effective when integrated with form interactions. They work especially well in conjunction with hooks like useFormStatus or useTransition.

Conclusion

Server Functions, a relatively recent addition to React, provide compelling advantages for modern React development. These include enhanced security, improved performance, simplified Client Components, access to server resources, and an improved developer experience. However, there are some key considerations. Data must be serializable (JSON-parsable), debugging can be more complex, and server-side errors require graceful handling and feedback to the client.

Below is a screenshot demonstrating the application's appearance with each approach.