DevFlow

Kareem Ahmed

Next.js – SSR + Client Revalidation for Authenticated Data

asked 5 months ago

I’m working on a SaaS dashboard using Next.js 14 App Router.

The dashboard needs to:

Show the user profile (from /api/me)
Show analytics stats (from /api/analytics)
Both APIs require JWT authentication stored in an HTTP-only cookie
Profile data is fine to load once on SSR, but analytics stats need to stay updated on the client every ~30s

My current approach:

1// app/dashboard/page.tsx (Server Component)
2import Profile from "./Profile";
3import Analytics from "./Analytics";
4
5export default async function DashboardPage() {
6  const profileRes = await fetch(`${process.env.API_URL}/me`, {
7    headers: { cookie: cookies().toString() },
8    cache: "no-store"
9  });
10  const profile = await profileRes.json();
11
12  return (
13    <>
14      <Profile data={profile} />
15      <Analytics /> {/* Client Component */}
16    </>
17  );
18}

1// app/dashboard/page.tsx (Server Component)
2import Profile from "./Profile";
3import Analytics from "./Analytics";
4
5export default async function DashboardPage() {
6  const profileRes = await fetch(`${process.env.API_URL}/me`, {
7    headers: { cookie: cookies().toString() },
8    cache: "no-store"
9  });
10  const profile = await profileRes.json();
11
12  return (
13    <>
14      <Profile data={profile} />
15      <Analytics /> {/* Client Component */}
16    </>
17  );
18}

1// app/dashboard/Analytics.tsx (Client Component)
2"use client";
3import useSWR from "swr";
4
5export default function Analytics() {
6  const { data, error, isLoading } = useSWR("/api/analytics", fetcher, {
7    refreshInterval: 30000
8  });
9
10  if (isLoading) return <p>Loading...</p>;
11  if (error) return <p>Error loading analytics</p>;
12
13  return <div>{JSON.stringify(data)}</div>;
14}

1// app/dashboard/Analytics.tsx (Client Component)
2"use client";
3import useSWR from "swr";
4
5export default function Analytics() {
6  const { data, error, isLoading } = useSWR("/api/analytics", fetcher, {
7    refreshInterval: 30000
8  });
9
10  if (isLoading) return <p>Loading...</p>;
11  if (error) return <p>Error loading analytics</p>;
12
13  return <div>{JSON.stringify(data)}</div>;
14}

The issue: This works, but:

I’m double fetching analytics data — once during SSR (when rendering the client component shell) and once immediately on hydration.
If the user’s JWT expires while they’re browsing, SWR keeps trying to fetch, but my API responds 401 and the UI just shows an error — I want it to redirect to /login automatically on both SSR and client.
I’m not sure if this is the most performant way to handle authenticated SSR + client revalidation in App Router.

Question:

How can I fetch the initial analytics data on the server and hydrate it into the client component without double fetching?
What’s the best way to handle JWT expiry in both SSR and client contexts in the App Router?
Any performance tips to avoid unnecessary re-renders and reduce API calls in this setup?

nextjs

1 Answer

Jhon doe

• answered 5 months ago

Addressing Your Next.js 14 Setup

Hey, great setup so far! Let's refine it for efficiency. I'll cover your key questions step by step.

1. Avoid Double Fetching Analytics Data

Fetch analytics on the server in your page component and pass it as a prop to the client component. This hydrates the initial data without re-fetching on the client.

1// app/dashboard/page.tsx
2import Analytics from "./Analytics";
3
4export default async function DashboardPage() {
5  const profileRes = await fetch(/* profile fetch */);
6  const analyticsRes = await fetch(`${process.env.API_URL}/analytics`, { headers: { cookie: cookies().toString() } });
7  const analyticsData = await analyticsRes.json();  // Handle errors
8
9  return (
10    <>
11      <Profile data={profile} />
12      <Analytics initialData={analyticsData} />
13    </>
14  );
15}
16
17// app/dashboard/Analytics.tsx
18"use client";
19import useSWR from "swr";
20
21export default function Analytics({ initialData }) {
22  const { data } = useSWR("/api/analytics", fetcher, {
23    refreshInterval: 30000,
24    initialData  // Hydrate with server data
25  });
26  // Render logic
27}

1// app/dashboard/page.tsx
2import Analytics from "./Analytics";
3
4export default async function DashboardPage() {
5  const profileRes = await fetch(/* profile fetch */);
6  const analyticsRes = await fetch(`${process.env.API_URL}/analytics`, { headers: { cookie: cookies().toString() } });
7  const analyticsData = await analyticsRes.json();  // Handle errors
8
9  return (
10    <>
11      <Profile data={profile} />
12      <Analytics initialData={analyticsData} />
13    </>
14  );
15}
16
17// app/dashboard/Analytics.tsx
18"use client";
19import useSWR from "swr";
20
21export default function Analytics({ initialData }) {
22  const { data } = useSWR("/api/analytics", fetcher, {
23    refreshInterval: 30000,
24    initialData  // Hydrate with server data
25  });
26  // Render logic
27}

This cuts the initial client fetch.

Write your answer here