Nextbase Docs
Guides

Optimizing Data Operations in Next.js 14 and Supabase

Learn how to efficiently fetch and mutate data in Next.js 14 and Supabase using server components, useToastMutation, and Supabase real-time APIs.

In this guide, we'll explore best practices for fetching and mutating data in Nextbase applications, focusing on performance and efficiency.

Server-Side Data Fetching

Prefer fetching data for components on the server using server components. This approach utilizes the higher CPU power of servers and minimizes bundle sizes for the data fetching operation.

Mutations with useToastMutation

For mutations, use the useToastMutation hook. This allows for direct server-side mutations while providing user feedback through toast notifications.

Realtime Queries with Supabase

For realtime queries, such as notifications, use Supabase's realtime APIs directly on the client side.

Avoiding useState for Data Fetching

Avoid using useState for most data fetching operations. Instead, either use server components and fetch data within them, or use useQuery if you really need to, but you generally shouldn't need to use useState.

By following these guidelines, you can optimize data operations in your Nextbase applications for better performance and user experience.

On this page