As I mentioned at the end of last video we are going to now focus on this landing page.
We need to figure out whether or not the user is signed in at any given point in time and then display
on the screen.
Either you are signed in or you are not signed in.
Doing this is going to be a little bit more challenging than you might expect.
Just because we are using server side rendering I first want to begin this video by giving you a quick
reminder of how we can decide whether or not we are signed in in general.
So here's what we want to do.
We want to make sure that we make requests off to our service specifically a request to the API users
current user route.
If we are signed in then the response we get back is going to have some information about ourselves.
So for example our I.D. our email and so on.
But if we are not signed in and the response is going to have no to ultimately that's what we want to
do to find whether or not we are signed it.
We gotta make a request off to this current user end point.
Now the real question here is when are we going to make this request.
Chances are that whenever a user makes an initial request to our server.
So this initial request to get our application we want to have some kind of H.M. file being immediately
sent back with some relevant content inside of it.
In other words this Asian all file that we send back immediately needs to say whether or not the user
is signed in.
That means that we need to figure out essentially how to make the request while our application is being
built or served from our next J server so we can have to inspect this entire server side rendering approaches
a little bit more and get a better idea or understanding of what's going on with it.
So quick diagram.
All right.
So here's what's actually going on behind the scenes.
Whenever we make a request to our next GSA application so request is going to come into the next JSF
and on our client pod or inside that container the following logic is going to be executed next J US
is going to take a look at the URL of the incoming request and based upon it you're all going to decide
what components to show.
So in other words it's going to decide whether or not it needs to show the sign up page or the banana
page or the root root page then for each those components that it decides that needs to show it's going
to call the get initial props static method for each of these relevant components.
What is get initial prompts.
Let me show you back inside my code.
Ed I'm going to find my index dot j ust file inside of here we've got a very simple component function
right now I'm going to update this thing just a little bit.
I'm going to change the name of this or I'm going to assign this function to a variable I'll call about
landing page I'll then do an export default of landing page down here at the bottom then in between
the two I can say it landing page dot get initial props so this get initial prop setting is specific
to Next j us if we decide to implement get initial props the next J ust is going to call this function
while it is attempting to render our application on the server get initial props is our opportunity
to attend to fetch some data that this component needs during these server side rendering process so
if we decide to implement get initial props it'll be automatically called on the server when next J
US decides to show this component once get initial props is invoked any data that we return from it's
not usually in the form of an object is going to be provided to our component as a prop so we're going
to render each component that next decided to show with whatever data we return from.
Get initial props next to us and then going to take the smell from all the components it rendered and
send back a full response.
So long story short if we ever want to fetch some data with next to us during the server side rendering
process we are going to define this get initial props function right here and this is where we can make
some async requests we can somehow generate data whatever we need to do to fetch data.
We are going to implement inside of get initial props and this function will be executed on the server.
We can not do any data loading inside of components themselves when we render a component with Next
j us during these server side rendering phase.
We don't get any opportunity to make requests all of our components are executed or rendered just one
single time.
So we cannot attempt to say make a request and then wait for the response and possibly try to update
some state or anything like that.
Instead each of our components during server side rendering are just rendered once we take the result
and that's it.
That's what's gonna be sent back to the user.
Now of course after our application shows up on the browser all bets are off.
Get initial props not really used anymore.
Instead we're going to rely upon our components implementation.
So all this discussion around get initial props is really just about these server side rendering process.
That's it and they help you really understand how this stuff works.
Let's just put in a little bit of test code inside this index dot J has file inside of get initial props.
I'm going to put in a console log of I am on the server and then after that I'm going to return an empty
object to this empty object right here is going to show up as props to landing page to make it a little
bit more interesting.
Well let's put some imaginary data inside there.
I can put in how about a color of red.
Now I would be able to access that property as a prop inside this component so I can pull out that color
property and I'll do a console log right here of I am in the component
and after that I will print out the color.
Let's save this.
Now let's go back over the browser and try to test this thing out.
I'm going to navigate back to our main landing page and then once they are going to make sure that I
refresh the page manually at least one time you'll notice now that we've got a console log right here
of I am INDY component and we see red and if I I'll also go back over to my terminal.
Most importantly we'll see a console log right here of I am on the server I am in the component.
So what's the lesson here.
Well again this get initial prompts function is going to be executed during the server side rendering
process.
This functions where we're going to attempt to fetch some data specifically for doing some initial rendering
of our app.
Any data that we return from this function is going to show up inside of our component so we can freely
access all the data inside there if we need to fetch any data during the server side rendering process.
We have to do inside of get initial props.
We can not do it inside of a component.
And then finally once our entire application is executing inside the browser we're not really going
to rely upon it get initial props too much after that.
Instead we're going to be mostly concerned with fetching data as usual inside of a component.
Yes.
Now we've got some backstory on server side rendering.
Quick pause right here and continue in just a moment.