React Server Component explained
Opened this issue · 4 comments
m4xshen commented
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.
m4xshen commented
This is my first comment!
m4xshen commented
This is the second comment!
m4xshen commented
Hello!
tsaichiehhuang commented
哈囉!