Skip to Content
🎉 We are hiring! You want to work on a large-scale Supabase project? DM me →
PostgRESTServer Side RenderingSWR

Server Side Rendering with SWR

SWR allows a user to pre-render with default data. Specifically, you can either pass fallbackData directly to useSWR,

const { data } = useSWR("/api/article", fetcher, { fallbackData });

or define it globally in SWRConfig

<SWRConfig value={{ fallback }}> <Article /> </SWRConfig>

Supabase Cache Helpers exports helper to simplify it for every query type.

⚠️

Using the NextJS App Router and react server components requires importing fetchQueryFallbackData, fetchOffsetPaginationFallbackData, fetchOffsetPaginationHasMoreFallbackData from @supabase-cache-helpers/postgrest-swr/react-server. All other exports are suitable for client components only.

useQuery

Fetch fallback data for useQuery using fetchQueryFallbackData.

const buildQuery = (supabase: SupabaseClient) => { return supabase.from('article').select('id,title'); }; export async function getStaticProps() { const supabase = createClient( process.env.NEXT_PUBLIC_SUPABASE_URL, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY, ); const [key, fallbackData] = await fetchQueryFallbackData( buildQuery(supabase), ); return { props: { fallback: fallbackData, }, }; } export default function Articles({ fallback }) { const supabase = useSupabaseClient(); const { data } = useQuery(buildQuery(supabase), { fallbackData: fallback }); ... }

The data can also be passed globally using key.

const buildQuery = (supabase: SupabaseClient) => { return supabase.from('article').select('id,title'); }; export async function getStaticProps() { const supabase = createClient( process.env.NEXT_PUBLIC_SUPABASE_URL, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY, ); const [key, fallbackData] = await fetchQueryFallbackData( buildQuery(supabase), ); return { props: { fallback { [key]: fallbackData, }, }; } export default function App({ fallback }) { return ( <SWRConfig value={{ fallback }}> <Article /> </SWRConfig> ) }

useOffsetInfiniteQuery

To fetch fallback data for useOffsetInfiniteQuery, use fetchOffsetPaginationFallbackData.

const buildQuery = (supabase: SupabaseClient) => { return supabase.from('article').select('id,title'); }; export async function getStaticProps() { const supabase = createClient( process.env.NEXT_PUBLIC_SUPABASE_URL, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY, ); const [key, fallbackData] = await fetchOffsetPaginationFallbackData( buildQuery(supabase), 1 ); return { props: { fallback: fallbackData, }, }; } export default function Articles({ fallback }) { const supabase = useSupabaseClient(); const { data } = useOffsetInfiniteQuery(buildQuery(supabase), { pageSize: 1, fallbackData, }); ... }
🚧

Unfortunately, passing it globally to SWRConfig does not work. There seems to be an issue with fallbackData in useSWRInfinite that I could not figure out yet.

useOffsetInfiniteScrollQuery

To fetch fallback data for useOffsetInfiniteScrollQuery, use fetchOffsetPaginationHasMoreFallbackData.

const buildQuery = (supabase: SupabaseClient) => { return supabase.from('article').select('id,title'); }; export async function getStaticProps() { const supabase = createClient( process.env.NEXT_PUBLIC_SUPABASE_URL, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY, ); const [key, fallbackData] = await fetchOffsetPaginationHasMoreFallbackData( buildQuery(supabase), 1 ); return { props: { fallback: fallbackData, }, }; } export default function Articles({ fallback }) { const supabase = useSupabaseClient(); const { data } = useOffsetInfiniteScrollQuery(buildQuery(supabase), { pageSize: 1, fallbackData, }); ... }
🚧

Unfortunately, passing it globally to SWRConfig does not work. There seems to be an issue with fallbackData in useSWRInfinite that I could not figure out yet.

useInfiniteOffsetPaginationQuery

To fetch fallback data for useInfiniteOffsetPaginationQuery, use fetchOffsetPaginationHasMoreFallbackData.

const buildQuery = (supabase: SupabaseClient) => { return supabase.from('article').select('id,title'); }; export async function getStaticProps() { const supabase = createClient( process.env.NEXT_PUBLIC_SUPABASE_URL, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY, ); const [key, fallbackData] = await fetchOffsetPaginationHasMoreFallbackData( buildQuery(supabase), 1 ); return { props: { fallback: fallbackData, }, }; } export default function Articles({ fallback }) { const supabase = useSupabaseClient(); const { data } = useInfiniteOffsetPaginationQuery(buildQuery(supabase), { pageSize: 1, fallbackData, }); ... }
🚧

Unfortunately, passing it globally to SWRConfig does not work. There seems to be an issue with fallbackData in useSWRInfinite that I could not figure out yet.