Open m4xshen opened 5 months ago
React Server Components allow you to write UI that can be rendered and optionally cached on the server.
Here's an example of React Server Component:
// page.tsx import Link from 'next/link'; import { Button } from '@nextui-org/react'; import Posts from '@/components/Posts'; import { getPosts } from '@/utils/post'; import { isAuthor } from '@/utils/auth'; export default async function Home() { const data = await getPosts(1); return ( <div className="mx-auto flex h-full max-w-[65ch] flex-col justify-center gap-10"> {(await isAuthor()) ? ( <Button as={Link} href="/post/new" radius="sm" color="primary"> New Post </Button> ) : null} <Posts data={data} /> </div> ); }
This pattern is fetching data and then passing them into client component.
This is my first comment!
This is the second comment!
Hello!
哈囉!
React Server Components allow you to write UI that can be rendered and optionally cached on the server.
Here's an example of React Server Component:
This pattern is fetching data and then passing them into client component.