---
title: "Fetching and caching Supabase data in Next.js 13 Server Components"
description: "The article demonstrates data fetching and caching with Supabase in Next.js 13’s experimental app directory, focusing on Server Components and Suspense. It creates a posts table, configures a Supabase client, and uses async components to fetch data without manually managing loading states. The examples cover static generation, dynamic routes with generateStaticParams, time-based revalidation, client-side fetching, and a realtime pattern that combines server-rendered initial data with a client subscription to Postgres changes. The article notes that Next.js 13 is stable while the app directory remains in beta, and concludes that separating caching from fetching lets applications change freshness requirements without replacing their data-fetching logic."
---

# Fetching and caching Supabase data in Next.js 13 Server Components

[Supabase](https://yomu.fyi/company/supabase) · jonmeyers\_io · Nov 17, 2022

**Type:** Tutorial

## Summary

The article demonstrates data fetching and caching with Supabase in Next.js 13’s experimental app directory, focusing on Server Components and Suspense. It creates a posts table, configures a Supabase client, and uses async components to fetch data without manually managing loading states. The examples cover static generation, dynamic routes with generateStaticParams, time-based revalidation, client-side fetching, and a realtime pattern that combines server-rendered initial data with a client subscription to Postgres changes. The article notes that Next.js 13 is stable while the app directory remains in beta, and concludes that separating caching from fetching lets applications change freshness requirements without replacing their data-fetching logic.

## Context

The article addresses the complexity of data fetching and caching in Next.js applications, presenting Server Components and Suspense as a more streamlined approach. It also notes that the app directory is experimental and still likely to change.

## Approach / What changed

It creates a Next.js 13 app with the experimental app directory, provisions a Supabase posts table, installs supabase-js, and configures a client using environment variables. It then demonstrates async Server Components, static generation, generateStaticParams, revalidation, client-side fetching with useState and useEffect, and a client subscription for Supabase realtime changes.

## Takeaways

- Server Components support async/await and suspend rendering until data has been fetched, reducing the need to handle loading and error states directly in the component.
- Exporting revalidate = 60 serves the cached static page for 60 seconds, then generates a fresh version while continuing to serve the previous page until the new one succeeds.
- A realtime pattern fetches initial posts in a Server Component, passes them to a Client Component, and updates local state from Supabase postgres\_changes events.

**Tags:** [Architecture](https://yomu.fyi/topic/architecture), [Caching](https://yomu.fyi/topic/caching), [Postgres](https://yomu.fyi/topic/postgres), [TypeScript](https://yomu.fyi/topic/typescript)

- Source: [Supabase](https://supabase.com/blog/fetching-and-caching-supabase-data-in-next-js-server-components)
- Source URL: https://supabase.com/blog/fetching-and-caching-supabase-data-in-next-js-server-components
- Ingested by Yomu: 2026-08-29T01:14:48.232Z

[Read original post](https://supabase.com/blog/fetching-and-caching-supabase-data-in-next-js-server-components)