Next.js Discord

Discord Forum

Best Practices for Conditional Rendering with Button Click in Mixed Server and Client Components in

Answered
Miniature Schnauzer posted this in #help-forum
Open in Discord
Miniature SchnauzerOP
I am working on a Next.js 14 project and facing a challenge with implementing conditional rendering. My setup includes a server component that contains both server and client child components. Specifically, I have a client component, AddIngreso, which contains a button. Upon clicking this button, I want to trigger conditional rendering to display other components.

The challenge I'm facing is the limitation that having a server component as the parent doesn't allow me to use hooks like useState for managing state changes triggered by the client component. I'm seeking advice on the best way to handle this scenario. Is there a recommended approach in Next.js for managing interactions and state changes between server and client components, especially when the parent component is a server component? Should I use custom events or a different pattern?

I'm looking for insights or best practices for achieving this kind of conditional rendering with a button click in a client component within a server component context in Next.js 14. Any advice or suggestions would be greatly appreciated. Thanks in advance!


Here's the structure of my JSX code:

const AñadirIngresoYFuente = () => {
  return (
    <div className="">
      {/* First Column */}
      <div className="">
        <h1 className="">
          Administrar nuevos ingresos
        </h1>
        <div className="overflow-y-auto">
          <TablaIngresos maxRows={5} />
        </div>
        <AddIngreso />
      </div>
      {/* Divider */}
      <div className=""></div>
      {/* Second Column */}
      <div className="">
        <h1 className="text-2xl font-semibold text-white text-center">
          Administrar fuentes de ingreso
        </h1>
        <div className="overflow-y-auto">
          <FrequentIngresostabla maxRows={5} />
        </div>
        <AddFrequentIngreso />
      </div>
    </div>
  );
};

export default AñadirIngresoYFuente;
Answered by aardani
The challenge I'm facing is the limitation that having a server component as the parent doesn't allow me to use hooks like useState for managing state changes triggered by the client component. I'm seeking advice on the best way to handle this scenario. Is there a recommended approach in Next.js for managing interactions and state changes between server and client components, especially when the parent component is a server component? Should I use custom events or a different pattern?



Just like how you do it in normal react, but a bit differently
export default function Page(){
  return (
    <>
      <TabsRoot> <- Client Component, 
                  - Creates Context,
                  - Distributes setters and getters
                  - to switch components
        <TabContent value={1}> <- Client Component
                                - consumes the context
                                - display if tab value is 1
                                - else, not
          <Content /> <- Server Component
          <Button /> <- consumes context
                      - retrieve getter,
                      - onclick, setCurrent(2)
        </TabContent>

        <TabContent value={2}>
          <AnotherContent /> <- Server Component
          <Button /> <- consumes context
                      - retrieve getter,
                      - onclick, setCurrent(1)
        </TabContent>
        
        <MiscContent /> <- Server Component if needed

      </TabsRoot>

      <MiscContent /> <- Server Component if needed
    </>
  )
}
View full answer

16 Replies

aardani
The challenge I'm facing is the limitation that having a server component as the parent doesn't allow me to use hooks like useState for managing state changes triggered by the client component. I'm seeking advice on the best way to handle this scenario. Is there a recommended approach in Next.js for managing interactions and state changes between server and client components, especially when the parent component is a server component? Should I use custom events or a different pattern?



Just like how you do it in normal react, but a bit differently
export default function Page(){
  return (
    <>
      <TabsRoot> <- Client Component, 
                  - Creates Context,
                  - Distributes setters and getters
                  - to switch components
        <TabContent value={1}> <- Client Component
                                - consumes the context
                                - display if tab value is 1
                                - else, not
          <Content /> <- Server Component
          <Button /> <- consumes context
                      - retrieve getter,
                      - onclick, setCurrent(2)
        </TabContent>

        <TabContent value={2}>
          <AnotherContent /> <- Server Component
          <Button /> <- consumes context
                      - retrieve getter,
                      - onclick, setCurrent(1)
        </TabContent>
        
        <MiscContent /> <- Server Component if needed

      </TabsRoot>

      <MiscContent /> <- Server Component if needed
    </>
  )
}
Answer
@aardani > The challenge I'm facing is the limitation that having a server component as the parent doesn't allow me to use hooks like useState for managing state changes triggered by the client component. I'm seeking advice on the best way to handle this scenario. Is there a recommended approach in Next.js for managing interactions and state changes between server and client components, especially when the parent component is a server component? Should I use custom events or a different pattern? Just like how you do it in normal react, but a bit differently tsx export default function Page(){ return ( <> <TabsRoot> <- Client Component, - Creates Context, - Distributes setters and getters - to switch components <TabContent value={1}> <- Client Component - consumes the context - display if tab value is 1 - else, not <Content /> <- Server Component <Button /> <- consumes context - retrieve getter, - onclick, setCurrent(2) </TabContent> <TabContent value={2}> <AnotherContent /> <- Server Component <Button /> <- consumes context - retrieve getter, - onclick, setCurrent(1) </TabContent> <MiscContent /> <- Server Component if needed </TabsRoot> <MiscContent /> <- Server Component if needed </> ) }
Miniature SchnauzerOP
Hello, thank you for your earlier suggestion on implementing a context-based approach in a Next.js application. I've tried to apply your advice by creating a context in a client component and distributing setters and getters to manage the visibility of other components. However, I've hit a snag with the useIngresoContext function, which isn't being recognized as a function in my setup.

Here's a quick summary of my implementation:

