Adjust for edge caching

nyangko · May 19, 2023 · 27a3093 · 27a3093
1 parent 340af37
commit 27a3093
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 21 deletions.
diff --git a/next.config.mjs b/next.config.mjs
@@ -106,6 +106,11 @@ export default defineNextConfig(withAxiom({
         source: '/canny/bugs',
         destination: 'https://civitai.canny.io/bugs',
         permanent: true,
+      },
+      {
+        source: '/leaderboard',
+        destination: '/leaderboard/overall',
+        permanent: true,
       }
     ];
   },

diff --git a/src/pages/leaderboard/[id].tsx b/src/pages/leaderboard/[id].tsx
@@ -27,20 +27,6 @@ import { Meta } from '~/components/Meta/Meta';
 import { IconInfoCircle } from '@tabler/icons';
 import { LeaderboardItem } from '~/components/Leaderboard/LeaderboardItem';
 
-const leaderboardQuerySchema = z.object({
-  id: z.string().default('overall'),
-  date: stringDate(),
-});
-
-export const getServerSideProps = createServerSideProps({
-  useSSG: true,
-  resolver: async ({ ssg, ctx }) => {
-    const { id, date } = leaderboardQuerySchema.parse(ctx.query);
-    await ssg?.leaderboard.getLeaderboards.prefetch();
-    await ssg?.leaderboard.getLeaderboard.prefetch({ id, date });
-  },
-});
-
 export default function Leaderboard() {
   const { query, replace } = useRouter();
   const { id, date } = leaderboardQuerySchema.parse(query);
@@ -156,9 +142,9 @@ export default function Leaderboard() {
 }
 
 const UserPosition = ({ position, loading }: { position?: number; loading?: boolean }) => {
-  const { username } = useCurrentUser();
+  const currentUser = useCurrentUser();
 
-  if (!username) return null;
+  if (!currentUser) return null;
   if (loading)
     return (
       <Badge color="gray">

diff --git a/src/server/middleware.trpc.ts b/src/server/middleware.trpc.ts
@@ -107,3 +107,21 @@ export function cacheIt<TInput extends object>({
     return result;
   });
 }
+
+type EdgeCacheItProps = {
+  ttl?: number;
+  expireAt?: () => Date;
+};
+export function edgeCacheIt({ ttl, expireAt }: EdgeCacheItProps = {}) {
+  ttl ??= 60 * 3;
+
+  return middleware(async ({ next, ctx }) => {
+    let reqTTL = ttl;
+    if (expireAt) reqTTL = Math.floor((expireAt().getTime() - Date.now()) / 1000);
+
+    const result = await next();
+
+    ctx.res.setHeader('Cache-Control', `public, max-age=${reqTTL}, stale-while-revalidate=30`);
+    return result;
+  });
+}
diff --git a/src/server/routers/leaderboard.router.ts b/src/server/routers/leaderboard.router.ts
@@ -1,4 +1,5 @@
-import { cacheIt } from '~/server/middleware.trpc';
+import dayjs from 'dayjs';
+import { edgeCacheIt } from '~/server/middleware.trpc';
 import {
   getLeaderboardPositionsSchema,
   getLeaderboardSchema,
@@ -10,10 +11,12 @@ import {
 } from '~/server/services/leaderboard.service';
 import { publicProcedure, router } from '~/server/trpc';
 
+const expireAt = () => dayjs().add(1, 'day').startOf('day').toDate();
+
 export const leaderboardRouter = router({
-  getLeaderboards: publicProcedure.query(({ ctx }) =>
-    getLeaderboards({ isModerator: ctx?.user?.isModerator ?? false })
-  ),
+  getLeaderboards: publicProcedure
+    .use(edgeCacheIt({ expireAt }))
+    .query(({ ctx }) => getLeaderboards({ isModerator: ctx?.user?.isModerator ?? false })),
   getLeaderboardPositions: publicProcedure
     .input(getLeaderboardPositionsSchema)
     .query(({ input, ctx }) =>
@@ -25,7 +28,7 @@ export const leaderboardRouter = router({
     ),
   getLeaderboard: publicProcedure
     .input(getLeaderboardSchema)
-    // .use(cacheIt())
+    .use(edgeCacheIt({ expireAt }))
     .query(({ input, ctx }) =>
       getLeaderboard({ ...input, isModerator: ctx?.user?.isModerator ?? false })
     ),