#What is the efficient way to pass data from a parent server component to a child server component?

4 messages · Page 1 of 1 (latest)

midnight roost
#

I aim to efficiently pass data from the parent server component to the child server component. I comprehend the concept of deduping, but I'm uncertain about handling dynamic route since the params are accessible only to the base (parent) component and not the child component.

winter mapleBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

      🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in <id:customize>

      ✅ You can mark a message as the answer for your post with `Right click -> Apps -> Mark Solution`
      (if you don't see the option, try refreshing Discord with Ctrl + R)
midnight roost
#

code sample

blog/[id]/page.tsx
import React from 'react'
import BlogBody from './BlogBody'

export interface Blog {
  userId: number
  id: number
  title: string
  body: string
}

export async function getBlog({ params }: { params: { id: string } }) {
  const res = await fetch(`https://jsonplaceholder.typicode.com/posts/${params.id}`, { cache: 'no-store' })
  // The return value is *not* serialized
  // You can return Date, Map, Set, etc.

  if (!res.ok) {
    // This will activate the closest `error.js` Error Boundary
    throw new Error('Failed to fetch data')
  }

  return res.json()
}

async function Blog({ params: { id = "0" } }: { params: { id: string } }) {
  const blog: Blog = await getBlog({ params: { id } })
  return (
    <div>
      <h1 className="text-5xl">{blog.title}</h1>
      <BlogBody />
    </div>
  )
}

export default Blog
# 
BlogBody.tsx


import React from 'react'

async function BlogBody() {

  // TODO: How to fetch data like parent on nested level
  const blog = {}

  return (
    <>
      <pre>{JSON.stringify(blog, undefined, 2)}</pre>
    </>
  )
}

export default BlogBody