1. Created a IngresoProvider (Client Component) to hold the context.
2. Defined useIngresoContext to access the context values.
3. Attempted to use useIngresoContext in a page within IngresoProvider to conditionally render a component based on a button click in another client component.

Despite following these steps, I'm encountering an error stating useIngresoContext is not a function. I'm hoping you might have some insights on what could be causing this issue. Specifically, is there a particular approach I should be following to handle context in Next.js when combining server and client components, especially considering the context is created in a client component but needs to be accessed in a server component? Your guidance or any further clarification would be greatly appreciated.
Usage in Page(paginaIngresos.tsx):
import { IngresoProvider, useIngresoContext } from "../components/ComponentesIngreso/IngresoContext";

export default function paginaIngresos() {
  const { showAddFrequentIngreso } = useIngresoContext();

  return (
    <IngresoProvider>
      {/* JSX structure */}
      {showAddFrequentIngreso && <AñadirIngresoYFuente />}
    </IngresoProvider>
  );
}
@Miniature Schnauzer Hello, thank you for your earlier suggestion on implementing a context-based approach in a Next.js application. I've tried to apply your advice by creating a context in a client component and distributing setters and getters to manage the visibility of other components. However, I've hit a snag with the `useIngresoContext` function, which isn't being recognized as a function in my setup. Here's a quick summary of my implementation: 1. Created a `IngresoProvider` (Client Component) to hold the context. 2. Defined `useIngresoContext` to access the context values. 3. Attempted to use `useIngresoContext` in a page within `IngresoProvider` to conditionally render a component based on a button click in another client component. Despite following these steps, I'm encountering an error stating `useIngresoContext` is not a function. I'm hoping you might have some insights on what could be causing this issue. Specifically, is there a particular approach I should be following to handle context in Next.js when combining server and client components, especially considering the context is created in a client component but needs to be accessed in a server component? Your guidance or any further clarification would be greatly appreciated.
Miniature SchnauzerOP
Context Definition (IngresoContext.tsx):
"use client"
import React, { createContext, useState, useContext, ReactNode } from 'react';

interface IngresoContextValue {
  showAddFrequentIngreso: boolean;
  setShowAddFrequentIngreso: (show: boolean) => void;
}

const IngresoContext = createContext<IngresoContextValue | undefined>(undefined);

export const useIngresoContext = () => {
  const context = useContext(IngresoContext);
  if (context === undefined) {
    throw new Error('useIngresoContext must be used within an IngresoProvider');
  }
  return context;
};

interface IngresoProviderProps {
  children: ReactNode;
}

export const IngresoProvider: React.FC<IngresoProviderProps> = ({ children }) => {
  const [showAddFrequentIngreso, setShowAddFrequentIngreso] = useState(false);

  return (
    <IngresoContext.Provider value={{ showAddFrequentIngreso, setShowAddFrequentIngreso }}>
      {children}
    </IngresoContext.Provider>
  );
};
also
that doesn't look like what i suggested to you
Attempted to use useIngresoContext in a page within IngresoProvider to conditionally render a component based on a button click in another client component.

You use this function inside a component (that is wrapped with the Provider, the child of the provider) to retrieve data of the data as well as the setter function of the data (to change stuff).

You use useIngresoContext inside the button, and inside the <TabContent>
the conditional rendering happens inside the <TabContent> not in the server
@aardani > The challenge I'm facing is the limitation that having a server component as the parent doesn't allow me to use hooks like useState for managing state changes triggered by the client component. I'm seeking advice on the best way to handle this scenario. Is there a recommended approach in Next.js for managing interactions and state changes between server and client components, especially when the parent component is a server component? Should I use custom events or a different pattern? Just like how you do it in normal react, but a bit differently tsx export default function Page(){ return ( <> <TabsRoot> <- Client Component, - Creates Context, - Distributes setters and getters - to switch components <TabContent value={1}> <- Client Component - consumes the context - display if tab value is 1 - else, not <Content /> <- Server Component <Button /> <- consumes context - retrieve getter, - onclick, setCurrent(2) </TabContent> <TabContent value={2}> <AnotherContent /> <- Server Component <Button /> <- consumes context - retrieve getter, - onclick, setCurrent(1) </TabContent> <MiscContent /> <- Server Component if needed </TabsRoot> <MiscContent /> <- Server Component if needed </> ) }
aardani
therefore by this setup, in principle, you should render all components needed in the server,
then let the client decide which to render.

if you are doing conditional rendering in page.js, you are selectively choosing which to produce from the server. Which wont work in the client
https://www.radix-ui.com/primitives/docs/components/tabs take a look at the pattern used in this component
(or you could just use that lib instead 😭 )
Miniature SchnauzerOP
Thank you so much for the help, i am gonna re-read your original answer and these follow up help and see if i can fix it/solve the problem now that i understand a little bit better useContext :D
@aardani therefore by this setup, in principle, you should render all components needed in the server, then let the client decide which to render. if you are doing conditional rendering in page.js, you are selectively choosing which to produce from the server. Which wont work in the client
Miniature SchnauzerOP
Hi! I wanted to let you know that I successfully fixed the issue, thanks to your guidance! Before your help, I was under the impression that a client component couldn't have server components as children in any capacity. However, your insights clarified that it's indeed possible to pass server components as props within a client component. This realization has been pivotal in resolving my challenge. I truly appreciate your assistance and patience in helping me understand this crucial aspect of Next.js. Thank you!
You are evolving