Next.js Tutorial - 17 - Static Generation with getStaticProps

[@Codevolution]

Give Taskade a try - www.taskade.com/ Use Coupon Code 'CODEVOLUTION' for 50% OFF lifetime discount applied to any upgraded subscription 1st 100 viewers to contact via www.taskade.com/contact get the upgrade for free!

[@nikhilraj4098]

I love how you take things slowly, it really helps. I'm watching this despite Next 13 stable already being out. Thanks for such good videos, I hope you keep making them this way and grow stronger.

[@mdtasib4058]

Hey! I'm from Bangladesh. I really love this channel.

[@md.sharifulhoque8689]

me 2

[@Jean-yk9eo]

Main, Thank you a lot. I was a bit confused by this and the last three videos helped me to understand what is going on,

[@sergekamga4512]

This dude is an awesome 😢teacher

[@shahreazneeloy2119]

Great work man. Respect.

[@haha7836hahah]

What if i have a database query in getStaticProps method and the data in database updates after building. Will the data in props update or will It still show the old data

[@NIKHILYADAV-xm9ql]

Could we don't use useEffect or redux to fetch data and please elaborate basic difference between static Prop and side effect data fetching thanks

[@learnearn8721]

My guru vishwas thanks a lot

[@godwinikechukwu3129]

Great tutorial..

[@parasbuda9174]

sir as you have mentioned that we can use getStaticProp for the product listing page but getStaticProp fetch the data at build time so when the product list is added with another product.will that previous build will work or we have to make a new build for that?

[@bhargavaprabureddym9693]

Inside the getStaticProp method, we are fetching some data that can be updated anytime, We are instructing the getStaticProp method to fetch data from the external server, and pass it as props to the default function. The data can be anything like that, it can return 3 products or even 100 products, it depends on the data available in the external server. For that, we don't need to build it every time, if we do so there is no sense in using Next JS.

[@user-xf5wx7uq2z]

@@bhargavaprabureddym9693 Since JSON is already loaded during build time, shall we not need to rebuild it if some more data is added to the API endpoint?

[@abinashmandal6202]

If we have used getStaticProps, We have to rebuild every time data changes to get the updated data

[@pravinchukkala545]

I got the answer, just search in google for how getStaticProps works you will get the answer

[@vampirekabir]

finally i understand this

[@mdabuhanif357]

Thank you for your fantastic playlist. Have we missed Static Generation without data video or something else? @Codevolution

[@Ibrahim__123]

During the video, he mentioned that, that is the default way Next js works ..so if we are not fetching any external data...the page statically pre-render for better performance and SEO

[@PM-rs4te]

So, when you have data that is seldom changes, you can go this route but if its constantly changing, use useEffect? Did I understand this correctly??

[@RubberDuckCoding]

VERY NICE!

[@orincywhytedesigns]

This was so cool …

[@sunveerahman1974]

Sir , Please Show , How I can Integrate Material Ui with Next js

[@ryanspeciale4451]

What do you mean

[@ryanspeciale4451]

Install material ui and import the components....

[@robertphillips124714]

Would this really be used for product pages in the real world? When my product database is updated, I'd need to rebuild and redeploy, right?

[@manasjoshi7037]

same doubt..do you find any answer?

[@techupdate03]

I have a doubt. That async function is always return promise. To hande that we generally use .then . catch, then here how we get the props directly without handle the promise. Can anyone explain.

[@aaqibrasool6341]

I got just one issue, my CSS is not getting applied to statically generated pages at the first load in the network tab.

[@rhul0017]

whats build time in production means? u mention it around 3:00

[@abdulbasir8740]

For production builds, a page will be pre-rendered once when we run the build command. In development mode, the page is pre-rendered for every request you make.

[@modernNeanderthal800]

Now in 2024 we should be pushing for next 13 / 14, but if you are learning next 12 for a job understand that "getStaticProps" wants you to return an object. Try this return {props: { users: users } } or return {props: {data: users}}

[@mohantee]

So, the user names would not have shown in the page source if we had used useEffect() inside the component to fetch the data instead of getStaticProps()?

[@sharayuu]

I think it would have. useEffect also works for it. The we would have used useState as well, to set the users.

[@amigaanguy]

Whenever I run this basic code , I getting ECONNRESET error, but data fetching working fine with useEffect().

[@meraichaitali8421]

Hey, I am getting this error "Failed to load SWC binary for win32/ia32". This error is raising, whenever I use like getstaticprops and related server side functions. I have applied this solution but this is not giving any longer support: Step 1. add this line or edit next.json.js { swcMinify: false // it should be false by default } Step 2. add a ".babelrc" file to project root dir Step 3. add this snippet to the new file ".babelrc" { "presets": ["next/babel"] } Step 4, you need to run this command as steps 1-3 will remove SWC failed to load error but you will notice another error when you run the build command. So run this too npm install next@canary

[@imrannaaziremon498]

helpful

[@sanyamjain4777]

What does it mean by build time?

[@UpdaterMC]

what about fetching a specific user?

[@daniyaniazics]

GREAT

[@salmansaysit]

dont forget 2 await at fetch and at res.json cost me hours

[@vilayetseferov3142]

great

[@MGopinath7]

"unable to verify the first certificate" it shows like this

[@abhishekvishwakarma9045]

Can you give some more Real use cases of Static generation with data like how this is different from React Data fetching (off-course I got it we can pre-render our HTML while fetching data while in react we generally use componentDidMount or useEffect which called after our page renders) this is confusing a bit Hope will get it soon🔥😅, Great going love the new Concepts

[@abinashmandal6202]

With static generation data is fetched at build time only, so when user goes to that page, there is no fetching any more and page can be loaded faster. However in react with every request there is fetching of data, so comparatively slower site