(SP: 2) [Frontend] Reduce Vercel variable costs via caching and analytics cleanup (#367)

* perf(vercel): cut runtime costs via notification, blog cache, and analytics changes

* perf(blog): remove server searchParams usage to preserve ISR

Author: ViktorSvertoka

frontend/actions/notifications.ts

@@ -1,7 +1,6 @@
 'use server';
 
 import { and,desc, eq } from 'drizzle-orm';
-import { revalidatePath } from 'next/cache';
 
 import { db } from '@/db';
 import { notifications } from '@/db/schema/notifications';
@@ -39,7 +38,6 @@ export async function markAsRead(notificationId: string) {
         )
       );
 
-    revalidatePath('/', 'layout');
     return { success: true };
   } catch (error) {
     console.error('Failed to mark notification as read:', error);
@@ -57,7 +55,6 @@ export async function markAllAsRead() {
       .set({ isRead: true })
       .where(and(eq(notifications.userId, session.id), eq(notifications.isRead, false)));
 
-    revalidatePath('/', 'layout');
     return { success: true };
   } catch (error) {
     console.error('Failed to mark all notifications as read:', error);
@@ -86,7 +83,6 @@ export async function createNotification(data: {
       })
       .returning();
 
-    revalidatePath('/', 'layout');
     return result;
   } catch (error) {
     console.error('Failed to create notification:', error);

frontend/app/[locale]/blog/[slug]/PostDetails.tsx

@@ -9,8 +9,6 @@ import { Link } from '@/i18n/routing';
 import { formatBlogDate } from '@/lib/blog/date';
 import { shouldBypassImageOptimization } from '@/lib/blog/image';
 
-export const revalidate = 0;
-
 type SocialLink = {
   _key?: string;
   platform?: string;
@@ -383,18 +381,14 @@ export default async function PostDetails({
   const slugParam = String(slug || '').trim();
   if (!slugParam) return notFound();
 
-  const post: Post | null = await client
-    .withConfig({ useCdn: false })
-    .fetch(query, {
-      slug: slugParam,
-      locale,
-    });
-  const recommendedAll: Post[] = await client
-    .withConfig({ useCdn: false })
-    .fetch(recommendedQuery, {
-      slug: slugParam,
-      locale,
-    });
+  const post: Post | null = await client.fetch(query, {
+    slug: slugParam,
+    locale,
+  });
+  const recommendedAll: Post[] = await client.fetch(recommendedQuery, {
+    slug: slugParam,
+    locale,
+  });
   const recommendedPosts = seededShuffle(
     recommendedAll,
     hashString(slugParam)

frontend/app/[locale]/blog/[slug]/page.tsx

@@ -4,6 +4,8 @@ import { client } from '@/client';
 
 import PostDetails from './PostDetails';
 
+export const revalidate = 3600;
+
 export async function generateStaticParams() {
   const slugs = await client.fetch<string[]>(
     groq`*[_type == "post" && defined(slug.current)][].slug.current`

frontend/app/[locale]/blog/category/[category]/page.tsx

@@ -11,7 +11,7 @@ import { Link } from '@/i18n/routing';
 import { formatBlogDate } from '@/lib/blog/date';
 import { shouldBypassImageOptimization } from '@/lib/blog/image';
 
-export const revalidate = 0;
+export const revalidate = 3600;
 
 type Author = {
   name?: string;
@@ -50,9 +50,7 @@ export default async function BlogCategoryPage({
   const t = await getTranslations({ locale, namespace: 'blog' });
   const tNav = await getTranslations({ locale, namespace: 'navigation' });
   const categoryKey = String(category || '').toLowerCase();
-  const categories: Category[] = await client
-    .withConfig({ useCdn: false })
-    .fetch(categoriesQuery);
+  const categories: Category[] = await client.fetch(categoriesQuery);
   const matchedCategory = categories.find(
     item => slugify(item.title) === categoryKey
   );
@@ -61,7 +59,7 @@ export default async function BlogCategoryPage({
   const categoryTitle = matchedCategory.title;
   const categoryDisplay = getCategoryLabel(categoryTitle, t);
 
-  const posts: Post[] = await client.withConfig({ useCdn: false }).fetch(
+  const posts: Post[] = await client.fetch(
     groq`
       *[_type == "post" && defined(slug.current) && $category in categories[]->title]
         | order(coalesce(publishedAt, _createdAt) desc) {

frontend/app/[locale]/blog/page.tsx

@@ -1,13 +1,12 @@
 import groq from 'groq';
-import { unstable_noStore as noStore } from 'next/cache';
 import { getTranslations } from 'next-intl/server';
 
 import { client } from '@/client';
 import BlogFilters from '@/components/blog/BlogFilters';
 import { BlogPageHeader } from '@/components/blog/BlogPageHeader';
 import { DynamicGridBackground } from '@/components/shared/DynamicGridBackground';
 
-export const revalidate = 0;
+export const revalidate = 3600;
 
 export async function generateMetadata({
   params,
@@ -25,19 +24,13 @@ export async function generateMetadata({
 
 export default async function BlogPage({
   params,
-  searchParams,
 }: {
   params: Promise<{ locale: string }>;
-  searchParams?: Promise<{ [key: string]: string | string[] | undefined }>;
 }) {
-  noStore();
   const { locale } = await params;
   const t = await getTranslations({ locale, namespace: 'blog' });
-  const sp = searchParams ? await searchParams : undefined;
-  const authorParam = typeof sp?.author === 'string' ? sp.author.trim() : '';
-  const hasAuthorFilter = authorParam.length > 0;
 
-  const posts = await client.withConfig({ useCdn: false }).fetch(
+  const posts = await client.fetch(
     groq`
       *[_type == "post" && defined(slug.current)]
         | order(coalesce(publishedAt, _createdAt) desc) {
@@ -74,7 +67,7 @@ export default async function BlogPage({
     `,
     { locale }
   );
-  const categories = await client.withConfig({ useCdn: false }).fetch(
+  const categories = await client.fetch(
     groq`
       *[_type == "category"] | order(orderRank asc) {
         _id,
@@ -87,9 +80,7 @@ export default async function BlogPage({
   return (
     <DynamicGridBackground className="bg-gray-50 py-10 transition-colors duration-300 dark:bg-transparent">
       <main className="relative z-10 mx-auto max-w-7xl px-4 pt-6 pb-12 sm:px-6 lg:px-8">
-        {!hasAuthorFilter && (
-          <BlogPageHeader title={t('title')} subtitle={t('subtitle')} />
-        )}
+        <BlogPageHeader title={t('title')} subtitle={t('subtitle')} />
         <BlogFilters
           posts={posts}
           categories={categories}

frontend/app/[locale]/layout.tsx

@@ -1,4 +1,5 @@
 import groq from 'groq';
+import { unstable_cache } from 'next/cache';
 import { notFound } from 'next/navigation';
 import { NextIntlClientProvider } from 'next-intl';
 import { getMessages } from 'next-intl/server';
@@ -17,6 +18,18 @@ import { getCurrentUser } from '@/lib/auth';
 
 export const dynamic = 'force-dynamic';
 
+const getCachedBlogCategories = unstable_cache(
+  async () =>
+    client.fetch<Array<{ _id: string; title: string }>>(groq`
+      *[_type == "category"] | order(orderRank asc) {
+        _id,
+        title
+      }
+    `),
+  ['blog-categories'],
+  { revalidate: 3600, tags: ['blog-categories'] }
+);
+
 export default async function LocaleLayout({
   children,
   params,
@@ -30,16 +43,7 @@ export default async function LocaleLayout({
 
   const messages = await getMessages({ locale });
   const user = await getCurrentUser();
-  const blogCategories: Array<{ _id: string; title: string }> = await client
-    .withConfig({ useCdn: false })
-    .fetch(
-      groq`
-        *[_type == "category"] | order(orderRank asc) {
-          _id,
-          title
-        }
-      `
-    );
+  const blogCategories = await getCachedBlogCategories();
 
   const userExists = Boolean(user);
   const enableAdmin =

frontend/app/api/blog-author/route.ts

@@ -32,9 +32,7 @@ export async function GET(request: Request) {
     return NextResponse.json(null, { status: 400 });
   }
 
-  const author = await client
-    .withConfig({ useCdn: false })
-    .fetch(authorQuery, { name, locale });
+  const author = await client.fetch(authorQuery, { name, locale });
 
   return NextResponse.json(author || null, {
     headers: { 'Cache-Control': 'no-store' },

frontend/app/layout.tsx

@@ -1,7 +1,6 @@
 import './globals.css';
 
 import { Analytics } from '@vercel/analytics/next';
-import { SpeedInsights } from '@vercel/speed-insights/next';
 import type { Metadata } from 'next';
 import { Geist, Geist_Mono } from 'next/font/google';
 
@@ -90,8 +89,7 @@ export default function RootLayout({
         className={`${geistSans.variable} ${geistMono.variable} bg-gray-50 text-gray-900 antialiased transition-colors duration-300 dark:bg-neutral-950 dark:text-gray-100`}
       >
         {children}
-        <Analytics />
-        <SpeedInsights />
+        {process.env.NODE_ENV === 'production' && <Analytics />}
       </body>
     </html>
   );

frontend/client.ts

@@ -3,6 +3,6 @@ import { createClient } from '@sanity/client';
 export const client = createClient({
   projectId: '6y9ive6v',
   dataset: 'production',
-  useCdn: false,
+  useCdn: true,
   apiVersion: '2025-11-29',
 });