Next.js 13 Crash Course Tutorial #6 - Fetching & Revalidating Data
Вставка
- Опубліковано 20 сер 2024
- In this Next 13 tutorial series, you'll learn the basics of Next.js to make a simple project, using the new app router & server components.
🚀🥷🏼Access the entire Next.js 13 Masterclass course on Net Ninja Pro:
netninja.dev/p...
➡️ Use promo code NEXTNINJA50 for 50% off!
📂🥷🏼 Access the course files on GitHub:
github.com/iam...
📂🥷🏼 CSS File from course files:
github.com/iam...
💻🥷🏼 React Tutorial:
netninja.dev/p...
🔗🥷🏼 Next.js docs - nextjs.org/docs
🔗🥷🏼 CSS modules in Next.js - nextjs.org/doc...
🔗🥷🏼 VS Code - code.visualstu...
Add this to "scripts" in your package.json
"server": "json-server --watch --port 4000 ./_data/db.json",
and then you can run `npm run server` to make it easier to restart the json-server without having to remember the command
good!
i got an error and it says "ps1 cannot be loaded because running scripts is disabled on this system." and when i add that in my script, it work perfectly, how does it occur?
Im very happy I have finally found a really good youtuber who does the tutorial videos for the beginners like me. Please keep posting. I have subscribed
An excellent "companion" to the "official" next.js tutorial.
I received the "json-server : The term 'json-server' is not recognized as the name of a cmdlet,
function, script file, or operable program." error, but I've managed to solve it.
So if anyone runs into this issue in the future, just add "npx" in front of "json-server" in the terminal
I'm grateful for your content. Keep inspiring us!
Thanks! I appreciate that! :)
I love the Zelda references in the ticket body lol
That is fine and it works locally but I have an issue using a dynamic baseUrl when building for some reason.
The way caching works is the one thing I don't like the most about app router so far. Caching should always be opt-in, never opt-out. That's a major footgun if you ask me. But thank you for the info on revalidating. App router seems to be looking good other than this so far.
Thank you - looking forward to the next part
Is there a way to revalidate with axios?
should have used next route/API for serving data ?
Thank you for this.
revalidate is not working for me, it fetches new data everytime
your videos are helping me a lot
Awesome!
Got problems with caching and revalidation, after some troubleshooting i figured out that in my network tab disable cache was enabled)
Hey, I am not using fetch in mmy server compoennt instead I am calling a function which verify the cookie and return decoded data. And this data is what I display in the page.
Now, how to revalidate this ?
Currently, even though from client component I do router.push("/"), it still shows me the old state "User not logged in". Only after I manually go to that "/" page that I am shown the updated data.
Please help me out here.
Even after 30 seconds Next was still serving up the cached data even though i refreshed more than once however after reading a comment about the disable cached setting in the Network tab being enabled i opened it up and disable it and then refreshed and then it worked - i could only see two tickets so if your still seeing the cached data like i was after 30 seconds even after refreshing multiple times - open the Network tab and disabled your cache
Awesome tutorial as always !! 🥷
in some cases (fetch) failed when i'm using in SSR ,but in client side rendering. it works fine ,i'm fetching some images from api
Could you please add a NextAuth v4, and 0auth tutorial to your Next 13 Course? That's the only thing it is missing for me to fully understand how to complete my project. You are a great teacher!!
Hi Jay, thanks for your comment :) you can find the Next 13 Masterclass on the Net Ninja pro site. It goes much deeper than the crash course: netninja.dev/p/next-13-masterclass thanks again!
@@NetNinja I saw that! I will be getting it. But I need to know, does it cover authentication? That is what u need ti know now.
it does, just open the link he sent you and go through the curriculum. You will see entire section on authentication.@@ZenchantLive
@@ZenchantLive I think it uses supabase log in system.
Can I use axios?
keep it up you awesome MAAN!
If you're fetching data as responses from the openAI API and want to keep an open request from the frontend (nextjs) to the backend (django), is it possible to do it like in broadcasting or streaming? Do you know what is the most common and efficient case? Thanks and cheers!
Thanks for this video.
Thank brother your explanation is very good
could you please guide me which one is better to ues, functional compnents or arrow components in react
i come to watch net ninja just for his "whoohoo" when he show his code on his repo XD jajaja
so the data is updated only after refreshing the page?
We can use "async" in function TicketList because it's a Server Component, right? because we cannot create Async Client Components.
how do i revalidate data if im using something like appwrite sdk? all my data is cached and it doesn't refetch
I just bought the complete course! Is there a way to get the transcripts for the videos on the course site (I use transcripts a lot on UA-cam when studying, e.g. for searching, and it also makes it easier for me to follow along since English is not my native language)? Thank you very much in advance!!
What font are you using bro in vscode could you share it ?
tickets not showing.
Whats the best way to import the json data from a file using node?
Great video!
At 11:30 you are explaining how to benefit from the extension of the fetch API.
How can I benefit from it too if I use a function that is stored in another « services » folder?
Thx
Hello, At first. Your larning seasons are great, I try to reproduce your example in TypeScript for improving my self learning. In the chapter 6 I have a problem. I prefer to use the arrow function syntax while coding. When I write the TicketList with arrow functions, there were no tickets fetched by the server. It will also not displayed the tickets.length === 0 case. Write the code like described in the course, it works. Is there a difference between the two syntax in Next JS (exept the this keyword)? My main seen difference in the arrow-code is the export default at the end of the TicketList.tsx. Thanks a lot for your help :)
lovely content ^_^ , so revalidate cashed in server right ? not user browser :)
I can't retrieve fetch data Unhandled Runtime Error
Error: fetch failed
me too! im getting a TypeError: fetch failed
: (
@@migueltejeda3869 use service placeholder json
Check out my comment above ;)
What extension do you use to get Tailwind autocomplete?
is tutorial # 7 available yet?
Does your course have English subtitles?
it is in english
I think that by default all components are server components in version 13 and we can define them outside the app directory they don't have to be inside the app directory and they're still server components.
Am I right?
i thought that just de components inside the app directoy are server components, but I may be wrong
thank you, I'm getting this error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.
next : 13.5.6 with page directory
Wrong thumbnail! 😊
Nice spot, sorted :)
the fetch api code here will cause the infinite loop on keep calling the api again and again every 2 sec.
self answer back my question.
if put Sever Components with 'fetch' in to Client Component with fetch = will have infinite loop,
the correct way is make the whole page Server Component, only the button etc as Client Components = will solve the infinite loop
So, what is the difference between cache: 'no-store' and revalidate: 0?
same question
Puting a fetch function inside some component is imho absolute violation of BE architecture... I may be too sensitive, but this is insane...
I'm facing issues with caching. No matter what I set, Next.js is caching the entire page. I am outputting a Math.random() number on the page and even after multiple refreshes, the number does not change. What am I doing wrong?
Add no-cache to your code.