This comprehensive course will guide you through the easiest and most modern approach to fetching data and managing server state using SWR (stale while revalidate) in React or Next.js projects. As recommended by Vercel for Next.js projects, SWR is an ideal choice. If you're solely using React, you can still follow along seamlessly.
This concise yet comprehensive tutorial will delve into all the concepts of the SWR or State While Revalidate library. I hope you enjoy!😊
📚 Materials/References:
Project Github Repository: https://github.com/codegenixdev/swr-tutorial
Fake Server Backend Repository: https://github.com/codegenixdev/swr-backend
Tanstack query (React query) Full tutorial: https://www.youtube.com/watch?v=3e-higRXoaM&t=3126s
SWR official website: https://swr.vercel.app/
⭐️ Contents ⭐
⌨️ 00:00 Intro
⌨️ 00:33 What is SWR or Stale While Revalidate?
⌨️ 01:22 Setup
⌨️ 02:40 Setup the fake mock backend
⌨️ 03:10 Old way of fetching data from server in react
⌨️ 07:00 First SWR query using useSWR hook
⌨️ 09:00 Create fetcher function
⌨️ 11:10 SWRConfig provider
⌨️ 13:10 Global config
⌨️ 15:15 Create first query function
⌨️ 19:20 Chained or dependable queries
⌨️ 24:30 Mutations (life cycles, callbacks, ...)
⌨️ 30:00 useSWRMutation
⌨️ 35:40 Passing data to mutations function and trigger
⌨️ 37:00 Optimistic UI and data
⌨️ 39:07 RollBackOnError
⌨️ 41:10 Middlewares
⌨️ 43:40 Pagination
⌨️ 50:10 Infinite scrolling (useSWRInfinite)
🎨 My Editor Settings:
- JetBrains Mono
- Dracula
#swr #nextjs #tanstack-query #react-query