Server side SWR

[vitalijalbu]

Hi guys, anyone can share a real example of SWR usage in SSR(app dir)
Thanks

[aniruddhaadak80]

@vitalijalbu SWR is primarily a Client-Side Fetching library.
In the App Router (SSR) world, the pattern is:

1. Fetch initial data on the Server Component (standard await fetch).
2. Pass that data as fallback to the client SWRConfig.
3. Client component uses useSWR which picks up the fallback instantly.

// Server Component
const data = await getData();
return (
  <SWRConfig value={{ fallback: { ''/api/user'': data } }}>
    <ClientProfile />
  </SWRConfig>
)

[devhorizon999]

SWR itself still runs in a Client Component. In the App Router, I usually do the initial fetch in a Server Component, then pass that result into SWR as fallback.

A minimal example:

// app/users/page.tsx
import { SWRConfig } from "swr";
import UsersClient from "./UsersClient";

async function getUsers() {
  const res = await fetch("https://jsonplaceholder.typicode.com/users", {
    // choose whatever caching behavior you need
    cache: "no-store",
  });

  if (!res.ok) {
    throw new Error("Failed to fetch users");
  }

  return res.json();
}

export default async function UsersPage() {
  const users = await getUsers();

  return (
    <SWRConfig
      value={{
        fallback: {
          "/api/users": users,
        },
      }}
    >
      <UsersClient />
    </SWRConfig>
  );
}