We just discussed some of the different routes that we're going to add into your application before
adding any of these routes, however, I want to fix up one or two small issues inside of her app.
It turns out that when we last worked on our client app, we kind of left a little issue inside of here.
And so I want to identify what that issue is and understand how to solve it.
So we're gonna first begin with a quick reminder on how next J.S. fetches data and provides it to our
different components.
So here's what is going to be going on inside of application very shortly.
We have the app component at the very top and that is the underscore app file inside of our pages directory
right here.
Here's the app component.
This component is responsible for rendering each of the different pages that we're going to create over
time.
So, for example, it's going to eventually display the landing page component within itself.
Eventually these show ticket and show order and so on.
Each of these child components are going to be displayed inside the app component because they are being
provided to the app component as this component prop right here.
So this component prop that is being displayed inside the app, that is the actual page that we are
trying to show to the user.
So the landing page show tickets, sign and sign up, whatever else.
Now, when I walk through the process of how next J.S. decides to show when these components and how
it fetches some data and provides that data to the component as well.
So we're going to imagine for a second the entire flow that next goes through whenever a user tries
to navigate to the landing page component.
So essentially our root root right here.
OK, so here's what's gonna go on.
First off, a user navigates to our route route, essentially just forward slash because a user goes
to that route.
Next, J.
S is going to find the index dot James file inside of the pages directory.
And it's going to try to show the component that we are exporting from this file.
In this case, it is the landing page.
Component.
The next is going to decide to show that landing page component.
Once it decides to do so, it's then going to call the app components.
Get initial props function.
So that is the get initial props function.
We define inside of the app component file.
The goal of this function is to fetch some data that is required to show the app component to the user.
Now, by default, next is all they going to call the app components.
Get initial props.
It is not going to call the landing pages.
Landing page components get initial props function.
It would normally call that function if we had not implemented the app component.
But you and I implemented the app components, that we could have some consistent layouts or essentially
make sure that every page had that header at the top of the screen.
Usually, if we did not define the app component with next J.S., the landing pages component, it initial
prompts function would be called.
But in this case, it is not going to be called.
So next, we'll call the app components, get initial props function inside of there.
We are fetching a little bit of data in this case.
We are trying to make requests to find to the current user is we are doing that inside the app component.
Here it is right here.
That's a refresh the current user.
And we make that request so we can eventually take the current user and provide it to the header component
so we can decide what set of buttons to show inside of it.
In addition to fetching a little bit of data, you and I are also manually invoking the landing pages.
Get initial props function as well.
That occurs inside the app component right here.
We first check to make sure that this child component that we're trying to display has a get initial
props function, and if it does, we call it.
We then assigned the results of that get initial parts function to a page broths and then return it.
Those page props eventually show up inside of our app component and we pass them down into that child
component as a prop.
That is how we are eventually calling and getting initial props right here and making sure that the
results that gets provided to the landing page component.
The very last up next is going to render the app component.
It's going to provide all the data that was returned from the app Capones get initial props function
and the child component that we're trying to show on the screen, which in this case is the landing
page within the app component will display landing page and at the same time pass down all the data
that was fetched by the landing pages.
Get initial props function.
Yes, just a little reminder on what is going on behind the scenes now that we got that reminder out
of the way.
I want to show you a little issue that we left inside of application when we last worked on it back
inside my browser.
I'm going to navigate to our application at ticketing dot dev.
Now, remember, if you come here and you get a big security warning, you can bypass that warning in
Chrome by writing out anywhere inside the browser window itself.
It's like the actual app window.
This is unsafe.
You're not going to write that into the console.
You're just going to type it directly onto the screen.
And that will bypass the security warning.
And once you get the page loaded up.
Try going to the root root and then once you're here, go to your network request log.
We are all the requested of and made and click on the logo on the top left.
As soon as you do that, you'll see that we are making two separate requests to fetch the current user.
So why is that?
Well, it is all because we have one request inside of our landing pages.
Get initial prompts to fetch the current user.
And we are doing the exact same thing inside of the app components.
Get initial props function right there.
We are making a request to fetch the current user as well.
So the whole point here is that whenever we show a page, we are calling the app components get initial
props and the individual pages get initial props as well.
And right now, both those functions are both attempting to fetch the current user.
So we're going to fix this up.
We're gonna make sure that we only fetch the current user one time and that the app component, the
app component is going to be the component that still fetches the current user.
We're going to make sure that the app component passes down wherever the current user is into the current
page or the child component that we are trying to show to the user.
All right.
So a lot of talking, a lot of reminders, lot of lecturing this video.
So let's take a quick pause right here.
Make this quick little fix the next video.
We're going to also fix a one other very quick little issue as well.