trying to SSR the data

Author: prazgaitis

.claude/napkin.md

@@ -6,14 +6,20 @@
 | 2026-02-11 | self | Ran `ls` before reading napkin (again) | Always read `.claude/napkin.md` before any other command |
 | 2026-02-10 | self | Ran `ls` before reading napkin | Always read `.claude/napkin.md` before any other command |
 | 2026-02-10 | self | Used backticks in a shell-quoted PR body so the shell tried to execute `turbo` | Use a heredoc or escape backticks when passing PR bodies to shell commands |
+| 2026-02-13 | self | Assumed mobile perf issue was mostly JS parse cost before checking runtime endpoints | Verify browser-facing service URLs (`NEXT_PUBLIC_*`) first; loopback hosts break phone/LAN query paths |
+| 2026-02-13 | self | Broke a TS function signature during a broad apply_patch edit | Re-open edited file immediately after structural patches before running full checks |
+| 2026-02-13 | self | Ran `sed` on a bracketed path without quoting (`[id]`) and zsh globbed it | Quote paths containing `[]` (e.g., `'apps/web/app/challenges/[id]/dashboard/page.tsx'`) |
 
 ## User Preferences
 - Hide navbar on full-screen flow pages (invite, dashboard, admin) via `ConditionalHeader` patterns + remove `page-with-header` class
+- Avoid LAN-specific runtime rewrites in product code unless explicitly requested
 
 ## Patterns That Work
 - Convex queries can join related data inline (e.g., activity types + categories in one query)
 - `conditional-header.tsx` DASHBOARD_LAYOUT_PATTERNS array controls navbar visibility per route
 - Admin console sidebar approach was scrapped — revisit admin nav design in the future
+- Mobile feed performance improves by skipping non-critical per-item work (engagement count scans and media URL generation) on initial query
+- For mobile perceived performance, SSR the first feed page from server auth and then let client `usePaginatedQuery` take over for realtime/pagination
 
 ## Patterns That Don't Work
 - Deriving env vars inside `convex deploy --cmd` shell strings — escaping hell, fragile, hard to debug. Instead, derive them in `next.config.ts` which runs at build time and can set `process.env` before Next.js compiles.
@@ -23,4 +29,4 @@
 - `page-with-header` CSS class = `pt-16` to offset fixed navbar
 - Seed data lives in `packages/backend/actions/seed.ts`
 - Schema changes auto-deploy locally via `pnpm dev`
-| 2026-02-11 | self | Spent 10 commits trying to derive env vars inside `convex deploy --cmd` shell strings | Don't fight shell escaping — derive env vars in `next.config.ts` instead (runs at build time, sets `process.env`) |
+- Dev-only third-party scripts should be opt-in; avoid `beforeInteractive` for non-critical tooling (e.g., `react-grab`)

apps/web/app/challenges/[id]/dashboard/page.tsx

@@ -1,4 +1,5 @@
 import { notFound, redirect } from "next/navigation";
+import { headers } from "next/headers";
 import { getConvexClient } from "@/lib/convex-server";
 import { api } from "@repo/backend";
 import type { Id } from "@repo/backend/_generated/dataModel";
@@ -7,7 +8,7 @@ import { ActivityFeed } from "@/components/dashboard/activity-feed";
 import { OnboardingCard } from "@/components/dashboard/onboarding-card";
 import { type ChallengeSummary } from "@/components/dashboard/challenge-realtime-context";
 import { getCurrentUser } from "@/lib/auth";
-import { getToken } from "@/lib/server-auth";
+import { fetchAuthQuery, getToken } from "@/lib/server-auth";
 import { DashboardLayoutWrapper } from "../notifications/dashboard-layout-wrapper";
 import { dateOnlyToUtcMs } from "@/lib/date-only";
 
@@ -17,6 +18,41 @@ interface ChallengeDashboardPageProps {
   params: Promise<{ id: string }>;
 }
 
