In this article, you will learn what a cache in React is and also analyse how it is used in nextjs-subscription-payments example.
Cache
Cache is only for use in React Server Components. React documentation suggests to cache a function that does data fetch or complex computation
These three below examples are provided in the React documentation about cache:
It is important that you read these usage examples and understand the common pitfalls to apply cache.
Read more about cache.
Cache usage in Nextjs-Subscription-Payments
In queries.ts in nextjs-subscription-payments, you will find the below code:
import { SupabaseClient } from '@supabase/supabase-js';
import { cache } from 'react';
export const getUser = cache(async (supabase: SupabaseClient) => {
const {
data: { user }
} = await supabase.auth.getUser();
return user;
});
Notice the cache applied to the arrow function above. Where is this function called though? you will find this below code in app/page.tsx
import {
getProducts,
getSubscription,
getUser
} from '@/utils/supabase/queries';
export default async function PricingPage() {
const supabase = createClient();
const [user, products, subscription] = await Promise.all([
getUser(supabase),
getProducts(supabase),
getSubscription(supabase)
]);
The usecase, Preload data applies here. I am going to quote what is provided in preload data usage example
When rendering Page, the component calls getUser but note that it doesn’t use the returned data.This early getUser call kicks off the asynchronous database query that occurs while Page is doing other computational work and rendering children.
When rendering Profile, we call getUser again. If the initial getUser call has already returned and cached the user data, when Profile asks and waits for this data, it can simply read from the cache without requiring another remote procedure call. If the initial data request hasn’t been completed, preloading data in this pattern reduces delay in data-fetching.
There is one more place/file where getUser is called. You will find the below code in app/account/page.tsx
import {
getUserDetails,
getSubscription,
getUser
} from '@/utils/supabase/queries';
export default async function Account() {
const supabase = createClient();
const [user, userDetails, subscription] = await Promise.all([
getUser(supabase),
getUserDetails(supabase),
getSubscription(supabase)
]);
Both, app/page.tsx and app/account/page.tsx, are server components.
About us:
We study large open source projects and provide free architectural guides.
We have developed free, reusable Components, built with tailwind, that you can use in your project.
We analyse open-source code and provide courses so you can learn various advanced techniques and improve your skills. Get our courses.
Subscribe to our Youtube Channel to get the insights from the open-source projects, where we review code snippets.
Top comments (0)