So sharing meals works now,
but there actually is one problem with our application.
Everything works fine here during development when using
that development server,
but things will change once we move to production.
Now, to move from development to production, we should quit
that development server here
and then run another script in the terminal,
navigate it into our project folder still.
And that's the NPM Run build script.
This will build
and prepare our NextJS application for production.
It will essentially give us a project
that we could then deploy onto a server.
Now you can run that production server
and that optimized code by then running NPM start.
So first NPM run build, and then thereafter NPM start.
This will start a server,
but now not some development server,
but instead the production server,
which here is still served under the same address,
but now it's serving that optimized code and so on.
Now therefore you can revisit local host 3000
and you should, for example, still see your meals there,
but you'll now notice something strange
when you add a new meal.
For that, I'll again, going to enter some data
and I'll name my meal, tasty Bruschetta,
Very delicious.
Add my instructions like this
and pick the same image as always.
If I now click share meal, I'm redirected.
And this is now quicker, as I mentioned before.
That's great, it's quicker, better user experience,
but the meal is missing here.
I see the three meals I submitted before,
but this new meal is missing.
Keep in mind that I added a text of very delicious to it
and I don't see that text anywhere here.
And there's one other thing
that's pretty strange here on this site.
If I go back to the starting page for example, and I reload
and I then go to browse meals,
I'm there pretty much instantly.
If I'm on this page and I reload,
it also reloads pretty much instantly.
You might recall that before, this took five seconds
because I added this extra delay here in the meals.js file,
this delay.
Why is this missing here in production
and why is this meal we added missing?
Well, because as mentioned earlier in this section,
NextJS performs some pretty aggressive caching
and there is one extra step it performs
and goes through when preparing the app for production
that we didn't see when testing it
with the development server.
Because when you run this NPM run build command
to prepare the app for production, NextJS goes ahead
and actually generates, pre-renders all the pages
of your app that can be pre-generated,
so basically all non-dynamic pages.
So it, for example, pre-generated the meals page.
So this page.js file in the meals folder,
this page here, which outputs some meals,
it was pre-generated, so all that data was fetched
and rendered there during the build process.
And NextJS is doing that
because by pre-rendering all these pages,
it of course has those pages available right
from the start after being deployed.
And so the very first visitor of your website is able
to instantly see the finished page without having to wait
for anything to render,
which of course can be a great user experience.
And NextJS then caches those pre-rendered pages so
that it's able to serve them to all visitors.
But the downside of this approach, of course,
is that it never re-fetches the meals
because this code here never executes again.
Instead, it just uses those pre-generated pages.
And I can prove that we can simply console log,
fetching meals here in that meals component
that's being used by the meals page.
And if I do that and I then rebuild my project
by running NPM run build again, you will see
that it generates all those pages
and then once it's done, if I start that production server,
if I reload the meals page, I don't see fetching meals here.
I get some warning that we might want
to install some extra package when using
that image component, but we can ignore that here.
The main thing is
that we don't see this message being logged,
so that is not executing anymore
because those pages were pre-generated and cached.
But that's of course a problem if the data that's visible on
that page changes as is the case for me here.
Now you can see that latest meal I added earlier now
because I regenerated all the pages,
but if I would add another new meal here,
it would again be missing.
And that's of course
absolutely not the behavior we want here.