Im new to NextJS 14 and would kindly ask anybody who would know how to add to a list after fetching from a server component. Basically I wish to add additional items to the current list. Already I have a client component that has “use client” and has the props parsed down from the server component which calls from mongo db. But I have no idea what best practice is to update the list on the client component. I have tried the following using the props and a seperate state using setState. Although it works, to me it looks like a hack. (jobs is the initial data parsed prop from the server.) I wish to keep the initial render for SEO reasons and speed)

// server comp

  const jobResults = await getPagedJobsData(query) 

  return (
      <HomePage data={jobResults}/>
  )
 }



// HomePage client component

 const Home = ({data}) => {

  const {jobs} = data

  //const jobs = []

  const [initialRender, setInitialRender] = useState(false)
  const [jobData, setJobData] = useState(null)
  const didMount = useRef(false);
  const [count, setCount] = useState(1)

  useEffect(()=> {
    setInitialRender(true)
    setJobData(jobs)
  }, [])


  useEffect(() => {
    // Return early, if this is the first render:
    if ( ! didMount.current ) {
     return ()=> didMount.current = true;
    }

    // Paste code to be executed on subsequent renders:
    let query = {
      page_num: count,
      title: '',
      location : '',
      contractTypeSel : '',
      remoteDays : "Any",
      skills: ''
    }

    const prepare = async () => {
      let t = await getPagedJobsData(query)
      const addtionalJobs =  t.jobs
      setJobData([...jobData, ...addtionalJobs])

    }

    prepare()


  }, [count]);


  const handlePageClick = () => {
    setCount(count + 1)
  }


  return  (
    <>
    <div className='border'>
      <div>
        <div className=''>
          { 
            initialRender == false ? jobs.map((item, index)=> {
              return <div key={index}>{item.company}</div>
            })
            : jobData.map((item, index)=> {
              return <div key={index}>{item.company}</div>
            })
          }
        </div>
      </div>    
    </div> 
    <div className=' items-center'>
          <button onClick={handlePageClick}>More</button>
    </div> 
   </>