Usage with Next.js – SWR
SWR is a React Hooks library for data fetching. SWR first returns the data from cache (stale), then sends the fetch request (revalidate), and finally comes with the up-to-date data again.
--- title: Usage with Next.js type: integration summary: Integrate SWR with Next.js for server-side rendering and static generation. prerequisites: - /docs/getting-started related: - /docs/prefetching - /docs/advanced/cache --- # Usage with Next.js ## App Router ### Server Components In Next.js App Router, all components are React Server Components (RSC) by default. **You can import SWRConfig and the key serialization APIs from SWR in RSC.** ```tsx filename="app/page.tsx" copy import { unstable_serialize } from 'swr' // ✅ Available in server components import { unstable_serialize as infinite_u
Explore this link on the map →related reading
- Getting Started: Fetching Data | Next.jsnextjs.org
- Getting Started: Fetching Data | Next.jsnextjs.org
- Getting Started: Caching | Next.jsnextjs.org
- Getting Started: Fetching Data | Next.jsnextjs.org
- Getting Started: Fetching Data | Next.jsnextjs.org
- Making Sense of React Server Components • Josh W. Comeaujoshwcomeau.com
- Cursor Docs — Agent, Rules, MCP, Skills & CLIdocs.cursor.com
- How to fetch data in React [2024] - Robin Wieruchrobinwieruch.de
- Building a single-page application with Next.js and React Routercolinhacks.com
- App Router: Streaming | Next.jsnextjs.org
- Getting Started: Server and Client Components | Next.jsnextjs.org
- File-system conventions: loading.js | Next.jsnextjs.org