Fetch json data from a url in React (and NextJS) - 3 easy ways

Let's look at 3 ways to fetch JSON data from an API using the Fetch API and NextJS's getServerSideProps. I'll show you all 3 options, any of which you can use to get data from JSON and display it on your page.
This is very common especially for displaying dynamic content from say a blog or portfolio. There is hardly a project today that doesn't require some sort of fetching from an external API. Let's go.
CONNECT ON MY DISCORD:
/ discord
Twitter: / omarel
GitHub: github.com/oel...
#fetchdata #react #nextjs #getserversideprops

[@lucaslopes1260]

Awesome video, bro! The channel has few subscribers so far, but I can see it will become huge. Keep up the good work!

[@SuperValza]

Best video so far about getServerSideProps. Keep up good work.
I assume you will get many subscription if you will continue with such type of videos. Basic stuff but super usefull. Thanks.

[@siavashakrami3444]

Thank you! I took my first step into React world today. Cheers!

[@thedigitalceo]

Nice! Go for it and don’t look back 😎

[@derickio]

I also want to point out that the advantage of getServerSideProps() is that it runs on server-side code --- so if your API response doesn't have "Access-Control-Allow-Origin" in its header, then it will still work.
If you try to do the other two options with an "unfriendly API" you will run into a CORS error... which can be really frustrating.

[@mynameisibukun]

thank you so much!!!!

[@IsThisBenton]

Great video, thanks

[@matees2162]

thank you so much

[@cristeaadrian9682]

thank you

[@jaypatel6775]

Nice explanation. Please provide code that you write in this video

[@KonstantinM-nuu]

If I may ask something again.. I want to map over the data but define an addtional requirement like "completed === true". So just return all titles when the property of completed is true. Can someone help? Thanks :)

[@nayablone215]

thats great, one question , how can you pull a data if its coming from GRAHPHQL querry ? will the same method work or do we need to use different method? Thank you!

[@KonstantinM-nuu]

Sorry to bother, but why do I get the error .map is not a function? Thanks for any advise!

[@thedigitalceo]

I imagine something is wrong with the array variable you are trying to map. Maybe it’s undefined or not an array. That’s my guess. Try to comment out the map and console log the array first and see what it shows.