refactor: update SWR options for improved caching and performance across components

Author: Geczy

src/hooks/SubscriptionProvider.tsx

@@ -32,9 +32,9 @@ export function SubscriptionProviderMain({ children }: { children: React.ReactNo
       revalidateIfStale: false,
       revalidateOnFocus: false,
       revalidateOnReconnect: false,
-      dedupingInterval: 15000,
-      focusThrottleInterval: 30000,
-      errorRetryInterval: 10000,
+      dedupingInterval: 60000,
+      focusThrottleInterval: 120000,
+      errorRetryInterval: 30000,
       errorRetryCount: 1,
     },
   )

src/lib/hooks/useUpdateSetting.tsx

@@ -19,9 +19,9 @@ export const SETTINGS_SWR_OPTIONS = {
   revalidateIfStale: false,
   revalidateOnFocus: false,
   revalidateOnReconnect: false,
-  dedupingInterval: 15000,
-  focusThrottleInterval: 30000,
-  errorRetryInterval: 10000,
+  dedupingInterval: 60000,
+  focusThrottleInterval: 120000,
+  errorRetryInterval: 30000,
   errorRetryCount: 1,
 } as const
 

src/middleware.ts

@@ -15,50 +15,63 @@ export const config = {
     '/dashboard/:path*',
     '/dashboard/admin/:path*',
     '/install',
-    '/[username]',
+    '/:username',
   ],
 }
 
 export async function middleware(req: NextRequestWithAuth) {
+  const pathname = req.nextUrl.pathname
+
   // Redirect literal [username] path to login page
-  if (req.nextUrl.pathname === '/[username]') {
+  if (pathname === '/[username]') {
     return NextResponse.redirect(new URL('/login', req.url))
   }
 
-  if (req.nextUrl.pathname === '/install') {
+  if (pathname === '/install') {
     return NextResponse.redirect(new URL('/api/install', req.url))
   }
 
-  if (req.nextUrl.pathname === '/dashboard/troubleshoot') {
+  if (pathname === '/dashboard/troubleshoot') {
     return NextResponse.redirect(new URL('/dashboard/help', req.url))
   }
 
-  if (!process.env.EDGE_CONFIG) {
-    req.nextUrl.pathname = '/missing-edge-config'
-    return NextResponse.rewrite(req.nextUrl)
-  }
+  const shouldCheckMaintenance =
+    pathname === '/' ||
+    pathname === '/login' ||
+    pathname === '/verify' ||
+    pathname === '/install' ||
+    pathname === '/[username]' ||
+    pathname.startsWith('/overlay')
 
-  try {
-    // Check whether the maintenance page should be shown
-    const isInMaintenanceMode = await get<boolean>('isInMaintenanceMode')
+  if (shouldCheckMaintenance) {
+    if (!process.env.EDGE_CONFIG) {
+      req.nextUrl.pathname = '/missing-edge-config'
+      return NextResponse.rewrite(req.nextUrl)
+    }
 
-    // If is in maintenance mode, point the url pathname to the maintenance page
-    if (isInMaintenanceMode && process.env.VERCEL_ENV === 'production') {
-      // Check if the path starts with 'overlay' and return an empty page
-      if (req.nextUrl.pathname.startsWith('/overlay')) {
-        return new NextResponse(null, { status: 200 })
-      }
+    try {
+      // Check whether the maintenance page should be shown
+      const isInMaintenanceMode = await get<boolean>('isInMaintenanceMode')
 
-      req.nextUrl.pathname = '/maintenance'
-      return NextResponse.rewrite(req.nextUrl)
+      // If is in maintenance mode, point the url pathname to the maintenance page
+      if (isInMaintenanceMode && process.env.VERCEL_ENV === 'production') {
+        // Check if the path starts with 'overlay' and return an empty page
+        if (pathname.startsWith('/overlay')) {
+          return new NextResponse(null, { status: 200 })
+        }
+
+        req.nextUrl.pathname = '/maintenance'
+        return NextResponse.rewrite(req.nextUrl)
+      }
+    } catch (error) {
+      captureException(error)
+      // show the default page if EDGE_CONFIG env var is missing,
+      // but log the error to the console
+      console.error(error)
     }
-  } catch (error) {
-    captureException(error)
-    // show the default page if EDGE_CONFIG env var is missing,
-    // but log the error to the console
-    console.error(error)
   }
-  if (req.nextUrl.pathname.startsWith('/dashboard') || req.nextUrl.pathname.endsWith('/overlay')) {
+
+  if (pathname.startsWith('/dashboard') || pathname.endsWith('/overlay')) {
     // Use the token in the request directly to check role
     // withAuth already adds the token and user to the request
     const onlyChatterRole = await withAuth(req, {

src/pages/api/lastfm/now-playing.ts

@@ -17,15 +17,16 @@ async function handler(
   res: NextApiResponse<LastFmResponse | { error: string }>,
 ) {
   try {
-    const session = await getServerSession(req, res, authOptions)
-    const isPublicOverlayRequest = (Boolean(req.query.id) || Boolean(req.query.token)) && !session?.user?.id
+    const publicUserId = (req.query.id as string) || (req.query.token as string)
+    const session = publicUserId ? null : await getServerSession(req, res, authOptions)
+    const isPublicOverlayRequest = Boolean(publicUserId)
     if (isPublicOverlayRequest) {
       res.setHeader('Cache-Control', 'public, s-maxage=15, stale-while-revalidate=45')
     } else {
       res.setHeader('Cache-Control', 'private, max-age=15, stale-while-revalidate=30')
     }
 
-    const userId = (req.query.id as string) || session?.user?.id || (req.query.token as string)
+    const userId = publicUserId || session?.user?.id
 
     if (!userId) {
       return res.status(400).json({ error: 'Username is required' })

src/pages/api/stripe/subscription.ts

@@ -6,15 +6,15 @@ import { getSubscription, isSubscriptionActive, SUBSCRIPTION_TIERS } from '@/uti
 
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
   try {
-    const session = await getServerSession(req, res, authOptions)
+    const userId = req.query.id as string | undefined
+    const session = userId ? null : await getServerSession(req, res, authOptions)
 
     // Get the effective user ID
     // When impersonating, we want the subscription of the user being viewed (query param)
     // When not impersonating, we want the current user's subscription
-    const userId = req.query.id as string | undefined
     const userIdToUse = userId || session?.user?.id
 
-    const isPublicOverlayRequest = Boolean(userId) && !session?.user?.id
+    const isPublicOverlayRequest = Boolean(userId)
     if (isPublicOverlayRequest) {
       res.setHeader('Cache-Control', 'public, s-maxage=30, stale-while-revalidate=120')
     } else {

src/pages/login-as-bot.tsx

@@ -9,7 +9,7 @@ import { chatBotScopes } from '@/lib/authScopes'
 import type { NextPageWithLayout } from '@/pages/_app'
 
 const Login: NextPageWithLayout = () => {
-  const { status } = useSession()
+  useSession()
   const router = useRouter()
   const [countdown, setCountdown] = useState(6)
   const [isLoading, setIsLoading] = useState(false)

src/pages/login.tsx

@@ -11,7 +11,7 @@ import type { NextPageWithLayout } from '@/pages/_app'
 
 const Login: NextPageWithLayout = () => {
   const { status } = useSession()
-  const { message } = App.useApp()
+  App.useApp()
   const router = useRouter()
   const { notification } = App.useApp()
 

src/pages/verify.tsx

@@ -94,7 +94,7 @@ const VerifyPage: NextPageWithLayout = () => {
   const [checkingAccount, setCheckingAccount] = useState(false)
   const [accountToUnlink, setAccountToUnlink] = useState<string | null>(null)
   const [unlinkModalVisible, setUnlinkModalVisible] = useState(false)
-  const { notification, modal } = App.useApp()
+  const { notification } = App.useApp()
   const track = useTrack()
   const [actionLoading, setActionLoading] = useState<{ [key: string]: boolean }>({})
   const [isSigningOut, setIsSigningOut] = useState(false)
@@ -205,7 +205,7 @@ const VerifyPage: NextPageWithLayout = () => {
             throw new Error(error.message || 'Steam authentication validation failed')
           }
 
-          const { steam32Id, profileData } = await response.json()
+          const { steam32Id } = await response.json()
 
           if (steam32Id) {
             // Show success notification