Ryan Chenkie: [0:00] If we take a look at the component that powers this dashboard view, and we can get to that if we go into pages into dashboard.js, the way that we are fetching data for it looks pretty much like it always has.

[0:12] We've got this UserFacts at the top of our components where we go to get some dashboard data. We use our fetchcontext.authaxios, and we set the result on state. We can see this if we go to our dev tools. Let's open up dev tools.

[0:27] In the network tab, we can get a view at the request that gets made for dashboard data. We'll refresh and then we've got this request going to dashboard data. It's giving back our data. It's giving back a 200 response, and that's coming from our API.

[0:41] This works just fine, but as it stands, we're not taking advantage of what Next has to offer. What Next has to offer specifically is that we can get this data on the server-side before the application renders.

[0:54] Server-side rendering is good for SEO. It's good for performance. Generally, it's something we want to be doing if we have the tools to do so. Of course, with Next, we do.

[1:04] We can change things up here to retrieve this data from a Server-side render. To do that, we come down to the bottom, and we export an async function called getserversideprops. This function needs to have exactly this name. It has to look exactly like this if we want it to work.

[1:23] We'll get access to the context through this function, so that we'll have information about the request. Everything that's going to happen inside this function is happening on the server before the React application is going to load.

[1:35] Let's set up a Try-catch block here. What we'll want to try for is to get this data from the server-side. The tools we typically use to make calls for data are generally coming from Fetch context. We've got this auth axios instance that we're using to make request.

[1:52] The problem is that we're not going to be able to use context within that getserversideprops function. That's because it sits outside of the regular React lifecycle. Instead of relying on context, we've got a utility now to help us make requests. It's more geared towards use within that getserversideprops function.

[2:12] Let's import this new utility called private fetch, and that's going to come from, we'll go one level up in to utile and into fetch. Then back down in the function, we can make use of it. Private fetch wraps axios and we can make our axios request like we typically would.

[2:32] We'll look for a constant called data that we're going to try to de-structure off here, and that's going to be an await on private fetch. Private fetch is set up as a function. It accepts this context object that we've got and then it returns an axios instance, so we can call our axios methods.

[2:49] Let's call get and we want to try to get dashboard data. Once we've got that data, we can return this object that will have props and then we'll pass the data as a prop. Let's look for an error as well. We can get the data for an error like this. We'll say, consdata=error.response. If we get that error, let's return props that will have data with an object which has that error message.

[3:20] This code is going to run on the server-side, and then it's going to forward this data if we get it as props. We'll be able to pick it up as props in our dashboard data function here, this function that powers the component.

[3:33] Let's look for this data object. If we get it, we can immediately set that data on state. What we'll set here, maybe we'll set data or an empty object if nothing exists. Let's take out this UserFacts call here because we no longer need to run that request on the client side. We can also get rid of fetch context.

[3:55] Let's save that. Sometimes we need to go and manually refresh. Once we do, we've got our data. What we'll notice now if we clear this out and try again, is that there is no longer a call for our dashboard data that's visible here within the dev tools. That means that there are no http requests going from our client to our API. All of that is happening on the server.

[4:19] As it stands, there's nothing on our API which is guarding access to this data. For example, we're not even really logged in to the application here. We don't yet have a JSON Web Token set in a cookie, and we're still able to get access to the data. Next, we will log ourselves in and we'll protect that dashboard data endpoint.