Skip to content

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.

Warning

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,
    });
    ...

}

Note

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,
    });
    ...

}

Note

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,
    });
    ...

}

Note

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.