In the last video we wrote out some scaffolding for the app component and then I very abruptly ended
the video saying oh yeah I did initial props this time round is going to be slightly different or candidate.
There was something different this time around.
So remember at this point we've been talking about get initial props as it has been implemented inside
of our different pages.
We are not technically working in a page right now.
Instead we are working inside of a custom app component that's going to wrap up a page.
Unfortunately this is kind of a tough thing to keep in the back of your mind when you're making use
of next to us.
The arguments that are provided to the get initial props function for a page are different than the
arguments that are provided to get initial props for the custom app component.
So as we just saw inside of a page components our first argument is some kind of context object and
inside there was that rec property that was request and that was the property that we cared a lot about
because it had that set of headers that was coming into our application from the user's browser so we
really want to make sure that we got access to that rec property so we could use it to eventually build
up our axles client when we are defining the get initial props function for a custom app component.
However the Rec object is a little bit nested inside of that first argument.
So again the first argument is different between these two types of things.
It's I know kind of a nasty thing but that's life.
That's just how the authors of next decided to put the stuff together rather than that first argument
just being a plain object that has the REC property write directly on it.
Instead the Rec object is nested on this s.t. ex property s.t. ex being short for context let's do a
quick console log here just to kind of verify that this is the case the inside of get initial props
I'm going to receive this first argument that we're going to refer to as app context just to kind of
clarify and make it a little bit more obvious that this context right here is different than a context
inside of that landing pages give initial props.
Now this app context if we did a console log of it directly we would get a ton of information because
there's a ton of different properties nested inside there.
So just make this thing a little bit easier to read.
I'm going to only print out the keys of that object to do so I'll do a console log of object keys on
app contexts and then go into return an empty object.
Let's save this.
I'm gonna go back over my browser and do a hard refresh the page.
Now I have to refresh on this page if it says that you are not signed in.
Even though you might be really really really sure that you are signed in that is OK and then going
to go over to my terminal and now I can see the keys console logged right there.
So again on this app context thing we get arbitrary component router and s.t. X and C2 X is what we
really care about because nested on there is still going to be that same wrecked property that we want
to pass off to our build client function.
All right.
So again that's why we kind of abruptly pause a video.
You're just so we understood that we have to adjust how we call build client this time around.
So long story short here's what we're gonna do.
We're still going to build up a client falling build client but this time around because we are inside
of this custom app component.
We're going to instead pass an app context that CGI X..
That's pretty much it.
Once you've got the client put together we can still use it as usual to attempt to fetch some data for
example.
I can still do a data is a weight find dot get to API users are int user and then I can still just return
that data.
I'm gonna make sure I mark the enclosing function as a sync and then for right now.
Just make sure that we are executing this function and successfully making this call.
Let's just do a console log of data right here.
Unfortunately this awkwardness around app context is not the only thing we're going to have to kinda
struggle with here.
So you're gonna notice that the application when we refresh it is not going to really work as expected.
Right now I really just want to verify that we are fetching some data in console logging it out.
Let's save this once again flip back over to my browser do a hard refresh of the page.
Then go back over to my terminal and I should see a console log of current user right there.
Okay so we're definitely able to fetch the current user.
That's good at least.
So now let's go back over to our index dot j ust file so we've now got a get initial props into locations.
We have one for our landing page and one for our custom app component I want to do.
Just a quick test here.
Back inside of the landing pages get initial props.
I'm gonna put a console log inside of here.
Of landing page.
Like so all then save this and then going to refresh my browser once again and then go over to my terminal
and when I do so you'll notice that we do not have a console log from the landing pages get initial
perhaps function anymore.
So this is another kind of little awkward thing around next.
And this is kind of what I was leading to back on that diagram really quick back over here.
I'm sorry.
I know I'm clicking around a ton very quickly so I told you that when we define a get initial prompts
for the app component we still needed to make sure that we can have a get initial props tied to an individual
page.
So unfortunately when we tie initial props to app components you get initial prompts functions so we
tied to an individual page do not get automatically invoked anymore.
So the reason that we just added in a console log inside of the landing page condition props was just
show you that because we just added one to the custom page.
Now this old one not getting called anymore.
Yeah I know.
Next is just a little bit awkward sometimes.
You know it's it's a great framework and right now you might be thinking wow this is like a lot of work
Stephen.
And why are we going through these really intricate steps here just to figure out how to use server
side rendering on a micro services course.
I know this is starting to get really off topic.
But trust me I really wanted to cover some aspect of server side rendering this course.
And if we had tried to do all this stuff by hand we would've been in ten times a world of hurt and it
would have all been ten times harder.
So I know that we're running into some awkward challenges here but trust me we're almost through it.
Let's just stick together a little bit longer.
OK.
So again our whole issue here we definitely need to be able to run get initial props from both locations
but as soon as we added it into this new custom app component our second line or the original one stop
getting invoked.
So quick pause right here.
We'll figure out how to fix this in just a moment.