React Server Component explained

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.

Comments

@m4xshenWed Mar 20 2024

This is my first comment!

@m4xshenWed Mar 20 2024

This is the second comment!

@m4xshenSun Mar 24 2024

Hello!

@tsaichiehhuangMon Apr 01 2024

哈囉！

Comment