useSWR not working with server components. Error: Unsupported server component type: {...}

[saurabhguptarock]

What version of Next.js are you using?

12.0.5-canary.5

What version of Node.js are you using?

14.18.1

What browser are you using?

Chrome

What operating system are you using?

macOS

How are you deploying your application?

Vercel

Describe the Bug

Hooks are not supported in server components.
useSwr not working with server components using suspense.

Expected Behavior

The component should not throw error

To Reproduce

const { data: coupons } = useSwr<CouponsProps[]>(
    "coupons",
    () => getCoupons(),
    { suspense: true }
  );

[lachlanjc]

SWR cannot be used in server components: #42249 (comment)

[shuding]

Currently, SWR is designed for client-side data fetching (can be used in a client "use client" component). It leverages React's Context, State, Effect, etc. to achieve the stale-while-revalidate and caching experience. All those are not necessary in a server only environment, and you should directly go with the use hook there (check related docs).

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.