Add "client-only"

[shuding]

SWR is highly depending on client React features like state, context, effect, etc. so it can't be used in server components. The best way to avoid this is to add a "client-only" import to the core.

[zenflow]

Then you need a different API for fetching data in server components. ☹️

[shuding]

SWR can't run on the server side (e.g. during SSR), that's the case from the beginning. And server components won't be hydrated on the client, so everything inside them will not run on the browser.

One way to think about it is that you can't run useSWR inside getServerSideProps.

[adbutterfield]

Almost a year old, but I figured to comment, because I was confused about how useSWR works server side.
You can see in the docs here: https://swr.vercel.app/docs/with-nextjs#pre-rendering-with-default-data
useSWR hooks do get called server side, and will use data provided to fallback prop of SWRConfig if there is a matching key. The data is also used for initial hydration. useSWR with then refetch on mount to make sure you have the most recent data.

[Archivedent1]

To my understanding the Article component in your example is not server-side, same with the SWRConfig wrapper.
The only thing running server-side is the getStaticProps function. Expected behavior of page router.

To achieve the same result for app directory, you could create a HOC for SWRConfig that is client-side, pass fallback to that component, and wrap any child component that needs that fallback data in it.

SWRFallbackProvider.tsx (client)

'use client';

import { ReactNode } from 'react';
import { SWRConfig } from 'swr';

export interface SWRFallbackProviderProps {
    fallback: Record<string, any>;
    children: ReactNode;
}

export default function SWRFallbackProvider(props: SWRFallbackProviderProps) {
    const { fallback, children } = props;

    return <SWRConfig value={{ fallback }} children={children} />;
}

Then in page.tsx (server)

export default async function Page() {
    const data = await getData();

    // Example fallback object with complex key
    const fallback = {
        [unstable_serialize(['/api', { page: 1, limit: 12 }])]: data
    }

    return (
        <SWRFallbackProvider fallback={fallback}>
            <ProductDetail />
        </SWRFallbackProvider>
    )
}

This covers my usecase.

The children of SWRFallbackProvider can be server or client components, but only client components will be able to use
useSWR( (['/product', { page: 1, perPage: 12 }]) which would be provided with the fallback data, and then re-fetch to refresh the data.

Any other server components (children of SWRFallbackProvider or not) can simply fetch the data again const data = await getData(); as that request is cached server-side or simply pass the data down as prop.