React Server Components (RSC) are a paradigm shift, but they introduce new pitfalls. The most common one? Request Waterfalls.
The Waterfall Problem
If you await data in a parent component, and then await different data in a child component, the browser waits for the first to finish before starting the second.
// BAD: Sequential Waterfall (Slow)
const user = await getUser();
const posts = await getPosts(user.id);
// Total time = getUser time + getPosts time
The Solution: Promise.all
We optimize this by initiating requests in parallel whenever possible.
// GOOD: Parallel Fetching (Fast)
const [user, settings] = await Promise.all([getUser(), getSettings()]);
// Total time = Max(getUser time, getSettings time)
Moving Client Logic Down
Another common mistake is making the entire page "use client". This forces the user to download massive JavaScript bundles.
At Saarza, we keep the Page as a Server Component and only add "use client" to the specific interactive buttons or forms (the "Leaves" of the component tree).
This strategy reduced our First Contentful Paint (FCP) by 40%.