Use Server Components for initial, SEO-relevant, or server-owned data: fetch close to the consuming component, keep secrets on the server, and use cache/revalidation policies. Use SWR for live, per-user, or frequently refreshed client data that benefits from focus revalidation, polling, or optimistic client updates. Do not mirror server data into `useState` with `useEffect`; choose SWR/React Query for client server-state behavior and keep UI-only state local.
Installs into .claude/skills of the current project.
Are you the author of Nextjs Data Fetching?
Add the live security badge to your README. It updates with every re-scan.
[](https://www.skillsdirectory.com/skills/hoangnguyen0403-nextjs-data-fetching-533a3da4)
Use Server Components for initial, SEO-relevant, or server-owned data: fetch close to the consuming component, keep secrets on the server, and use cache/revalidation policies. Use SWR for live, per-user, or frequently refreshed client data that benefits from focus revalidation, polling, or optimistic client updates. Do not mirror server data into `useState` with `useEffect`; choose SWR/React Query for client server-state behavior and keep UI-only state local.