React Server Component explained

[m4xshen]

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]

This is my first comment!

[m4xshen]

This is the second comment!

[m4xshen]

Hello!

[tsaichiehhuang]

哈囉！