Next Server Components

React Server Components best practices and pitfalls.

If you are using React Server Components (fetching data on the server), you can skip the API layer, and query your database directly without risking exposing your database secrets to the client.

Context

• Performance
• Best Practices and Antipatterns
• Clean Architecture

Best Practices

• Get the current URL
• Higher-Order Components

Pitfalls

• 5 common pitfalls

Links

• React Server Components

Questions

When does a server component create more complexity than the bundle savings justify?

• What data-fetching patterns break when you convert a client component to a server component?
• How do you test server components without the full Next.js runtime?
• Where is the boundary between "server component with props" and "should be an API route"?