Client Component props hydrate twice which cause props data to be empty at first in Nextjs 14

Question

I am having an issue where the data from fetch was pass to a client-side component.

    'use server';
    const Page = () => {
      const data = awaits fetch(dataUrl)
      if (!res.ok) {
           throw error
      }
      return (
          <>
            <Comp1 data={data}>  //server-side 
            <Comp2 data={data}>  //client-side
          </>
      )
    }

    'use client';
    const Comp2 = (data) => {
       console.log("data", data)
       const [hero, setHero] = useState('')

       useEffect(() => {
          if (data.hero) {
             setHero(`${data.hero} - hero`)
          }
       }, [data])
    
       return (
          <div>
              <h1>data.header</h1> // makes them empty 
              <DataHero hero={hero} /> // makes them empty since first data is empty but wont render again
          </div>
       )
    }

In terminal

    "data" undefined
    "data" data: {
        header: 'Tess'
        hero: 'Mordert'
    }

I tried the following but failed:

JSON.parse(JSON.stringify(data))
make it into server - serverWrapper - client component //props drilling
useState
useMemo
lazy loading - stuck up on loading and wont render anything.

The only thing work was make the client into server but I don't want this since there are still components custom hooks to be include in Comp2 in later requirements and also the results are reverse from console.log.

Result in console.log

    "data" data: {
        header: 'Tess'
        hero: 'Mordert'
    }
    "data" undefined

Hashan Hemachandra · Accepted Answer · 2025-08-13 02:32:28Z

The issue is your Comp2 accept a single argument, a props object.

const Comp2 = (data) => {

This receives the entire props object as data, not the data prop itself. The correct syntax need destructuring.

const Comp2 = ({data}) => {

When using (data) instead of ({data})

The parameter receives the entire props object: {data: {...}}
Attempting to access data.hero actually tries to access props.data.hero
Since prop doesn't have a direct hero property, it returns undefined

Also another thing is the use server directive at the top of is incorrect for a page component. Page are server components by default in Next.js App Router.

Also there is a typo awaits instead of await. Not sure whether it is caused by when you post the question here.

So the correct implementation would be (assuming it app router),

// app/page.jsx - Server Component (no 'use server' needed)
const Page = async () => {
  const res = await fetch(dataUrl)
  const data = await res.json()
  
  if (!res.ok) {
    throw new Error('Failed to fetch data')
  }
  
  return (
    <>
      <Comp1 data={data} />
      <Comp2 data={data} />
    </>
  )
}

// components/Comp2.jsx - Client Component
'use client'
import { useState, useEffect } from 'react'

const Comp2 = ({ data }) => {  // ← CRITICAL FIX: Destructure props properly
  console.log("data", data)
  const [hero, setHero] = useState('')
  
  useEffect(() => {
    if (data?.hero) {
      setHero(`${data.hero} - hero`)
    }
  }, [data])
  
  return (
    <div>
      <h1>{data?.header}</h1>
      <DataHero hero={hero} />
    </div>
  )
}

William · Accepted Answer · 2025-08-13 07:36:44Z

0

Destructure works.

Instead using inline, I tried to use the type instead so that I can destructure the props inside component not in props because this will make it long if I add another values.

answered Aug 13 at 7:36

William

1272 silver badges18 bronze badges

Collectives™ on Stack Overflow

Client Component props hydrate twice which cause props data to be empty at first in Nextjs 14

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related