+interface InitialFeedResponse {
+  page: Array<{
+    activity: {
+      _id: string;
+      notes: string | null;
+      pointsEarned: number;
+      loggedDate: number;
+      createdAt: number;
+      metrics?: Record<string, unknown>;
+      triggeredBonuses?: Array<{
+        metric: string;
+        threshold: number;
+        bonusPoints: number;
+        description: string;
+      }>;
+    };
+    user: {
+      id: string;
+      name: string | null;
+      username: string;
+      avatarUrl: string | null;
+    } | null;
+    activityType: {
+      id: string | null;
+      name: string | null;
+      categoryId: string | null;
+      scoringConfig?: Record<string, unknown>;
+    } | null;
+    likes: number;
+    comments: number;
+    likedByUser: boolean;
+    mediaUrls: string[];
+  }>;
+}
+
 export default async function ChallengeDashboardPage({
   params,
 }: ChallengeDashboardPageProps) {
@@ -39,11 +75,30 @@ export default async function ChallengeDashboardPage({
   }
 
   const challengeId = id as Id<"challenges">;
+  const userAgent = (await headers()).get("user-agent") ?? "";
+  const isMobileRequest = /Android|iPhone|iPad|iPod|Mobile|CriOS|FxiOS/i.test(
+    userAgent,
+  );
 
-  const dashboardData = await convex.query(api.queries.challenges.getDashboardData, {
-    challengeId,
-    userId: user._id,
-  });
+  const [dashboardData, initialFeed] = await Promise.all([
+    convex.query(api.queries.challenges.getDashboardData, {
+      challengeId,
+      userId: user._id,
+    }),
+    fetchAuthQuery<InitialFeedResponse>(api.queries.activities.getChallengeFeed, {
+      challengeId,
+      followingOnly: false,
+      includeEngagementCounts: !isMobileRequest,
+      includeMediaUrls: !isMobileRequest,
+      paginationOpts: {
+        numItems: 10,
+        cursor: null,
+      },
+    }).catch((error) => {
+      console.error("[perf] dashboard initial feed preload failed", error);
+      return { page: [] };
+    }),
+  ]);
 
   console.log(
     `[perf] dashboard page total: ${Math.round(performance.now() - dashStart)}ms`,
@@ -99,7 +154,11 @@ export default async function ChallengeDashboardPage({
     >
       <div className="mx-auto max-w-2xl px-4 py-6 space-y-4">
         <OnboardingCard challengeId={challenge.id} userId={user._id} />
-        <ActivityFeed challengeId={challenge.id} />
+        <ActivityFeed
+          challengeId={challenge.id}
+          initialItems={initialFeed.page}
+          initialLightweightMode={isMobileRequest}
+        />
       </div>
     </DashboardLayoutWrapper>
   );

apps/web/app/challenges/page.tsx

@@ -1,6 +1,8 @@
 import { redirect } from "next/navigation";
 import { ChallengesGrid } from "@/components/challenges/challenges-grid";
 import { getCurrentUser } from "@/lib/auth";
+import { getConvexClient } from "@/lib/convex-server";
+import { api } from "@repo/backend";
 
 export const dynamic = "force-dynamic";
 
@@ -11,6 +13,20 @@ export default async function ChallengesPage() {
     redirect("/sign-in");
   }
 
+  const challengesStart = performance.now();
+  const challenges = await getConvexClient()
+    .query(api.queries.challenges.listPublic, {
+      limit: 20,
+      offset: 0,
+    })
+    .catch((error) => {
+      console.error("[perf] challenges listPublic failed", error);
+      return null;
+    });
+  console.log(
+    `[perf] challenges listPublic: ${Math.round(performance.now() - challengesStart)}ms`,
+  );
+
   return (
     <main className="min-h-screen bg-background text-foreground page-with-header">
       <div className="container mx-auto px-6 py-12">
@@ -26,7 +42,7 @@ export default async function ChallengesPage() {
           </p>
         </div>
 
-        <ChallengesGrid />
+        <ChallengesGrid challenges={challenges} />
       </div>
     </main>
   );

apps/web/app/layout.tsx

@@ -36,6 +36,10 @@ export default async function RootLayout({
 }: Readonly<{
   children: React.ReactNode;
 }>) {
+  const enableDevCursorScripts =
+    process.env.NODE_ENV === "development" &&
+    process.env.NEXT_PUBLIC_ENABLE_REACT_GRAB === "1";
+
   const layoutStart = performance.now();
   const [token, preloadedUser] = await Promise.all([
     getToken(),
@@ -47,14 +51,14 @@ export default async function RootLayout({
     <ConvexProviderWrapper initialToken={token ?? null}>
       <html lang="en">
       <head>
-        {process.env.NODE_ENV === "development" && (
+        {enableDevCursorScripts && (
           <Script
             src="//unpkg.com/react-grab/dist/index.global.js"
             crossOrigin="anonymous"
-            strategy="beforeInteractive"
+            strategy="lazyOnload"
           />
         )}
-        {process.env.NODE_ENV === "development" && (
+        {enableDevCursorScripts && (
           <Script
             src="//unpkg.com/@react-grab/cursor/dist/client.global.js"
             strategy="lazyOnload"

apps/web/components/challenges/challenges-grid.tsx

@@ -1,7 +1,3 @@
-"use client";
-
-import { useQuery } from "convex/react";
-import { api } from "@repo/backend";
 import Link from "next/link";
 import { dateOnlyToUtcMs, formatDateShortFromDateOnly } from "@/lib/date-only";
 
@@ -71,45 +67,16 @@ function ChallengeCard({ challenge }: { challenge: Challenge }) {
   );
 }
 
-export function ChallengesGrid() {
-  const challenges = useQuery(api.queries.challenges.listPublic, {
-    limit: 20,
-    offset: 0,
-  });
-
-  const loading = challenges === undefined;
-  const error = challenges === null ? "Failed to load challenges" : null;
-
-  if (loading) {
-    return (
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-        {Array.from({ length: 6 }).map((_, i) => (
-          <div
-            key={i}
-            className="rounded-2xl bg-zinc-900/50 border border-zinc-800 p-6 animate-pulse"
-          >
-            <div className="mb-4 flex items-center justify-between">
-              <div className="h-4 bg-zinc-800 rounded w-16" />
-              <div className="h-4 bg-zinc-800 rounded w-20" />
-            </div>
-            <div className="h-6 bg-zinc-800 rounded mb-2" />
-            <div className="h-4 bg-zinc-800 rounded mb-4 w-3/4" />
-            <div className="flex items-center justify-between">
-              <div className="h-3 bg-zinc-800 rounded w-20" />
-              <div className="h-3 bg-zinc-800 rounded w-3" />
-              <div className="h-3 bg-zinc-800 rounded w-20" />
-            </div>
-          </div>
-        ))}
-      </div>
-    );
-  }
-
-  if (error) {
+export function ChallengesGrid({
+  challenges,
+}: {
+  challenges: Challenge[] | null;
+}) {
+  if (challenges === null) {
     return (
       <div className="text-center py-12">
         <div className="text-red-400 text-lg mb-2">Failed to load challenges</div>
-        <p className="text-zinc-500">{error}</p>
+        <p className="text-zinc-500">Try refreshing the page.</p>
       </div>
     );
   }