Загрузка данных в Server Components

// app/posts/page.tsx
export default async function Posts() {
    const res = await fetch('https://api.example.com/posts');
    const posts = await res.json();

    return <ul>{posts.map((p) => <li key={p.id}>{p.title}</li>)}</ul>;
}

import { db } from '@/lib/db';

export default async function Users() {
    const users = await db.user.findMany();
    return <ul>{users.map((u) => <li key={u.id}>{u.name}</li>)}</ul>;
}

const apiKey = process.env.API_KEY; // работает
const dbUrl = process.env.DATABASE_URL;

const user = await getUser();
const posts = await getPosts();
const comments = await getComments();

const [user, posts, comments] = await Promise.all([
    getUser(),
    getPosts(),
    getComments(),
]);

export default async function Post({
    params,
}: {
    params: Promise<{ id: string }>;
}) {
    const { id } = await params;
    const post = await getPost(id);

    if (!post) notFound();

    return <h1>{post.title}</h1>;
}

export default async function Search({
    searchParams,
}: {
    searchParams: Promise<{ q?: string }>;
}) {
    const { q = '' } = await searchParams;
    const results = await search(q);

    return <ul>{results.map((r) => <li key={r.id}>{r.title}</li>)}</ul>;
}

export default async function Post({ params }) {
    const { id } = await params;

    try {
        const post = await getPost(id);
        if (!post) notFound();
        return <h1>{post.title}</h1>;
    } catch (error) {
        throw error; // поймает error.tsx
    }
}

import { Suspense } from 'react';

export default function Page() {
    return (
        <>
            <Header />
            <Suspense fallback={<PostsSkeleton />}>
                <Posts />
            </Suspense>
            <Suspense fallback={<CommentsSkeleton />}>
                <Comments />
            </Suspense>
        </>
    );
}