In the last video we had a quick discussion around how we fetch data during the server side rendering
process.
So let's get back to our topic at hand.
We are trying to make sure that we can display on the initial response that comes back to the user's
browser on that initial HMO document whether or not the user is signed in.
So we need to make a request to figure out whether or not the user is authenticated during the server
side rendering process.
So that means that from inside of get initial props we need to make a request off to our off service.
That's our goal.
We know that we're going to have to place this request inside of get initial props because only get
initial props or get initial props is the only location where we can fetch data during the server side
rendering process.
So with all that mind let's go back over to our editor and find our index dot J.S. file at the very
top.
I'm going to import exiles from Exodus.
Now we're gonna make access to make the request.
And as I say that you might be curious why are we using axioms when we just put together that use request
hook a little bit ago.
Remember we create a user request to make it really easy to make some kind of request and possibly handle
any errors that might occur.
The reason for this is that user request is a hook and hooks are used inside of React Components get
initial props right here is not a component it is a plane function we call this thing or I should say
Next j s calls this thing and we are required to immediately return some data so we can only use use
request inside of a react component.
And as I just mentioned in the last video we are not allowed to fetch data from inside of a component
during the server side rendering process we can only fetch data from inside of get initial props.
So that's why we are using axles instead of user request all right.
So let's make use of axioms effect some data from inside of get initial props I'm going to put on the
async you were right here I'm going to get a response from a weight axles that gets API users current
user then we're going to take the response right here or more precisely we're going to take the data
out of it and return it from get initial props as a quick reminder on what response we should really
expect to receive back I'm going to pull open post man very quickly just to give you a quick reminder.
All right this thing is slow to open.
But here we go song and make a get request to users current user and we expect to receive back an object
that has a current user property and if we are signed in we should see an object there.
Otherwise we will see no.
So that is the structure of data that we're going to expect to receive back.
So that's going to be on the response not data property.
So from this function will return response not data like so that means that now inside of our component
itself we should get a current user property there.
Right now let's replace that console log and just do a console log of current user.
All right.
So I think that this is ready to test.
I want you to know that the code we have inside of here is good.
Everything inside of here.
This is how we correctly fetch data.
However what we have right here is not going to work for some very interesting reasons specifically
because we're making use of this Cuban Eddie's system and all is kind of crazy stuff.
So again the code we have here is good but we're going to have to add in a little bit of a configuration
change to get this stuff to work just because of how we are making use of next J.S. specifically inside
of a cougar his environment.
Let's save this I'm going to put back over to my browser and I'm going to refresh the page when I do
so I get a real nasty air air connection refused local host.
That's essentially what that IP is.
Or 80.
Well that might be a little bit unexpected.
Let me show you something really interesting.
Back over inside of index.
Yes.
I'm going to come in out get initial props and I'm going to copy the axial start get call to inside
of my components.
I'm not going to put a weight on there or anything like that.
I'm just going to attempt to make the request from inside the browser and then go to save this look
back over now.
Looks like everything is loading up successfully again.
But what's more relevant is you'll notice inside of my network request log I was able to successfully
make the request off to our art service.
So let me summarize what just happened here when we tried to make this request while we were executing
this code on our server it failed horribly and we saw that really mysterious error message.
But when we were making that request from inside the browser everything worked as expected so there's
some difference in environment here.
Something is very different when we try to make the request on our server versus on our clients or really
inside the browser itself.
Let's take a pause right here.
We're gonna come back the next video.
I'm going to help you understand exactly why we're seeing this oddity.