Thank you my friend 😀 I couldn't agree more with you!!!! Next.js is changing the web, for the better. Every new release is a step forward - I'm excited about the future 😀😀😀😀
@@BrunoAntunesPT Video Request: Incorporating a Sticky Footer in Next.js, with MUI or just vanilla CSS. I'm having so much trouble with this. Don't know where to put the sticky footer logic (_document.js, _app.js???)! Thanks again!
Very good job Bruno like all the episodes! Thank you. Also very good job from the nextjs team. I look forward for an option for force clearing caching with an api endpoint. Because in my future application(I will use nextjs) I'm afraid the case when a page is updated but we not have a visit last month, so the first user will get an one-month old version of the page
Thank you very much my friend 😀😀 It's a very valid concern (that I also share). That being said they are working on it: "FWIW we are working on an on-demand invalidation API that we're hoping to post a RFC for in the next couple months" - this is from a recent comment in the RFC 😊 When something like that is implemented in Next.js we'll have a video in the channel about it 😊
@@BrunoAntunesPT I looking forward for implementing this! As as temporary solution I think about after a user save a post/item to make a request to that url so this request get the old page and invalidate for let the next user get a fresh one!
If you have a revalidate of just a few seconds, yes 😊 if you have a revalidate of 5 minutes (for example) it becomes much more trickier (as of today) 😅
@@BrunoAntunesPT we were waiting for new video , we are happy too 😄🥳 Bruno , can you explain about pwa in next js in a video? I can cache static files , but i cant understnad how can i cache files in .next folder for offline mode 🤓
I have quite a few ideas in the pipeline already, but I noted this one on my ideas notebook so I don't forget about it 😊😊 it will probably not be that soon, but it will happen one day 😅😅😅
So both revalidate and fallback set to true are ways to reduce strain on the server? Except fallback benefits the users as well in a way as it cashes elements that would have not been loaded to that specific user if it was not requested to the server.
SSG not only reduce the load on the server but also makes your pages fast for your users - win win situation 😀 ISR will allow you to regenerate pages as time progresses 😀
Great tutorial! Got a question here. revalidate: 10 timeline: 0s: build project 11s: user enters url and something changes in db, so next would re-generate. 13s. another user enters url and something changes in db again ----> In this moment, would next still re-generate? I am kind of confused about *at most 1 time for every 20s* at 13:21. Thanks.
Basically in that situation next will not regenerate 😊 If your revalidate is 10 seconds and it was regenerated 3 seconds ago, it doesn't matter if your database changed or not, next will not regenerate because it regenerated 3 seconds ago which is lower than 10 seconds. At most once every 10 seconds 😉 In one of the latest comments you can read this from one of the nextjs team members "FWIW we are working on an on-demand invalidation API that we're hoping to post a RFC for in the next couple months" 😊
Yet another amazing explanation. I understood almost everything. I have one question though - The thing where you explained with 2 parallel windows and loaded the 12th microphone showing that once loading is started if anyone tries to load it within those 5 seconds the load will not add 5 more seconds. That is only the case when the users are on the same browser right ? I mean if users are on different machines each one will have that 5 seconds load. I understand as I type that this is a stupid question, but I want to understand what you were explaining there.
@@BrunoAntunesPT so what I understand is that if a user requests that 12th microphone page he would have to wait for 5 seconds(due to settimeout) and after 2 seconds, let's say 100 users simultaneously request the same page they would have to wait just 5-2=3 seconds ?
Thanks a lot Bruno. What happens when using a CMS and a page has been deleted? Would the ISR page page return a 404 or would it still return the old page until the site is redeployed?
Thank you James!! 😎 That needs to be handled by your code. You can have a look into this example in the Next.js discussions page: github.com/vercel/next.js/discussions/10960#discussioncomment-1201 I guess that answer is exactly what you were looking for 😊 Let me know if not
As always very usefull. I'm still waiting for them to introduce the possibility to trigger revalidation programmatically. They said in future realeases they will add this.
Thank you very much 😃😃 Hopefully, that will be introduced in "the not so distant future". In the meantime, we will keep our eyes in the "discussions" and "issues" GitHub sections 😃😃
What a great tutorial! Question, is there a way to use this for a dynamic list. For example: a list of posts and make it so the server will check for a new post and then rebuild the page statically to include the new post?
Hello, Bruno! Thanks for the video! Awesome explanation! In your example you initially built the static site with 5 microphones and then the next ones were lazily built only when accessed, giving the first user to request for it the burden to wait for the generation. Would it be possible to trigger the generation of the remaining pages in the background without the need for a client to make a request to the page? That way we would have a faster initial build ready to be served and would keep generating the rest of the website in the background rather than waiting to build every remaining page only when a user first requests for it.
Thank you 😍 Well, out of the box there's nothing that does that for you... What you can do is to create a script that after deployment visits each page automatically - this might work for a small website, but if you have like 5/10/20 million pages, it's probably not a good idea, because that script will be running for a while 😅 if you also visit too many pages at the same time you can "kill" your server or your database, so you can't be too aggressive when visiting the pages 🙂
@@BrunoAntunesPT Thanks for your reply. I was thinking the exact same approach. Another approach I was thinking would be to just trigger a normal build but configured to fetch a higher portion of the pages right after the initial build has been deployed. That would cause some load on the backend (database, apis, etc.), but there would be no need for a "client side" script increasing end-to-end overall traffic.
@@rafaelvanderleii that's also an alternative. Just keep in mind it will not save as much resources as you might think initially and it will be much harder to debug when something goes horribly wrong 🙂 Lately I build my apps keeping in mind how easy/hard it will be to debug when something bad happens 😅😅
I read your comment again and I think we are talking about different script types 😅😅 Just to clarify, when I say script, I say something like a shell script that does a "wget" to your pages, for example. I don't mean a JavaScript script that you serve to your users - they will not even know about the script existence 🙂
Thank you for such a clear and detailed explanation, your videos are next level! Its even better than some paid lessons on Udemy. After watching this video I want to rewrite my e-commerce app to use ISR but am just wondering how would you handle filtering/sorting thousand of products where variants like color and size can be an array of values? Since we cant get query params in getStaticProps, Im unable to handle it the traditional way.
Thank you very very much Madafaka 😃😃 I'm very happy knowing you think that about my videos 🧡🧡 Regarding query parameters, sadly they are not available at build time (getStaticProps/getStaticPaths), only at runtime (getServerSideProps). PS - I have been playing lately with headers on Azure to store my getServerSideProps pages in their CDN. It's solving my problem for now... and in a way I'm thinking about moving some "normal" getStaticProps pages into that approach (I need more testing before I have a better opinion about this approach, but it's "kinda" working...) 🎉
@@BrunoAntunesPT Cool thanks for sharing, for my case Im thinking of using getStaticProps to pre-render just the first page of products then initialise useSwr with the data returned from getStaticProps and when user filter product i'll handle that request from the client side. Will see how it works out. Anyway, really appreciate your reply and I hope you never stop making videos. Cheers Bruno.
Having that hybrid approach with useSWR for search pages (or any page with queryparms) is what I do most of the time. PS - IF you are using vercel (or any modern CDN for this matter) you can also add headers to your Next.js API Routes to cache your JSON responses on a CDN level. That means you are not hitting your api-routes and database on every single user request. Those requests hit the CDN and never your apis (kind of getStaticProps for APIs ahahahahahh) 😂😂 This page on the vercel website is very good at explaining the different headers you can use: vercel.com/docs/edge-network/caching#serverless-functions-(lambdas) 😃 In that page the section that I'm referring to is: Serverless Functions (Lambdas) Let me know if you hit any roadblocks :)
Hey Bruno, Great tutorial, I would like to know, is there a way or trick, you can retain your old cached pages while you rebuild each time? As in next, You need to push your changes and create a new build, each time in vercel, you lose those visited pages by the user and it again takes time to load. Thanks a lot.
Next js uses stale while revalidate, which means that while your new page is being built, next will serve the old page - even if your new page takes a few seconds to be regenerated, your users always receive fast content (even if old content) 😊
I usually upload my files directly to azure blob storage 😃 I heard people saying good things about multer - but I haven't used it myself 😃 www.npmjs.com/package/multer
Great video! One question I had was: When using `revalidate: X`, will Next.js still seek to re-build the page if nothing has changed (ie, delete old file, then rebuild a new static file identical to the old one) ? Or will the old file be kept?
Thank you my friend 😀 Let me do a small introduction before answering your question at the end 😀😀 Even if nothing changed when returning from getStaticProps, you can have something like "new Date()" in your component code, so Next.js will regenerate that component even if the return from getStaticProps is the same. As I showed in the "new Date()" example, having getStaticProps returning exactly the same, doesn't guarantee that the component HTML will be the same as before, so Next.js has to regenerate to be on the safe side 😊 Then if Nextjs writes it to disk or not is a negligible difference in terms of performance - your database query (or any data fetching you do) is significantly slower than writing a file to disk 😊 After knowing this let me answer directly to your question 😀 Yes, Next.js overrides the old file even if it is exactly the same (as of today ---- this can change in the future, but as we saw it will be a negligible difference comparing to your database query). I hope this is useful =) Let me know if you have any further question(s) 😀
@@BrunoAntunesPT Awesome! Thanks for the very detailed response (with mini case study!). That's exactly what I was interested to know! Keep making these excellent videos :)
Hi, Bruno. There is something that you explain in the slides. revalidate is 20. If user requests to the page he gets data after 5 seconds according to your code. Then what is the role of revalidate property in this situation? I'm really confused about it. What makes sense if revalidate is 2 , 20?
Let's see if I can help =D Basically I just added a setTimeout in my code to simulate a real use case, where you need to query data from a database. Let's say your database query is really slow, and it takes 5 seconds, that's what I did with the timeout, and it is not directly related with the revalidate =) Revalidate is what Next.js uses to know if it should (re)generate your page or not. Imagine a scenario where you have revalidate of 20 seconds. If a user access the page after 19 seconds, Next.js will *not* attempt to regenerate that page because 19
@@BrunoAntunesPT As I understood, when revalidate value is less, more users that requested this page immediately will see the updated page. because revalidate will end quickly due to the value of the revalidate. But if my opinion is true are there any scenarios that high revalidate value is useful? If false please, explain with different words and different examples =)
Yes, you are correct 😊 But the high values make sense in certain scenarios. Small values make sense in other scenarios. I'll try to show in this comment 😊 It also depends on how frequently your data changes, the number of pages you have to regenerate and how long can you tolerate your users seeing old data. For example, Imagine you have 1 million products in your website. Something like: www.app.com/product/1 www.app.com/product/2 ....... www.app.com/product/1000000 If you have users constantly hitting every single product multiple times a second with a revalidate:1 you'll get 1 million requests per second to your database 😊 it can be quite demanding for your database. If you have revalidate: 60 seconds you have 1 million requests but in 60 seconds not one second. We saved quite a lot of load to your database. If you pay per request imagine how much money we saved with this simple gesture from 1 to 60 😊 Then you need to also consider when data changes how long do you tolerate your users seeing old data? If you can tolarate users seeing old data for 1 hour, you save even more your database than if you say 1 minute or 1 second 😊 keep in mind the "stale while revalidate" specially if you are in a website with low traffic 😊 In the end it's always a decision balancing all those factors 😊 If your app doesn't have much load, you can stick to a pretty low number without many issues. But when your app grows you need to think carefully all the pros and cons of each decision 😊 I hope this helps a bit more. Did it help? 😀
@@BrunoAntunesPT, I have another question. You say the generation of component started. what does it mean? the time when pages are built statically, or something else and is revalidate value counted since this time? For example, if pages are created 10 seconds ago and revalidate is 20 seconds if we request to the page after 9s it will not start regenerating, right? because 9
Generation started is roughly when your getStaticProps is called 😊 I say generation started and not generation because it depends on your database query. If it is a fast query it will be almost instant. But if you have a slow query, it can take a few seconds. If I said generation it was passing the impression to people of an immediate process which would not be correct information 😊 I like to show that (re)generation time depends on your data fetching time more than anything else 😊 Regarding your second question yes, if the last generation was 19 seconds ago and you have a revalidate of 20 seconds, it will not generate. If a user accesses your page and the last revalidation was 20.01 seconds ago, it will start the process 😊
@Bruno Antunes Can't we just get the new version from the client-side? We could compare let's say once every 15 min if the current page HTML output is different than the static file via async clientside request. Then we'll be able to render the page again when the client-side is invalidated. You could just run one function who could even check with cms/cdn and client-side periodically and check if rerendering is required. P.S. Great Content!
You can do that, but using ISR has mainly 2 advantages: 1 - make your page *always* fast for your users 2 - reduce dramatically the load on your backend (database/CMS/etc) with all the good benefits associated to it (like paying less money to your cloud provider etc).... If you will do that validation on every new request on client-side, then you lose mainly benefit number 2. If you are OK losing benefit number 2, then yes, you can implement something on those lines. But before implementing that, if you can wait, I will tell you to wait a while and follow this discussion - github.com/vercel/next.js/discussions/11552#discussioncomment-52146 The words I want you to read from that discussion are: "FWIW we are working on an on-demand invalidation API that we're hoping to post a RFC for in the next couple months." So hopefully in the "not so distant future" you may have that feature without losing any of the benefits from ISR 😃 I hope this helps 😃
Thank you my friend 😃 Can you elaborate a bit more what you mean? By default Next.js first page load is served to you as HTML but on your browser react will hydrate the page. After that moment all client side navigation only requests JSON to the server - it will behave "the same" as any normal react app after the first load. I may have understood your question wrong, so let me know 😃
It depends, every case is different 😊 there's no recipe I can give you that will work in every use case 😊 Your life will be simplified with next 9.5 and this 2 specific features : Customizable Base Path: easily host Next.js projects on subpaths of your domain Support for Rewrites, Redirects, and Headers: rewrite vanity URLs, redirect old URLs, and add headers to static pages The first one will allow you to migrate page by page which is what you are looking for 😊
Thank you 😀 Yes you require a server to run nextjs with revalidate (ISR) Github pages only serve static files, so we can't make ISR work on github pages 😊 for that you need a provider with a running server, like vercel, for example
Thank you very much 😀😀 We have a video where we went into detail explaining the difference between getInitialProps and getServerSideProps with diagrams - that video url: ua-cam.com/video/61TngxLrP_0/v-deo.html Let me know your thoughts after watching it. I really hope it clarify your doubts 😊😊
Thank you for your wonderful video. Can you please give me some use cases that I will want to use ICR? and I just wonder what will happen if there is regeneration within that 20s as well as data changing, so will Next do a new regeneration and serve users with old data first or what will it do? Sorry I am pretty new to SSR and Next, so I am a bit confused.
Thank you 😃 You can think of applications where you have data that changes from time to time (revalidate: number of seconds). That way you'll regenerate your pages from time to time keeping them fresh to your users. If you have a lot of pages, you can make fallback: true, so you'll generate them in the first request instead of build time. Your second question I answered with a timeline with revalidation examples at this timestamp: "14:14 ISR Timeline". I hope this helps 😃
Awesome video as always Just one question, does London have a lot of job opportunities that requires next.js? (Not just in London, but Europe in general) Seu canal é sensacional Cheers from Brasil :)
Muito obrigado Nicolas 😃😃 Existe algumas oportunidades - infelizmente durante os ultimos 6 meses nota-se que ha muito menos oportunidades que antigamente, mas era de esperar devido a esta situacao 😞 Um grande abraco para o Brasil e para ti Nicolas!!! Estas a pensar vir para Londres? Se sim eu posso passar umas dicas 😉😉 PS - Desculpa a falta de pontuacao, estou num teclado ingles =D
@@BrunoAntunesPT Infelizmente aqui no Brasil também está tendo menos oportunidades que antes :( Como eu termino minha faculdade esse ano, eu tava pensando em ir para Portugal ou Irlanda tentar achar um emprego na área de programação e depois se mudar pra London para trabalhar tbm(meu sonho hehe) Seus videos estão me ajudando bastante nessa jornada de tentar se mudar do Brasil Abraços e continue a fazer ótimos videos =D
Fico muito feliz Nicolas 😀 Neste momento infelizmente as empresas não estão a contratar tanto, devido à situação actual 😔 Tenta aplicar para vários países. Como dizemos em Portugal "não ponhas os ovos todos no mesmo cesto" 😀 basicamente diversifica as tuas aplicações, dessa forma tens mais chances de ser bem sucedido que aplicando apenas para Portugal ou Irlanda 😀😀😀 Toda a sorte do mundo meu irmão ❤️
In ISR (Incremental Static Regeneration) when there is data change and "revalidate" comes into action, is the whole application rebuilt or just the page with the new data?
And only if you have users hitting the page. If nobody goes to that page for 1 month, we will not have regeneration even if the revalidate value is just a few seconds 😊
If your database has no data for that microphone, you can either redirect, send notFound, or show a custom page when there's no data 😊 it's your call, nextjs is transparent in that scenario 😊
Hi Thank you for this sharing, a lot of knowledge in this video, i have request, how to implement this part with react query, it would be great if one day you have some tutorial for that, thanks!
You can't do this with react query "only". You always need to use getStaticProps in order to have static site generation and isr 🙂 then you can use both together getStaticProps and react query 🙂, but until we have react server components "stable" you'll need to use getStaticProps - probably even after (not sure how it will look like in the future) 🙂
bruno i build a ssr app with nextjs and nestjs as back , want to add redux and redux-saga that support ssr, found boilerplates related , but still doesnt get it how things work in ssr like styled-components and redux-saga, please provide a vid with deep how of connect stuff in ssr. ty man.
I don't use Redux for quite a long time - so I don't think I'll make a video about it :) We already have a video on the channel showing how to integrate Next.js with Material-ui: ua-cam.com/video/k7bKDpw-JGk/v-deo.html In order to integrate with styled-componets it is really similar. If you want to see code integrating them, you can have a look over here: github.com/vercel/next.js/tree/canary/examples/with-typescript-styled-components In the Next.js repository, you can also find a few examples with redux if you want to use it - github.com/vercel/next.js/tree/canary/examples I hope this helps 😃
Hello Riley 😀 Yes, both SSR and ISR those require a server to run (node.js). Github pages serves static files (html+json+css+js+jpg+png etc) but doesn't give you the possibility to execute code at runtime - you can only execute code at build time like we did with Github Actions 😊
Can I say that whenever the user loads any page the HTML will also get updated after the certain revalidate time? irrelevant of the page is updated or not
Yes, if the revalidate is for example 1 minute, and the last user visiting the page was 20 minutes ago, as soon as a new user hits that page a new revalidation will start (it doesn't matter if the final result is the same html or not 😊) Just keep in mind that that user will still get the page that is 20 minutes old 😀
@@BrunoAntunesPT if we increase the product price we'll show the updated one after a reload. I guess in that case the SSR would apt. The ISR feature is only applicable for something like Blogs/Contents. Also, I have another doubt in case if only go with SSR without any fallback/ISR. The build will be the same for each time or the build will be update only the new pages
You can have a look here and take some ideas github.com/vercel/next.js/discussions/11552#discussioncomment-223495 In your case, I would just have a small revalidate number, so when something change I could trigger myself (via code obviously) :) You can also use getServerSideProps and manage the CDN headers yourself, that way you have 100% control over what you serve and how :) Sorry I don't understand what you mean by "The build will be the same for each time or the build will be update only the new pages"... can you elaborate? If I understand correctly you are asking about getServerSideProps/getInitialProps, if I understand correctly your question: on every single user request that page will be "rendered" on the server and shipped to your client, but I don't know if this was your question, sorry :)
@@BrunoAntunesPT I have asked each we building the application and we're using getStaticProps means will it only update the new static pages or it'll build every single static page again. So, that the build time will increase right? Then how can we solve our problem Also please upload some nextjs deployment videos. I'm currently using nextjs serverless component to deploy to AWS. But I have a couple doubts about setting auto git deployment and custom domain. Please upload a video on this if you have some time. Thanks again for your reply. And are you available for a freelance nextjs consulting?
Hi Bruno, I feel like I'm stalking you now. I still don't get what process is creating the new pages on re-validate. Seems like there has to be some process in production that can write pages back to the file system for regeneration to work. I feel like I'm missing something everyone else understands but me.
Ahahahh 😀😀😅😅 I don't know the specific line of code inside nextjs that is triggering it. But when you run your application with "npm run build" and "npm start", on every request (apart from returning the html/json file in disk to the user) , nextjs checks how long ago was the last generation. If the elapsed seconds is bigger than your revalidate value, nextjs starts a new component html+json generation and save it to disk when finalised 😊 Those values (last regeneration time) I'm almost sure are kept in memory, but to be 100% honest with you I didn't dig that deep yet 😊 now that you made me feel curious about it I think I'll have something to do tomorrow night before going to bed 😂😂😂
@@BrunoAntunesPT It seems like there has to be a server running some place to generate the new page, and also, there has to be a routing table someplace that knows where that page lives on the server. What I don't get is that the Vercel people make it sound like this happens and it's still serverless which seems to me, it can't be. I totally get how this can work in development mode (npm run dev), but in production, I just don't get it. I assume the routing table has to be in a server some place and that table has to be constantly updated which means all requests bottleneck through a server? If so, that seems to take a lot of the fun away from deploying serverless. I'm so confused.
Is there a way to do regeneration, but block while regenerating? Say someone visits page in morning, and nobody visited it during night, they will get super stale data, which is sometimes not great.
That's very good question. In my last video I showed how you can do that with a stale-while-revalidate header 😀 that video talks mainly about query params when using getStaticProps, but about half way I show how to accomplish that 😊
Hello Yong 😊 It is not every 3 seconds - it is at most every 3 seconds - it's quite different 😊 For example: If no user hits your page for 10 hours, it doesn't revalidate for 10 hours 😊 when the next user hits the page receives a 10 hour old page and a new revalidation starts, but that initial user receives a 10 hour old page 😊 Regarding data, nextjs has no way to know if you have new data in your database or not, so it will call your getStaticProps and getStaticPaths when it needs revalidation, which cN be every 3 seconds if you have a lot of traffic or in my previous example, only after 10 hours 😅😅😊 I hope you find this helpful 😊
Revalidate is used with numbers in seconds 😊 If a user hits a page that needs regeneration because of time, that page will be regenerated, regardless of data changing or not 😊
It will only regenerate after 20 seconds if a user hits the page. If nobody hits your page for 3 days, there will be no regenerations for 3 days. The user that arrives at that page in 3 days will see data that is 3 days old 😊 Regarding the second question, it doesn't check data, it only checks the time since last regeneration, meaning you can have regenerations for days resulting in the same exact page 😊 Regarding The number of seconds, it depends on your app needs. If you have an application where stuff only changes daily, probably having a revalidation of 3600(1 hour) is too frequently. You can have 12 hours 😊 But, if your application is tracking the stock market or crypto, then anything older than 5 seconds is just way too old - in that specific case 3600 is just going to put your company out of business 😊 Did my answer help? 😊
@@BrunoAntunesPT Sim não engana 😊 E depois como vi que és Bruno só podias ser boa pessoa 😋 Uma pergunta como farias por exemplo paginação de resultados em NextJs? Seria algo mais CSR, certo? Desde já obrigado. Abraço
Bruno é sempre nome de uma pessoa 5 estrelas 😅😅😅 Quanto à tua pergunta, a resposta depende. Tens parâmetros de pesquisa ou é mesmo só paginação sem pesquisa? Só mesmo paginação sem filtros tens a minha parte 8 da playlist do nextjs onde fazemos uma microphone store com paginação 😊 Se queres com filtros tens o meu vídeo de paginação na playlist do car trading app 😜 Qual deles estás a tentar fazer?
@@BrunoAntunesPT É isso são sempre 5 estrelas 😁 eu estaria a pensar mais em paginação com filtros, ordenação e pesquisa. Eu venho de uma base de React, logo tudo client side, e estou a tentar aprender Next porque gosto bastante da possibilidade de usar React em server side. Sendo assim vou ver entao a car trading app 😁
Basicamente há duas coisas que tens de ter em conta 1 - todos os teus parâmetros de pesquisa, ordenação etc, convem estar em query params do url (por uma questão de todos os estados da app estarem discoverable - não sei esta palavra em tuga, sorry 😅😅) - ou seja podes partilhar uma pesquisa com outra pessoa. 2- por questões de SEO (e não só) queres fazer render no server side dessa página. Como a página terá milhões de possíveis (filtros, paginação etc) combinações não é algo que consigas fazer render usando static site generation, então nesses casos normalmente irás utilizar server side rendering (getServerSideProps) - obviamente que podes usar static site generation com fallback:true, mas como sempre em informática, "it depends on what you want to achieve" 😅😅😅😅😅
Hello hello Sangeet 😀 For the example I'll give let's say we have revalidate:60 😊 In that scenario, when the app starts still without mic 19, if a user goes to /19 we show no microphone, because 19 does not exist. Until this point, no surprises, right? 😊 Let's say 10 minutes after you add microphone 19 to the database. The next user visiting /19 will still receive an empty page even if we already elapsed the 60 seconds. That is because of the concept I talk in the video - Stale while revalidate 😊 Let's say that user visited the page after 60s from the pervious regeneration, nextjs will start a new generation for that page only, nothing else 😀 no other page will be regenerated 😊 The next user visiting /19 will receive microphone 19 😊 Does this answer your question? 😊
@@BrunoAntunesPT Thank you for explaining. I am trying to build a blog so I think this is the way to go so that the blog pages will be static and if I add a new blog I won't have to rebuild the entire application.
Yes, that's a good solution if you are using a database or a CMS like strapi, prismic etc 😊 For the rest of this comment I'm assuming that's for your personal blog, not an application with thousands of users writing posts every second 😅 If it is the second option, then ignore what I will say after this 🤣🤣 If you are writing your blog posts in markdown files in your git repository I don't see a big problem of deploying on every change 😊 I'm saying this assuming you don't write a new blog post every minute or so, maybe once a day or once a week 😅😅😅 Deploying a new blog post every day or week, it's not a huge deal I would say 😅 But once again, it depends on how frequently you write blog posts and where you store your blog itself. For example, markdown on git vs database vs cms 😊
@@BrunoAntunesPT I have tried everything but I can't seem to make it work. I have divided my app into 2 parts- the server and the nextjs. This was made using Mongodb, Node, Express and NextJs. NextJS - github.com/SangeetDhakal/blog Server- github.com/SangeetDhakal/blogserver I am trying to implement this functionality in the [slug] page which is in the blog repository. However, my database is in the blogserver repository and I can't pass an API into the getStatic methods. I have googled it and cant seem to find the solution. I am not a programmer and have only been learning for a past few months taking udemy classes. I would be really grateful if you could find the time to look into it.
I had a quick look and found you are using getInitialProps 😊 github.com/SangeetDhakal/blog/blob/main/pages/blogs/%5Bslug%5D.js Is that the right page I should be looking for?
I used ISR in my project, in local everything is ok , and i can build it, But in server , when i tried to build , all pages that used revalidate:"" , plus /404 and /404.html(i didnt have 404 route at all) cause error when npm tried to generate static page data ... what should i do?🤓 I dont know what's that 🤔
Sorry, I don't know what you mean. What is the error you are getting? PS - If you are using fallback: true, next.js will not send 404 pages - you need to do it yourself like here: github.com/vercel/next.js/discussions/10960#discussioncomment-1201
Yes!!! I think it's where this feature shines the most 😊 They (nextjs team) are planning revalidation via code, which will be even better 😍 but let's be honest, it is already amazing for your use case nowadays 😊
great video , I think when using fallback : true in a SSG we have to deploy our page in a nodejs Server and not CDN or githubPages because the nodeServer like vercel must handle the page creation at request time and CDN or static host like Github cant do that
Yes you are right 😊 As I said in the video when you use Fallback true or revalidate, you'll need nextjs running on the server (a nodejs server). That means that solutions like github pages are not an option 😊
@@BrunoAntunesPT yes sir i just messaged lee robinson nextjs solution architec at Vercel and told me the same thing. sir can you do a video showing as how to deploy to a custom nodejs server instead of vercel because as you know vercel handle all NextJS Features out of the box for example as you know vercel can handle hybrid app . i just want to know how to customize a server without vercel
The problem is only related with static site (re)generation when using the features we talked before, fallback and revalidate - - nextjs stores the cache files in disk. So we need a way to share those files across multiple server instances, in case you are using multiple server instances. If you are with a single server instance and not in serverless, then npm run build and npm start will work perfectly for you 😊 A solution for that problem depends on the cloud platform you are using, if you are using serverless or not, if you are using docker or not, if you are using proprietary solutions for that cloud provider or not. As you know the number of cloud providers alone is big. For example I solved that issue in azure, but I know my solution doesn't work on amazon (as an example) - well it works but needs a lot of adaptions, which would make such video very azure specific, that's the reason you don't see (as far as I know) videos about that topic 😊
@@BrunoAntunesPT i got you sir it depends on the features you are using on that server but as i see the best way to deploy nextJS project that needs nodeServer is to deploy it in vercel servers because as they say in the docs there are some features out of the box vercel handles for you like because as the say --- -------------------------- A custom server will remove important performance optimizations, like serverless functions and Automatic Static Optimization. ----
What they refer there is using a custom server - that is independent of the fact that you deploy on vercel or azure for example 😊 A common example of a custom server that you see some people doing is using express and integrate nextjs "inside" it 😊 that's a custom server, because express is now the "host" (host is not the right word, but you get the idea) As long as you are doing your next build and next start, then you are not using a custom server , which means you don't lose any of those mentioned features like ASO (automatic static optimization) 😊 there's no need to deploy into vercel for those specific ones 😊 the static site regeneration is a different thing 😊 In my azure deployment I'm not using a custom server, I'm still doing next build and next start 😊
Show show show, very good explanation, i look for nodemailer contact send email contact form for landing page, do you have an example? Suggestion for a new video. "Obrigado cara, valeu mesmo. from Brasil."
Sim o nosso sotaque Português é muito típico 😀😀 o vosso Brasileiro também é muito típico 😃😃 Fico muito feliz de ter mais um Brasileiro aqui pelo canal, mesmo muito feliz 😍 Obrigado Jonas!!!
First thank u for this video, and I guess this solution is not good for web application with large data or site web blog with a lot of articles with categories and terms...etc
Thank you my friend 😃 This solution (with fallback: true) is actually really good for applications with a large data and a lot of items. If you use fallback: false, then yes, it's not ideal because you'll do all the rendering at build time, which can take hours (or even days in extreme scenarios) 😃
Just to be clear: when I say "fallback: true" I'm also implying that you'll send less paths from getStaticPaths - otherwise you'll end up with the same problem 😀 PS - Every path you send from getStaticPaths will be generated/rendered at build time 🙂
@@BrunoAntunesPT that s my question, for an application with a large users + articles the next js will generate for each request of each user files json+HTML on the server ?? That s good idea for performance of ur storage ?? If ur answer is yes so let me to say the best solution still with cache and not generate files on the server storage, Hop understand my question, thank u
That's not how it works 🙂 Let's say you use fallback:true Next.js generates once per page, not once per access/request to that page. Generating once per access/request is getServerSideProps (server side rendering) 🙂 Let's take your example from the first comment. Imagine you have a blog with one million posts. Taking into account you are using fallback:true and sending paths as empty array, The first user that goes to page www.blog.com/my-first-post will generate a new html+json. Every other user that goes to that page will receive that previously generated html or json, so no processing in your server and your user receives data super fast. If you add a CDN in front like vercel does, it's nearly "instant" 😀😀 Then as we did in the video if that data changes from time to time you can use revalidate prop in getStaticProps I hope this helps 😀
The effect you putting to explane everything is priceless, thank you very much
Thank you very much 😀 you put a big smile on my face ❤️❤️ thank you 😊😊
Fantastic explanation, couldn't have found this at a better time. Will definitely check out some more of your content!
Thank you Evan 😀 I hope you find the other videos useful 😀😀😀
that is really a great video on nextjs. your teaching with real examples is great.
Thank you very much Akash 🙏
Great energy and smile : ) thanks for this
Thank you my friend 😀😀😍😍
Next JS is building the way for future web developement
Bruno thank you for awesome and insipring videos
Thank you my friend 😀
I couldn't agree more with you!!!!
Next.js is changing the web, for the better. Every new release is a step forward - I'm excited about the future 😀😀😀😀
Thank you Bruno.
I like this mix between SSG and SSR.
It-s a powerful feature you made super easy to understand!
Glad to see you again.
Thank you Sergio =D
I'm happy you found it useful my friend =D
Just what i was looking for. Great explanation!
Thank you 😀😀😀 I'm glad you found it helpful 😁😁
Super nice, coherent and most importantly clear explanation of the concepts!!!
Thank you very much Leonid 😍😍
This solved my confusion about SSG. Thank you!
Awesome to read that 😊❤️❤️
Hey Bruno, I just started lerning the React and. Next. Js. I just fallow your videos and those are very helpful for beginners... I'm impressed...
Thank you very much Victor!!!!
You have no idea how good it fells to read your comment 😍😍😍 Thank you, thank you, thank you 😍😍😍
Thank you for this! The timeline explanation was exactly what I was looking for to better understand ISR 🙏
Awesome!!!! I'm very happy I was able to help Martin!! thank you for your support my friend 😃❤️
Reaaallly reaally good explanation of the logic behind those rendering methods ! Nice pace super simple explanation . Subscribed :D Keep it up!
Thank you very very much Anthony 😀😀
Awesome and clear explanation! Subscribed.
Thank you Alexander 😀😀
Obrigado pela explicação, Bruno! Sou do Brasil e consegui entender tudo que você falou. Muito bem explicado, parabéns!
Muito muito obrigado meu irmão 😀😀 Brasil e Portugal ❤️❤️
Your videos are the best, man. Keep it on. Thanks for sharing all these helpful tools!
Thank you very much Alexandre 😀
Bruno, loved this video!! it's so well explained, thanks man!
Thank you very much! =)
Thank you. Your explanation is very detail.
Thank you very much Srey!
Another awesome tutorial. Great job man.
It is a huge honour receiving that comment from you 😀😀 thank you very much my friend!! ❤️
Hi Bruno, very interesting feature. it's a very easy implementation for caching.
Looking forward to learn more things from you :)
Thank you Sergio 😍😍
Thanks for the awesome explanation!
Glad it was helpful Vipul! =D
Awesome tutorial 👌 Bruno.
Thank you 😀😀
It is really really really good explanation! You are really awesome!!!!!
Thank you very much Danh 😀
Thanks Bruno. Very helpful.
Thank you José =D
Excellent video, really clear.
Thank you Jamie 😀😀
Cool and clear. Thanks.
Thank you Sergey 😃
So very helpful. Thank you for putting out this great content!
Glad you enjoyed it Eric! Thank you very much 😀😀😀
@@BrunoAntunesPT Video Request: Incorporating a Sticky Footer in Next.js, with MUI or just vanilla CSS. I'm having so much trouble with this. Don't know where to put the sticky footer logic (_document.js, _app.js???)! Thanks again!
Great video, thank you for sharing!
Thank you Victor 😀 I'm happy you found it useful 😀😀
Very good job Bruno like all the episodes! Thank you. Also very good job from the nextjs team. I look forward for an option for force clearing caching with an api endpoint. Because in my future application(I will use nextjs) I'm afraid the case when a page is updated but we not have a visit last month, so the first user will get an one-month old version of the page
Thank you very much my friend 😀😀
It's a very valid concern (that I also share). That being said they are working on it: "FWIW we are working on an on-demand invalidation API that we're hoping to post a RFC for in the next couple months" - this is from a recent comment in the RFC 😊
When something like that is implemented in Next.js we'll have a video in the channel about it 😊
@@BrunoAntunesPT I looking forward for implementing this! As as temporary solution I think about after a user save a post/item to make a request to that url so this request get the old page and invalidate for let the next user get a fresh one!
If you have a revalidate of just a few seconds, yes 😊 if you have a revalidate of 5 minutes (for example) it becomes much more trickier (as of today) 😅
great content about next.js
Thank you Firoj ❤️
Thank you, you explained this very well :)
Woooow , nice to see you again , i missed you bro 😍
This is awesome dear bruno ,keep going 👍👌
Thank you so much Hamed!!! 😀
I'm happy to be back 😀😀😀
@@BrunoAntunesPT we were waiting for new video , we are happy too 😄🥳
Bruno , can you explain about pwa in next js in a video? I can cache static files , but i cant understnad how can i cache files in .next folder for offline mode 🤓
That's an interesting topic 🤔🤔🤔
I might create a video in the future about it 😅😅
Thank you very much for the suggestion Hamed 👏👏👍👍
@@BrunoAntunesPT
im waiting for this video unpatiently 👍
please make it sooner 😁😄😍
I have quite a few ideas in the pipeline already, but I noted this one on my ideas notebook so I don't forget about it 😊😊 it will probably not be that soon, but it will happen one day 😅😅😅
Great content, thanks for sharing
Thank you very much for watching Ricardo 😃😃
awesome stuff! keep up the good work :)
Thank you Nareg! 😀
I learned a lot from you already thank you so much.
I'm really happy to hear that Adam! 😍
Thank you very very much 😃😃
#First comment.
Nice i am guessing that this great future of next js explained from you.
I read docs but doesn't understand properly.
Now its clear
You have a special thank you for being the first one Muhammed 😍😍😍
Thank you my friend!! 😊
So both revalidate and fallback set to true are ways to reduce strain on the server? Except fallback benefits the users as well in a way as it cashes elements that would have not been loaded to that specific user if it was not requested to the server.
SSG not only reduce the load on the server but also makes your pages fast for your users - win win situation 😀
ISR will allow you to regenerate pages as time progresses 😀
Great tutorial!
Got a question here.
revalidate: 10
timeline:
0s: build project
11s: user enters url and something changes in db, so next would re-generate.
13s. another user enters url and something changes in db again ----> In this moment, would next still re-generate?
I am kind of confused about *at most 1 time for every 20s* at 13:21.
Thanks.
Basically in that situation next will not regenerate 😊
If your revalidate is 10 seconds and it was regenerated 3 seconds ago, it doesn't matter if your database changed or not, next will not regenerate because it regenerated 3 seconds ago which is lower than 10 seconds. At most once every 10 seconds 😉
In one of the latest comments you can read this from one of the nextjs team members "FWIW we are working on an on-demand invalidation API that we're hoping to post a RFC for in the next couple months" 😊
Useful as always. Thanks.
Yet another amazing explanation. I understood almost everything. I have one question though - The thing where you explained with 2 parallel windows and loaded the 12th microphone showing that once loading is started if anyone tries to load it within those 5 seconds the load will not add 5 more seconds. That is only the case when the users are on the same browser right ? I mean if users are on different machines each one will have that 5 seconds load. I understand as I type that this is a stupid question, but I want to understand what you were explaining there.
Thank you very much 😀
The same would happen if I used different physical computers for each browser 😊
@@BrunoAntunesPT so what I understand is that if a user requests that 12th microphone page he would have to wait for 5 seconds(due to settimeout) and after 2 seconds, let's say 100 users simultaneously request the same page they would have to wait just 5-2=3 seconds ?
Yes - I'm taking into account that you only have one server or you have multiple servers with a cdn 😊
@@BrunoAntunesPT understood. That is a super cool feature of Next.
Bruno, you are good man :)
Thank you 🤗 You are very good too my friend ❤️
@@BrunoAntunesPT It's an honor for me to have you as a friend.
Thanks a lot Bruno. What happens when using a CMS and a page has been deleted? Would the ISR page page return a 404 or would it still return the old page until the site is redeployed?
Thank you James!! 😎
That needs to be handled by your code. You can have a look into this example in the Next.js discussions page: github.com/vercel/next.js/discussions/10960#discussioncomment-1201
I guess that answer is exactly what you were looking for 😊 Let me know if not
As always very usefull. I'm still waiting for them to introduce the possibility to trigger revalidation programmatically. They said in future realeases they will add this.
Thank you very much 😃😃
Hopefully, that will be introduced in "the not so distant future". In the meantime, we will keep our eyes in the "discussions" and "issues" GitHub sections 😃😃
What a great tutorial! Question, is there a way to use this for a dynamic list. For example: a list of posts and make it so the server will check for a new post and then rebuild the page statically to include the new post?
Thank you 😍😍
In the video we have have a list of microphones. The concept is exactly the same, but for you it will be a list of blogs 😊
Hello, Bruno! Thanks for the video! Awesome explanation! In your example you initially built the static site with 5 microphones and then the next ones were lazily built only when accessed, giving the first user to request for it the burden to wait for the generation. Would it be possible to trigger the generation of the remaining pages in the background without the need for a client to make a request to the page? That way we would have a faster initial build ready to be served and would keep generating the rest of the website in the background rather than waiting to build every remaining page only when a user first requests for it.
Thank you 😍
Well, out of the box there's nothing that does that for you...
What you can do is to create a script that after deployment visits each page automatically - this might work for a small website, but if you have like 5/10/20 million pages, it's probably not a good idea, because that script will be running for a while 😅 if you also visit too many pages at the same time you can "kill" your server or your database, so you can't be too aggressive when visiting the pages 🙂
@@BrunoAntunesPT Thanks for your reply. I was thinking the exact same approach. Another approach I was thinking would be to just trigger a normal build but configured to fetch a higher portion of the pages right after the initial build has been deployed. That would cause some load on the backend (database, apis, etc.), but there would be no need for a "client side" script increasing end-to-end overall traffic.
@@rafaelvanderleii that's also an alternative. Just keep in mind it will not save as much resources as you might think initially and it will be much harder to debug when something goes horribly wrong 🙂
Lately I build my apps keeping in mind how easy/hard it will be to debug when something bad happens 😅😅
I read your comment again and I think we are talking about different script types 😅😅
Just to clarify, when I say script, I say something like a shell script that does a "wget" to your pages, for example. I don't mean a JavaScript script that you serve to your users - they will not even know about the script existence 🙂
Please make a series on creating a Progressive Web App with Next.js!
That's a very good idea 😀 thank you
NIce explain!
Thank you 😊
Thank you for such a clear and detailed explanation, your videos are next level! Its even better than some paid lessons on Udemy. After watching this video I want to rewrite my e-commerce app to use ISR but am just wondering how would you handle filtering/sorting thousand of products where variants like color and size can be an array of values? Since we cant get query params in getStaticProps, Im unable to handle it the traditional way.
Thank you very very much Madafaka 😃😃 I'm very happy knowing you think that about my videos 🧡🧡
Regarding query parameters, sadly they are not available at build time (getStaticProps/getStaticPaths), only at runtime (getServerSideProps).
PS - I have been playing lately with headers on Azure to store my getServerSideProps pages in their CDN. It's solving my problem for now... and in a way I'm thinking about moving some "normal" getStaticProps pages into that approach (I need more testing before I have a better opinion about this approach, but it's "kinda" working...) 🎉
@@BrunoAntunesPT Cool thanks for sharing, for my case Im thinking of using getStaticProps to pre-render just the first page of products then initialise useSwr with the data returned from getStaticProps and when user filter product i'll handle that request from the client side. Will see how it works out. Anyway, really appreciate your reply and I hope you never stop making videos. Cheers Bruno.
Having that hybrid approach with useSWR for search pages (or any page with queryparms) is what I do most of the time.
PS - IF you are using vercel (or any modern CDN for this matter) you can also add headers to your Next.js API Routes to cache your JSON responses on a CDN level. That means you are not hitting your api-routes and database on every single user request. Those requests hit the CDN and never your apis (kind of getStaticProps for APIs ahahahahahh) 😂😂
This page on the vercel website is very good at explaining the different headers you can use: vercel.com/docs/edge-network/caching#serverless-functions-(lambdas) 😃
In that page the section that I'm referring to is: Serverless Functions (Lambdas)
Let me know if you hit any roadblocks :)
Very cool man, learned something new from you again! Cheers
Hey Bruno, Great tutorial, I would like to know, is there a way or trick, you can retain your old cached pages while you rebuild each time? As in next, You need to push your changes and create a new build, each time in vercel, you lose those visited pages by the user and it again takes time to load. Thanks a lot.
Next js uses stale while revalidate, which means that while your new page is being built, next will serve the old page - even if your new page takes a few seconds to be regenerated, your users always receive fast content (even if old content) 😊
@@BrunoAntunesPT Ok. sounds great. Thanks
thank you very much. I need to upload files in my new project with Next. What do you suggest for this job?
I usually upload my files directly to azure blob storage 😃
I heard people saying good things about multer - but I haven't used it myself 😃
www.npmjs.com/package/multer
Great video!
One question I had was:
When using `revalidate: X`, will Next.js still seek to re-build the page if nothing has changed (ie, delete old file, then rebuild a new static file identical to the old one) ? Or will the old file be kept?
Thank you my friend 😀
Let me do a small introduction before answering your question at the end 😀😀
Even if nothing changed when returning from getStaticProps, you can have something like "new Date()" in your component code, so Next.js will regenerate that component even if the return from getStaticProps is the same.
As I showed in the "new Date()" example, having getStaticProps returning exactly the same, doesn't guarantee that the component HTML will be the same as before, so Next.js has to regenerate to be on the safe side 😊
Then if Nextjs writes it to disk or not is a negligible difference in terms of performance - your database query (or any data fetching you do) is significantly slower than writing a file to disk 😊
After knowing this let me answer directly to your question 😀 Yes, Next.js overrides the old file even if it is exactly the same (as of today ---- this can change in the future, but as we saw it will be a negligible difference comparing to your database query).
I hope this is useful =) Let me know if you have any further question(s) 😀
@@BrunoAntunesPT Awesome! Thanks for the very detailed response (with mini case study!).
That's exactly what I was interested to know!
Keep making these excellent videos :)
Thank you @@lloydjones636 =D
I'm happy I was able to help =D =D
I love your videos ❤️
Do you have any plans on doing Vue or Nuxt videos ?
Thank you very much ❤️❤️
I don't have any experience with vue at this stage - maybe in the future 😅
Hi, Bruno. There is something that you explain in the slides. revalidate is 20. If user requests to the page he gets data after 5 seconds according to your code. Then what is the role of revalidate property in this situation? I'm really confused about it. What makes sense if revalidate is 2 , 20?
Let's see if I can help =D
Basically I just added a setTimeout in my code to simulate a real use case, where you need to query data from a database. Let's say your database query is really slow, and it takes 5 seconds, that's what I did with the timeout, and it is not directly related with the revalidate =)
Revalidate is what Next.js uses to know if it should (re)generate your page or not. Imagine a scenario where you have revalidate of 20 seconds. If a user access the page after 19 seconds, Next.js will *not* attempt to regenerate that page because 19
@@BrunoAntunesPT As I understood, when revalidate value is less, more users that requested this page immediately will see the updated page. because revalidate will end quickly due to the value of the revalidate. But if my opinion is true are there any scenarios that high revalidate value is useful? If false please, explain with different words and different examples =)
Yes, you are correct 😊
But the high values make sense in certain scenarios. Small values make sense in other scenarios. I'll try to show in this comment 😊
It also depends on how frequently your data changes, the number of pages you have to regenerate and how long can you tolerate your users seeing old data.
For example, Imagine you have 1 million products in your website. Something like:
www.app.com/product/1
www.app.com/product/2
.......
www.app.com/product/1000000
If you have users constantly hitting every single product multiple times a second with a revalidate:1 you'll get 1 million requests per second to your database 😊 it can be quite demanding for your database.
If you have revalidate: 60 seconds you have 1 million requests but in 60 seconds not one second. We saved quite a lot of load to your database. If you pay per request imagine how much money we saved with this simple gesture from 1 to 60 😊
Then you need to also consider when data changes how long do you tolerate your users seeing old data? If you can tolarate users seeing old data for 1 hour, you save even more your database than if you say 1 minute or 1 second 😊 keep in mind the "stale while revalidate" specially if you are in a website with low traffic 😊
In the end it's always a decision balancing all those factors 😊
If your app doesn't have much load, you can stick to a pretty low number without many issues. But when your app grows you need to think carefully all the pros and cons of each decision 😊
I hope this helps a bit more. Did it help? 😀
@@BrunoAntunesPT, I have another question. You say the generation of component started. what does it mean? the time when pages are built statically, or something else and is revalidate value counted since this time? For example, if pages are created 10 seconds ago and revalidate is 20 seconds if we request to the page after 9s it will not start regenerating, right? because 9
Generation started is roughly when your getStaticProps is called 😊
I say generation started and not generation because it depends on your database query. If it is a fast query it will be almost instant. But if you have a slow query, it can take a few seconds.
If I said generation it was passing the impression to people of an immediate process which would not be correct information 😊
I like to show that (re)generation time depends on your data fetching time more than anything else 😊
Regarding your second question yes, if the last generation was 19 seconds ago and you have a revalidate of 20 seconds, it will not generate. If a user accesses your page and the last revalidation was 20.01 seconds ago, it will start the process 😊
@Bruno Antunes Can't we just get the new version from the client-side? We could compare let's say once every 15 min if the current page HTML output is different than the static file via async clientside request. Then we'll be able to render the page again when the client-side is invalidated. You could just run one function who could even check with cms/cdn and client-side periodically and check if rerendering is required. P.S. Great Content!
You can do that, but using ISR has mainly 2 advantages:
1 - make your page *always* fast for your users
2 - reduce dramatically the load on your backend (database/CMS/etc) with all the good benefits associated to it (like paying less money to your cloud provider etc)....
If you will do that validation on every new request on client-side, then you lose mainly benefit number 2. If you are OK losing benefit number 2, then yes, you can implement something on those lines.
But before implementing that, if you can wait, I will tell you to wait a while and follow this discussion - github.com/vercel/next.js/discussions/11552#discussioncomment-52146
The words I want you to read from that discussion are: "FWIW we are working on an on-demand invalidation API that we're hoping to post a RFC for in the next couple months."
So hopefully in the "not so distant future" you may have that feature without losing any of the benefits from ISR 😃
I hope this helps 😃
Awesome man. I have one question .Is it possible to convert only first page of react to nextjs.
Thank you my friend 😃
Can you elaborate a bit more what you mean?
By default Next.js first page load is served to you as HTML but on your browser react will hydrate the page.
After that moment all client side navigation only requests JSON to the server - it will behave "the same" as any normal react app after the first load.
I may have understood your question wrong, so let me know 😃
if you have existing big react website and want to convert first page of react to nextjs
It depends, every case is different 😊 there's no recipe I can give you that will work in every use case 😊
Your life will be simplified with next 9.5 and this 2 specific features :
Customizable Base Path: easily host Next.js projects on subpaths of your domain
Support for Rewrites, Redirects, and Headers: rewrite vanity URLs, redirect old URLs, and add headers to static pages
The first one will allow you to migrate page by page which is what you are looking for 😊
Great vid!
I assume that ISR requires some server right? How to make it work with github pages?
Thank you 😀
Yes you require a server to run nextjs with revalidate (ISR)
Github pages only serve static files, so we can't make ISR work on github pages 😊
for that you need a provider with a running server, like vercel, for example
@@BrunoAntunesPT Great, thanks for the response
You are welcome my friend 😀 if you need help with vercel, let me know
Fantastic explanation ,thank you , there is a thing i cant understand , what is the difference between getInitialProps and getServerSideProps?
Thank you very much 😀😀
We have a video where we went into detail explaining the difference between getInitialProps and getServerSideProps with diagrams - that video url: ua-cam.com/video/61TngxLrP_0/v-deo.html
Let me know your thoughts after watching it. I really hope it clarify your doubts 😊😊
I will watch it right away, you are amazing,thanks again
Thank you for your wonderful video. Can you please give me some use cases that I will want to use ICR? and I just wonder what will happen if there is regeneration within that 20s as well as data changing, so will Next do a new regeneration and serve users with old data first or what will it do? Sorry I am pretty new to SSR and Next, so I am a bit confused.
Thank you 😃
You can think of applications where you have data that changes from time to time (revalidate: number of seconds). That way you'll regenerate your pages from time to time keeping them fresh to your users.
If you have a lot of pages, you can make fallback: true, so you'll generate them in the first request instead of build time.
Your second question I answered with a timeline with revalidation examples at this timestamp: "14:14 ISR Timeline".
I hope this helps 😃
Awesome video as always
Just one question, does London have a lot of job opportunities that requires next.js? (Not just in London, but Europe in general)
Seu canal é sensacional
Cheers from Brasil :)
Muito obrigado Nicolas 😃😃
Existe algumas oportunidades - infelizmente durante os ultimos 6 meses nota-se que ha muito menos oportunidades que antigamente, mas era de esperar devido a esta situacao 😞
Um grande abraco para o Brasil e para ti Nicolas!!!
Estas a pensar vir para Londres? Se sim eu posso passar umas dicas 😉😉
PS - Desculpa a falta de pontuacao, estou num teclado ingles =D
@@BrunoAntunesPT Infelizmente aqui no Brasil também está tendo menos oportunidades que antes :(
Como eu termino minha faculdade esse ano, eu tava pensando em ir para Portugal ou Irlanda tentar achar um emprego na área de programação e depois se mudar pra London para trabalhar tbm(meu sonho hehe)
Seus videos estão me ajudando bastante nessa jornada de tentar se mudar do Brasil
Abraços e continue a fazer ótimos videos =D
Fico muito feliz Nicolas 😀
Neste momento infelizmente as empresas não estão a contratar tanto, devido à situação actual 😔
Tenta aplicar para vários países. Como dizemos em Portugal "não ponhas os ovos todos no mesmo cesto" 😀 basicamente diversifica as tuas aplicações, dessa forma tens mais chances de ser bem sucedido que aplicando apenas para Portugal ou Irlanda 😀😀😀
Toda a sorte do mundo meu irmão ❤️
In ISR (Incremental Static Regeneration) when there is data change and "revalidate" comes into action, is the whole application rebuilt or just the page with the new data?
Just that page is regenerated 😊
And only if you have users hitting the page. If nobody goes to that page for 1 month, we will not have regeneration even if the revalidate value is just a few seconds 😊
What happens if try to access microphone number 20? I havent seen anyone showing how to handle this situation. When the fetch returns no data.
If your database has no data for that microphone, you can either redirect, send notFound, or show a custom page when there's no data 😊 it's your call, nextjs is transparent in that scenario 😊
Hi Thank you for this sharing, a lot of knowledge in this video, i have request, how to implement this part with react query, it would be great if one day you have some tutorial for that, thanks!
You can't do this with react query "only".
You always need to use getStaticProps in order to have static site generation and isr 🙂 then you can use both together getStaticProps and react query 🙂, but until we have react server components "stable" you'll need to use getStaticProps - probably even after (not sure how it will look like in the future) 🙂
bruno i build a ssr app with nextjs and nestjs as back , want to add redux and redux-saga that support ssr, found boilerplates related , but still doesnt get it how things work in ssr like styled-components and redux-saga, please provide a vid with deep how of connect stuff in ssr. ty man.
I don't use Redux for quite a long time - so I don't think I'll make a video about it :)
We already have a video on the channel showing how to integrate Next.js with Material-ui: ua-cam.com/video/k7bKDpw-JGk/v-deo.html
In order to integrate with styled-componets it is really similar. If you want to see code integrating them, you can have a look over here: github.com/vercel/next.js/tree/canary/examples/with-typescript-styled-components
In the Next.js repository, you can also find a few examples with redux if you want to use it - github.com/vercel/next.js/tree/canary/examples
I hope this helps 😃
Question - will SSH and ISR require a Node server?, i.e - it work not run on Github pages, etc.? Thanks. Great video!
Hello Riley 😀
Yes, both SSR and ISR those require a server to run (node.js).
Github pages serves static files (html+json+css+js+jpg+png etc) but doesn't give you the possibility to execute code at runtime - you can only execute code at build time like we did with Github Actions 😊
@@BrunoAntunesPT Thank you! That's great. Loving for the vids.
Thank you very much...
Can I say that whenever the user loads any page the HTML will also get updated after the certain revalidate time? irrelevant of the page is updated or not
Yes, if the revalidate is for example 1 minute, and the last user visiting the page was 20 minutes ago, as soon as a new user hits that page a new revalidation will start (it doesn't matter if the final result is the same html or not 😊)
Just keep in mind that that user will still get the page that is 20 minutes old 😀
@@BrunoAntunesPT if we increase the product price we'll show the updated one after a reload. I guess in that case the SSR would apt. The ISR feature is only applicable for something like Blogs/Contents.
Also, I have another doubt in case if only go with SSR without any fallback/ISR. The build will be the same for each time or the build will be update only the new pages
And thank you for the very quick update really appreciate your kindness.
You can have a look here and take some ideas github.com/vercel/next.js/discussions/11552#discussioncomment-223495
In your case, I would just have a small revalidate number, so when something change I could trigger myself (via code obviously) :)
You can also use getServerSideProps and manage the CDN headers yourself, that way you have 100% control over what you serve and how :)
Sorry I don't understand what you mean by "The build will be the same for each time or the build will be update only the new pages"... can you elaborate? If I understand correctly you are asking about getServerSideProps/getInitialProps, if I understand correctly your question: on every single user request that page will be "rendered" on the server and shipped to your client, but I don't know if this was your question, sorry :)
@@BrunoAntunesPT I have asked each we building the application and we're using getStaticProps means will it only update the new static pages or it'll build every single static page again.
So, that the build time will increase right? Then how can we solve our problem
Also please upload some nextjs deployment videos. I'm currently using nextjs serverless component to deploy to AWS. But I have a couple doubts about setting auto git deployment and custom domain. Please upload a video on this if you have some time. Thanks again for your reply.
And are you available for a freelance nextjs consulting?
Hi Bruno, I feel like I'm stalking you now. I still don't get what process is creating the new pages on re-validate. Seems like there has to be some process in production that can write pages back to the file system for regeneration to work. I feel like I'm missing something everyone else understands but me.
Ahahahh 😀😀😅😅
I don't know the specific line of code inside nextjs that is triggering it.
But when you run your application with "npm run build" and "npm start", on every request (apart from returning the html/json file in disk to the user) , nextjs checks how long ago was the last generation. If the elapsed seconds is bigger than your revalidate value, nextjs starts a new component html+json generation and save it to disk when finalised 😊
Those values (last regeneration time) I'm almost sure are kept in memory, but to be 100% honest with you I didn't dig that deep yet 😊 now that you made me feel curious about it I think I'll have something to do tomorrow night before going to bed 😂😂😂
@@BrunoAntunesPT It seems like there has to be a server running some place to generate the new page, and also, there has to be a routing table someplace that knows where that page lives on the server. What I don't get is that the Vercel people make it sound like this happens and it's still serverless which seems to me, it can't be. I totally get how this can work in development mode (npm run dev), but in production, I just don't get it. I assume the routing table has to be in a server some place and that table has to be constantly updated which means all requests bottleneck through a server? If so, that seems to take a lot of the fun away from deploying serverless. I'm so confused.
Nice!
Thank you 😀😀
Is there a way to do regeneration, but block while regenerating? Say someone visits page in morning, and nobody visited it during night, they will get super stale data, which is sometimes not great.
That's very good question. In my last video I showed how you can do that with a stale-while-revalidate header 😀 that video talks mainly about query params when using getStaticProps, but about half way I show how to accomplish that 😊
Stale-while-revalidate=(seconds)
Hi Bruno, the revalidate set to 3, is it mean every 3 second it will automatically hit to server to catch new data even it is not updated？
Hello Yong 😊
It is not every 3 seconds - it is at most every 3 seconds - it's quite different 😊
For example: If no user hits your page for 10 hours, it doesn't revalidate for 10 hours 😊 when the next user hits the page receives a 10 hour old page and a new revalidation starts, but that initial user receives a 10 hour old page 😊
Regarding data, nextjs has no way to know if you have new data in your database or not, so it will call your getStaticProps and getStaticPaths when it needs revalidation, which cN be every 3 seconds if you have a lot of traffic or in my previous example, only after 10 hours 😅😅😊
I hope you find this helpful 😊
cN = can (sorry for the typo)
@@BrunoAntunesPT Thank you Bruno.
Thank you
Thank you =D
The explanation is damn good. Just tell me that in SSG will the pages be indexed in Google ?? Like SEO in SSG ISR and normally
Thank you 😊 yes, with ISR you'll get all the SEO benefits you are used to from SSG 😊
is revalidate: true will regenerate ,if the api data was same ?
Revalidate is used with numbers in seconds 😊
If a user hits a page that needs regeneration because of time, that page will be regenerated, regardless of data changing or not 😊
will it regenerate the page after 20 seconds even if no data is changed in that timeline by default?
if so what is an optimal time to set for revalidate in say a production ecommerce website?
It will only regenerate after 20 seconds if a user hits the page. If nobody hits your page for 3 days, there will be no regenerations for 3 days. The user that arrives at that page in 3 days will see data that is 3 days old 😊
Regarding the second question, it doesn't check data, it only checks the time since last regeneration, meaning you can have regenerations for days resulting in the same exact page 😊
Regarding The number of seconds, it depends on your app needs. If you have an application where stuff only changes daily, probably having a revalidation of 3600(1 hour) is too frequently. You can have 12 hours 😊
But, if your application is tracking the stock market or crypto, then anything older than 5 seconds is just way too old - in that specific case 3600 is just going to put your company out of business 😊
Did my answer help? 😊
Awesome video! Thank you so much 😁
Just one question... you are Portuguese right?
Sim, sou Português 😀😀 o sotaque não engana, certo? 😅😅😅😅
@@BrunoAntunesPT Sim não engana 😊 E depois como vi que és Bruno só podias ser boa pessoa 😋
Uma pergunta como farias por exemplo paginação de resultados em NextJs? Seria algo mais CSR, certo?
Desde já obrigado. Abraço
Bruno é sempre nome de uma pessoa 5 estrelas 😅😅😅
Quanto à tua pergunta, a resposta depende. Tens parâmetros de pesquisa ou é mesmo só paginação sem pesquisa?
Só mesmo paginação sem filtros tens a minha parte 8 da playlist do nextjs onde fazemos uma microphone store com paginação 😊
Se queres com filtros tens o meu vídeo de paginação na playlist do car trading app 😜
Qual deles estás a tentar fazer?
@@BrunoAntunesPT É isso são sempre 5 estrelas 😁 eu estaria a pensar mais em paginação com filtros, ordenação e pesquisa. Eu venho de uma base de React, logo tudo client side, e estou a tentar aprender Next porque gosto bastante da possibilidade de usar React em server side. Sendo assim vou ver entao a car trading app 😁
Basicamente há duas coisas que tens de ter em conta
1 - todos os teus parâmetros de pesquisa, ordenação etc, convem estar em query params do url (por uma questão de todos os estados da app estarem discoverable - não sei esta palavra em tuga, sorry 😅😅) - ou seja podes partilhar uma pesquisa com outra pessoa.
2- por questões de SEO (e não só) queres fazer render no server side dessa página. Como a página terá milhões de possíveis (filtros, paginação etc) combinações não é algo que consigas fazer render usando static site generation, então nesses casos normalmente irás utilizar server side rendering (getServerSideProps) - obviamente que podes usar static site generation com fallback:true, mas como sempre em informática, "it depends on what you want to achieve" 😅😅😅😅😅
Hello Bruno what about if we want to add a new page say Microphone no 19. Do we have to rebuild the whole application or is there any other way?
Hello hello Sangeet 😀
For the example I'll give let's say we have revalidate:60 😊
In that scenario, when the app starts still without mic 19, if a user goes to /19 we show no microphone, because 19 does not exist. Until this point, no surprises, right? 😊
Let's say 10 minutes after you add microphone 19 to the database. The next user visiting /19 will still receive an empty page even if we already elapsed the 60 seconds. That is because of the concept I talk in the video - Stale while revalidate 😊
Let's say that user visited the page after 60s from the pervious regeneration, nextjs will start a new generation for that page only, nothing else 😀 no other page will be regenerated 😊
The next user visiting /19 will receive microphone 19 😊
Does this answer your question? 😊
@@BrunoAntunesPT Thank you for explaining. I am trying to build a blog so I think this is the way to go so that the blog pages will be static and if I add a new blog I won't have to rebuild the entire application.
Yes, that's a good solution if you are using a database or a CMS like strapi, prismic etc 😊
For the rest of this comment I'm assuming that's for your personal blog, not an application with thousands of users writing posts every second 😅 If it is the second option, then ignore what I will say after this 🤣🤣
If you are writing your blog posts in markdown files in your git repository I don't see a big problem of deploying on every change 😊
I'm saying this assuming you don't write a new blog post every minute or so, maybe once a day or once a week 😅😅😅
Deploying a new blog post every day or week, it's not a huge deal I would say 😅
But once again, it depends on how frequently you write blog posts and where you store your blog itself. For example, markdown on git vs database vs cms 😊
@@BrunoAntunesPT I have tried everything but I can't seem to make it work. I have divided my app into 2 parts- the server and the nextjs. This was made using Mongodb, Node, Express and NextJs.
NextJS - github.com/SangeetDhakal/blog
Server- github.com/SangeetDhakal/blogserver
I am trying to implement this functionality in the [slug] page which is in the blog repository. However, my database is in the blogserver repository and I can't pass an API into the getStatic methods. I have googled it and cant seem to find the solution. I am not a programmer and have only been learning for a past few months taking udemy classes. I would be really grateful if you could find the time to look into it.
I had a quick look and found you are using getInitialProps 😊 github.com/SangeetDhakal/blog/blob/main/pages/blogs/%5Bslug%5D.js
Is that the right page I should be looking for?
I used ISR in my project, in local everything is ok , and i can build it,
But in server , when i tried to build , all pages that used revalidate:"" , plus /404 and /404.html(i didnt have 404 route at all) cause error when npm tried to generate static page data ... what should i do?🤓
I dont know what's that 🤔
Sorry, I don't know what you mean. What is the error you are getting?
PS - If you are using fallback: true, next.js will not send 404 pages - you need to do it yourself like here: github.com/vercel/next.js/discussions/10960#discussioncomment-1201
Hi Bruno, is it good for an ecommerce project?
Yes!!! I think it's where this feature shines the most 😊
They (nextjs team) are planning revalidation via code, which will be even better 😍 but let's be honest, it is already amazing for your use case nowadays 😊
@@BrunoAntunesPT im gonna try this. thanks man!!! 👍👍👍
great video , I think when using fallback : true in a SSG we have to deploy our page in a nodejs Server and not CDN or githubPages because the nodeServer like vercel must handle the page creation at request time and CDN or static host like Github cant do that
Yes you are right 😊
As I said in the video when you use Fallback true or revalidate, you'll need nextjs running on the server (a nodejs server). That means that solutions like github pages are not an option 😊
@@BrunoAntunesPT yes sir i just messaged lee robinson nextjs solution architec at Vercel and told me the same thing.
sir can you do a video showing as how to deploy to a custom nodejs server instead of vercel because as you know vercel handle all NextJS Features out of the box for example as you know vercel can handle hybrid app . i just want to know how to customize a server without vercel
The problem is only related with static site (re)generation when using the features we talked before, fallback and revalidate - - nextjs stores the cache files in disk. So we need a way to share those files across multiple server instances, in case you are using multiple server instances. If you are with a single server instance and not in serverless, then npm run build and npm start will work perfectly for you 😊
A solution for that problem depends on the cloud platform you are using, if you are using serverless or not, if you are using docker or not, if you are using proprietary solutions for that cloud provider or not. As you know the number of cloud providers alone is big.
For example I solved that issue in azure, but I know my solution doesn't work on amazon (as an example) - well it works but needs a lot of adaptions, which would make such video very azure specific, that's the reason you don't see (as far as I know) videos about that topic 😊
@@BrunoAntunesPT i got you sir it depends on the features you are using on that server but as i see the best way to deploy nextJS project that needs nodeServer is to deploy it in vercel servers because as they say in the docs there are some features out of the box vercel handles for you like because as the say ---
--------------------------
A custom server will remove important performance optimizations, like serverless functions and Automatic Static Optimization.
----
What they refer there is using a custom server - that is independent of the fact that you deploy on vercel or azure for example 😊
A common example of a custom server that you see some people doing is using express and integrate nextjs "inside" it 😊 that's a custom server, because express is now the "host" (host is not the right word, but you get the idea)
As long as you are doing your next build and next start, then you are not using a custom server , which means you don't lose any of those mentioned features like ASO (automatic static optimization) 😊
there's no need to deploy into vercel for those specific ones 😊 the static site regeneration is a different thing 😊
In my azure deployment I'm not using a custom server, I'm still doing next build and next start 😊
Back again with some awesome Next.js stuff... Keep it coming!
Thank you my friend 😀😀😀😀
super
Thank you Danny 😊
Show show show, very good explanation, i look for nodemailer contact send email contact form for landing page, do you have an example? Suggestion for a new video. "Obrigado cara, valeu mesmo. from Brasil."
Muito muito obrigado meu irmão 😀😀😀😀
@@BrunoAntunesPT Tava desconfiado do sotaque mesmo. hehee, videos nota 1000. parabéns
Sim o nosso sotaque Português é muito típico 😀😀 o vosso Brasileiro também é muito típico 😃😃
Fico muito feliz de ter mais um Brasileiro aqui pelo canal, mesmo muito feliz 😍 Obrigado Jonas!!!
First thank u for this video, and I guess this solution is not good for web application with large data or site web blog with a lot of articles with categories and terms...etc
Thank you my friend 😃
This solution (with fallback: true) is actually really good for applications with a large data and a lot of items.
If you use fallback: false, then yes, it's not ideal because you'll do all the rendering at build time, which can take hours (or even days in extreme scenarios) 😃
Just to be clear: when I say "fallback: true" I'm also implying that you'll send less paths from getStaticPaths - otherwise you'll end up with the same problem 😀
PS - Every path you send from getStaticPaths will be generated/rendered at build time 🙂
@@BrunoAntunesPT that s my question, for an application with a large users + articles the next js will generate for each request of each user files json+HTML on the server ?? That s good idea for performance of ur storage ?? If ur answer is yes so let me to say the best solution still with cache and not generate files on the server storage, Hop understand my question, thank u
That's not how it works 🙂
Let's say you use fallback:true Next.js generates once per page, not once per access/request to that page. Generating once per access/request is getServerSideProps (server side rendering) 🙂
Let's take your example from the first comment. Imagine you have a blog with one million posts.
Taking into account you are using fallback:true and sending paths as empty array, The first user that goes to page www.blog.com/my-first-post will generate a new html+json. Every other user that goes to that page will receive that previously generated html or json, so no processing in your server and your user receives data super fast. If you add a CDN in front like vercel does, it's nearly "instant" 😀😀
Then as we did in the video if that data changes from time to time you can use revalidate prop in getStaticProps
I hope this helps 😀
@@BrunoAntunesPT tomorrow I will check that en détails and I will share with u na example, thank u