use cache :)

maslianok · maslianok · commit d79e45082384 · 2025-06-02T20:32:45.000+02:00
diff --git a/app/api/revalidate/route.ts b/app/api/revalidate/route.ts
@@ -1,17 +1,13 @@
-import { revalidatePath } from 'next/cache';
+import { revalidateTag } from 'next/cache';
 import type { NextRequest } from 'next/server';
 
 export async function GET(request: NextRequest) {
-  const path = request.nextUrl.searchParams.get('path');
+  const tagName = request.nextUrl.searchParams.get('tag');
 
-  if (path) {
-    revalidatePath(path);
-    return Response.json({ revalidated: true, now: Date.now() });
+  if (tagName) {
+    revalidateTag(tagName);
+    return Response.json({ revalidated: true });
   }
 
-  return Response.json({
-    revalidated: false,
-    now: Date.now(),
-    message: 'Missing path to revalidate',
-  });
+  return Response.json({ revalidated: false, message: 'Missing tag to revalidate' });
 }
diff --git a/app/badge/[[...login]]/hooks/useBadgeUrl.ts b/app/badge/[[...login]]/hooks/useBadgeUrl.ts
@@ -1,15 +1,20 @@
 import { useQueryStates } from 'nuqs';
+import { useLayoutEffect, useState } from 'react';
 
 import { BadgeNuqsSchema } from '@/badge/badge.nuqs';
 
 export const useBadgeUrl = (githubLogin: string | undefined, githubId: string | undefined) => {
   const [badgeParams] = useQueryStates(BadgeNuqsSchema);
+  const [origin, setOrigin] = useState<string>('');
+
+  useLayoutEffect(() => {
+    setOrigin(window.location.origin);
+  }, []);
 
   if (!githubId) {
     return '';
   }
 
   const queryParams = new URLSearchParams(badgeParams).toString();
-  const origin = typeof window !== 'undefined' ? window.location.origin : '';
   return `${origin}/api/badge/${githubLogin}` + (queryParams ? '?' : '') + queryParams;
 };
diff --git a/app/badge/[[...login]]/layout.tsx b/app/badge/[[...login]]/layout.tsx
@@ -1,6 +1,7 @@
 import type { Metadata } from 'next';
 
 import { Header } from '@/components/header/header';
+import { Page } from '@/components/page/page';
 
 export const metadata: Metadata = {
   title: 'GitRanks · GitHub Profile Analytics & Rankings',
@@ -12,7 +13,15 @@ export default function BadgeLayout({ children }: Readonly<{ children: React.Rea
   return (
     <>
       <Header />
-      {children}
+
+      <Page className="gap-6">
+        <div>
+          <h1 className="text-2xl font-semibold">Profile badge</h1>
+          <div>Create a custom profile badge to showcase on your GitHub portfolio or anywhere you like!</div>
+        </div>
+
+        {children}
+      </Page>
     </>
   );
 }
diff --git a/app/badge/[[...login]]/loading.tsx b/app/badge/[[...login]]/loading.tsx
@@ -0,0 +1,10 @@
+import { Skeleton } from '@/components/ui/skeleton';
+
+export default function Loading() {
+  return (
+    <div className="flex gap-8">
+      <Skeleton className="h-14 flex grow" />
+      <Skeleton className="h-14 flex grow" />
+    </div>
+  );
+}
diff --git a/app/badge/[[...login]]/page.tsx b/app/badge/[[...login]]/page.tsx
@@ -1,4 +1,7 @@
-import { Page } from '@/components/page/page';
+'use cache';
+
+import { unstable_cacheLife as cacheLife, unstable_cacheTag as cacheTag } from 'next/cache';
+
 import { Separator } from '@/components/ui/separator';
 import { graphqlDirect } from '@/lib/graphql/graphql-direct';
 import { IdByLoginDocument } from '@/types/generated/graphql';
@@ -9,32 +12,29 @@ import { LoginForm } from './components/login-form';
 import { Preview } from './components/preview';
 
 export default async function Badge({ params }: { params: Promise<{ login?: string[] }> }) {
+  cacheLife('hours');
+
   const { login } = await params;
   const githubLogin = login?.[0];
   let githubId: string | undefined;
 
   if (githubLogin) {
+    cacheTag(`profile:${githubLogin}`);
+
     const data = await graphqlDirect(IdByLoginDocument, { login: githubLogin });
     githubId = data.globalRankByLogin?.githubId;
   }
 
   return (
-    <Page className="gap-6">
-      <div>
-        <h1 className="text-2xl font-semibold">Profile badge</h1>
-        <div>Create a custom profile badge to showcase on your GitHub portfolio or anywhere you like!</div>
-      </div>
-
-      <div className="flex flex-col lg:flex-row gap-8 items-center lg:items-start">
-        <div className="flex flex-col gap-6 min-w-2xs max-w-md flex-grow">
-          <LoginForm githubLogin={githubLogin} githubId={githubId} />
-          <Separator />
-          <BadgeForm />
-          <Separator />
-          <IntegrationCode githubLogin={githubLogin} githubId={githubId} />
-        </div>
-        <Preview githubLogin={githubLogin} githubId={githubId} />
+    <div className="flex flex-col lg:flex-row gap-8 items-center lg:items-start">
+      <div className="flex flex-col gap-6 min-w-2xs max-w-md flex-grow">
+        <LoginForm githubLogin={githubLogin} githubId={githubId} />
+        <Separator />
+        <BadgeForm />
+        <Separator />
+        <IntegrationCode githubLogin={githubLogin} githubId={githubId} />
       </div>
-    </Page>
+      <Preview githubLogin={githubLogin} githubId={githubId} />
+    </div>
   );
 }
diff --git a/app/by/[rankingType]/[page]/loading.tsx b/app/by/[rankingType]/[page]/loading.tsx
@@ -0,0 +1,5 @@
+import LoadingDefault from '../loading';
+
+export default function Loading() {
+  return <LoadingDefault />;
+}
diff --git a/app/by/[rankingType]/[page]/page.tsx b/app/by/[rankingType]/[page]/page.tsx
@@ -1,3 +1,7 @@
+'use cache';
+
+import { unstable_cacheLife as cacheLife } from 'next/cache';
+
 import { Page } from '@/components/page/page';
 import { RankDelta } from '@/components/rank-delta/rank-delta';
 import {
@@ -54,6 +58,8 @@ function getConfigByRankingType(rankingType: string) {
 }
 
 export default async function GlobalRanking({ params }: { params: Promise<{ rankingType: string; page: string }> }) {
+  cacheLife('hours');
+
   const { rankingType, page: pageParam } = await params;
   const page = parseInt(pageParam, 10);
   const [queryOrder, rankPropName, title, subtitle, rankingBaseEntity] = getConfigByRankingType(rankingType);
diff --git a/app/by/[rankingType]/layout.tsx b/app/by/[rankingType]/layout.tsx
@@ -8,9 +8,6 @@ export const metadata: Metadata = {
     'Explore ranks based on stars, followers, contributions, and more. Dive into dynamic leaderboards and find out how you measure up against developers worldwide.',
 };
 
-export const revalidate = 10800;
-export const dynamicParams = true;
-
 export async function generateStaticParams() {
   const page = '1';
   return [
@@ -20,7 +17,7 @@ export async function generateStaticParams() {
   ];
 }
 
-export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
+export default function RankingListLayout({ children }: Readonly<{ children: React.ReactNode }>) {
   return (
     <>
       <Header />
diff --git a/app/by/[rankingType]/loading.tsx b/app/by/[rankingType]/loading.tsx
@@ -0,0 +1,13 @@
+import { Page } from '@/components/page/page';
+import { Skeleton } from '@/components/ui/skeleton';
+
+export default function Loading() {
+  return (
+    <Page className="max-w-5xl gap-6">
+      <div className="flex flex-col gap-4">
+        <Skeleton className="h-8 w-[200]" />
+        <Skeleton className="h-5 w-full" />
+      </div>
+    </Page>
+  );
+}
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -6,8 +6,7 @@ import { NuqsAdapter } from 'nuqs/adapters/next/app';
 import { Footer } from '@/components/footer/footer';
 import { ThemeProvider } from '@/components/theme-provider/theme-provider';
 import { Toaster } from '@/components/ui/sonner';
-
-import { PostHogProvider } from '../lib/posthog/post-hog-provider';
+import { PostHogClientOnlyProvider } from '@/lib/posthog/post-hog-client-only';
 
 import './globals.css';
 
@@ -19,16 +18,12 @@ export const metadata: Metadata = {
     'Explore ranks based on stars, followers, contributions, and more. Dive into dynamic leaderboards and find out how you measure up against developers worldwide.',
 };
 
-export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
+export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
   return (
     <html lang="en" suppressHydrationWarning>
       <body className={`${inter.className} antialiased`}>
         <SessionProvider>
-          <PostHogProvider>
+          <PostHogClientOnlyProvider>
             <NuqsAdapter>
               <ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
                 <div className="flex flex-col min-h-screen">
@@ -38,7 +33,7 @@ export default function RootLayout({
                 <Toaster richColors position="top-right" />
               </ThemeProvider>
             </NuqsAdapter>
-          </PostHogProvider>
+          </PostHogClientOnlyProvider>
         </SessionProvider>
       </body>
     </html>
diff --git a/app/profile/[login]/components/fetch-user-button.tsx b/app/profile/[login]/components/fetch-user-button.tsx
@@ -12,6 +12,7 @@ import {
   ReactElement,
   useCallback,
   useEffect,
+  useLayoutEffect,
   useRef,
   useState,
 } from 'react';
@@ -53,15 +54,27 @@ export const FetchUserButton: FC<FetchUserButtonProps> = ({
 }) => {
   const { data: session } = useSession();
   const { login } = useParams<{ login: string }>();
-  const now = Date.now();
   const posthog = usePostHog();
   const fetchAttempt = useRef(0);
   const timerRef = useRef<NodeJS.Timeout | null>(null);
   const [loadingLabel, setLoadingLabel] = useState(FETCH_MESSAGES[fetchAttempt.current]);
-  const initialFetchingDuration = now - (fetchingUpdatedAt || now);
-  const [fetchingDuration, setFetchingDuration] = useState(
-    fetchingStatus === 'FETCHING' && initialFetchingDuration < REFRESH_TIMEOUT ? initialFetchingDuration : null,
-  );
+  const [fetchingDuration, setFetchingDuration] = useState<number | null>(null);
+
+  useLayoutEffect(() => {
+    if (fetchingStatus !== 'FETCHING') {
+      return;
+    }
+
+    const now = Date.now();
+    const initialFetchingDuration = now - (fetchingUpdatedAt || now);
+
+    if (initialFetchingDuration >= REFRESH_TIMEOUT) {
+      return;
+    }
+    // You can determine when and how often to update
+    // the time here. In this example we update it only once
+    setFetchingDuration(initialFetchingDuration);
+  }, [fetchingStatus, fetchingUpdatedAt]);
 
   const checkFetchingStatus = useCallback(async () => {
     setLoadingLabel('Checking…');
@@ -80,7 +93,7 @@ export const FetchUserButton: FC<FetchUserButtonProps> = ({
       fetchAttempt.current += 1;
       setLoadingLabel(FETCH_MESSAGES[fetchAttempt.current % FETCH_MESSAGES.length]);
     } else {
-      await fetch(`/api/revalidate?path=${encodeURIComponent(`/profile/${login}`)}`);
+      await fetch(`/api/revalidate?tag=${encodeURIComponent(`profile:${login}`)}`);
       window.location.reload();
     }
   }, [login]);
@@ -94,6 +107,9 @@ export const FetchUserButton: FC<FetchUserButtonProps> = ({
 
     if (!res.ok) {
       toast.error('Failed to fetch user profile');
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+      }
       setFetchingDuration(null);
     }
   };
diff --git a/app/profile/[login]/layout.tsx b/app/profile/[login]/layout.tsx
@@ -1,19 +1,14 @@
+import { Suspense } from 'react';
+
 import { Header } from '@/components/header/header';
 import { Tab } from '@/components/tabs/tabs';
 import { TabsBar } from '@/components/tabs/tabs-bar';
 import { graphqlDirect } from '@/lib/graphql/graphql-direct';
 import { TopRanksDocument } from '@/types/generated/graphql';
 
-type ProfileLayoutProps = Readonly<{ children: React.ReactNode; params: Promise<{ login: string }> }>;
-
-// Next.js will invalidate the cache when a
-// request comes in, at most once every 3 hours.
-export const revalidate = 10800; // 3 hours
+import Loading from './loading';
 
-// We'll prerender only the params from `generateStaticParams` at build time.
-// If a request comes in for a path that hasn't been generated,
-// Next.js will server-render the page on-demand.
-export const dynamicParams = true;
+type ProfileLayoutProps = Readonly<{ children: React.ReactNode; params: Promise<{ login: string }> }>;
 
 export async function generateStaticParams() {
   const { byStars, byContribution, byFollowers } = (await graphqlDirect(TopRanksDocument)) ?? {};
@@ -30,7 +25,16 @@ export async function generateStaticParams() {
   return [...uniqueLogins].map((login) => ({ login }));
 }
 
-export default async function ProfileLayout({ children, params }: ProfileLayoutProps) {
+function LayoutLoading() {
+  return (
+    <>
+      <Header />
+      <Loading />
+    </>
+  );
+}
+
+async function ProfileLayoutAwaitParams({ children, params }: ProfileLayoutProps) {
   const { login } = await params;
 
   return (
@@ -47,3 +51,11 @@ export default async function ProfileLayout({ children, params }: ProfileLayoutP
     </>
   );
 }
+
+export default async function ProfileLayout({ children, params }: ProfileLayoutProps) {
+  return (
+    <Suspense fallback={<LayoutLoading />}>
+      <ProfileLayoutAwaitParams params={params}>{children}</ProfileLayoutAwaitParams>
+    </Suspense>
+  );
+}
diff --git a/app/profile/[login]/page.tsx b/app/profile/[login]/page.tsx
@@ -1,4 +1,7 @@
+'use cache';
+
 import { Metadata } from 'next';
+import { unstable_cacheLife as cacheLife, unstable_cacheTag as cacheTag } from 'next/cache';
 import { notFound } from 'next/navigation';
 
 import { LayoutLeftColumn } from './components/layout-left-column';
@@ -29,6 +32,9 @@ export async function generateMetadata({ params }: { params: Promise<{ login: st
 
 export default async function Profile({ params }: { params: Promise<{ login: string }> }) {
   const { login } = await params;
+  cacheLife('hours');
+  cacheTag(`profile:${login}`);
+
   const { user } = await fetchProfileData(login);
 
   if (!user) {
diff --git a/app/profile/[login]/ranks/loading.tsx b/app/profile/[login]/ranks/loading.tsx
@@ -0,0 +1,5 @@
+import LoadingDefault from '../loading';
+
+export default function Loading() {
+  return <LoadingDefault />;
+}
diff --git a/app/profile/[login]/ranks/page.tsx b/app/profile/[login]/ranks/page.tsx
@@ -1,4 +1,7 @@
+'use cache';
+
 import { ChevronRight } from 'lucide-react';
+import { unstable_cacheLife as cacheLife, unstable_cacheTag as cacheTag } from 'next/cache';
 import Link from 'next/link';
 import { notFound } from 'next/navigation';
 
@@ -11,6 +14,9 @@ import { getBestRankType } from './utils/get-best-rank-type';
 
 export default async function ProfileRanks({ params }: { params: Promise<{ login: string }> }) {
   const { login } = await params;
+  cacheLife('hours');
+  cacheTag(`profile:${login}`);
+
   const { user } = await fetchProfileData(login);
 
   if (!user) {
diff --git a/app/profile/[login]/repositories/loading.tsx b/app/profile/[login]/repositories/loading.tsx
@@ -0,0 +1,5 @@
+import LoadingDefault from '../loading';
+
+export default function Loading() {
+  return <LoadingDefault />;
+}
diff --git a/app/profile/[login]/repositories/page.tsx b/app/profile/[login]/repositories/page.tsx
diff --git a/app/profile/[login]/utils/fetch-profile-data.ts b/app/profile/[login]/utils/fetch-profile-data.ts
diff --git a/components/monster-avatar/monster-avatar.tsx b/components/monster-avatar/monster-avatar.tsx
diff --git a/lib/posthog/post-hog-client-only.tsx b/lib/posthog/post-hog-client-only.tsx
diff --git a/lib/signed-fetch.ts b/lib/signed-fetch.ts
diff --git a/next.config.ts b/next.config.ts
