Securely Fetching Data in NextJS 13 Server and Client Components!

yo what up in this video we're gonna take a look at how to securely work with secure data in Nexus 13 the client and server side components they've been out for like a couple weeks and in this video we're going to take a look at how the security work with data so you don't accidentally leak anything to your client which would be kind of bad so let's get right into it so here we are in a brand new well not quite brand new but in a rather new next year is 13 application and by the way if you're wondering how to do this you can go into your command prompt and then type npx create next Dash app at latest experimental Dash app and that's how you create you know like a newest version 13 app that also has the characteristic app folder instead of or you know in addition to the pages folder now to really understand how to work with secure data and these components let's take a look at how you would go about data fetching the old way right so oh actually let me make the code a bit larger for you so in the next S12 and then we turn off GitHub co-pilot there we go you would have an export function get server site props that could receive a context as the first argument right here we don't worry about that right now let's say Khan's title is equal to hello world and then we would normally return that title as an object like uh props that props is an object and that object has the title inside of it that title would then get passed to the props of the page that we have typed here now that's only relevant if you're using typescript if not then you don't need to worry about that and essentially um when we start the server then we see the oh we see the page because we need to go to slash alt and there we see Hello World so um we get the hello world from the server pass it to the client then it gets rendered on the client now the new way of doing this does not involve any like anything like that so we don't pass any props and we can uncomment this because this is how we will do it the title is going to be await get title and we're gonna Mark the main page as asynchronous now that is very very different we couldn't do that before next.js13 now the type changes so you can see we have a promise of an jsx element so we can say we are not receiving any props but then we can copy the type from here we can say promise and that is promising hsx dot Element no it does not know what it get title is so we also want to uncommon that it is also an asynchronous function that mocks an API delay right here and then after one second returns this string alt to the client um right here so not through the props but we actually get it inside of the component itself now if we save that get rid of the unused import save that you will see what happens we get an error that says object are not valid as a react child found object promise why is that happening well because the old way of doing things which we are doing because we're in the Pages directory so everything still works the old way in this directory doesn't work now if you do the same thing in the app directory though so if we go to the page and then say cons fetched data is asynchronous it's a function and then we can just copy the delay from here and insert it here we say await delay let's do one second and then we return the string hello world and now in here we can say const data is equal to fetch data now that's what we need to await because this function is asynchronous and we also need to mark this asynchronous to be able to await now that changes the type again so it's not going to be FC anymore but it's going to be an object that is of type page props and essentially we are returning a promise and we are promising what are we promising well a jsx oops J as x dot element there we go and that's what we can do so we can insert the data here and it should say hello world when we go to the normal page so navigate away from the old page go to the normal one and here we can see okay hello world hello world this works properly now if we wanted to do this with an environment variable like an API key so with secure information I think it makes sense to take a look at how we will do that so let's have a DOT env.local and inside of this we will define an API key and let's just call the API key one two three we can close the old one I just want to show you what happens and now in here by default it actually has these are server components so that means instead of having the get server side props essentially this is one big ass get server side props so we can work with the API key we can say API key and then say um just log it out to the console process.env.api underscore here save that page and you can see in the console API key one two three because we have access to the API key on the server side we don't have access to the API on the client side so what we couldn't do is say for instance const data is equal to process.env dot API underscore key so technically that should be one two three right so data would be one two three but instead what we get is oh we still we still get that because we are still on the server now if you were to turn this into a client component though so use client because we are rendering this on the server it's totally safe to do that now if we were using a client component by changing that we would get an error objects are not valid as a react child found object prompts so it won't let us work with um API keys on the front end now if this was a next underscore public API key though let's change that next underscore public I didn't prepare for this example but I'm very curious to see what happens let's reload the page and that still doesn't work interesting param is undefined okay interesting I thought that that could actually work um but the the point I wanted to show you is that we cannot work with secure data when we turn stuff into a client component now how do we work with secure data though if we want client components because well I've got the documentation open here on my left and as you can see they've got a little chart when you might want to use client components and the most common use case is like you know having stayed on click on change things that you have in nexjs or react a lot so if you want to have state right here same number set number it's in number and number zero by default we need to import your state say we wanted to have some interactivity in this client right how would we go about fetching data then even though this is marked as a client component and I think the best thing you could do for that is having a utils folder let's call it get data.ts and essentially what we're doing is abstracting the logic we have right here the fetch data inside a different file and you'll see the reason we're going to do that in a second so let's call it export constant get data it's an async function and essentially what we can do is just return a string that says hello world so just say this is the data we're fetching now on the front end a promise of a stream so we also need to await the data what happens if we save this well nothing changes we're still getting the same error now if you wanted interactivity in this client though the way to go is creating a different component for that blocking that as a client component and then passing the data from the server to the client component so let's create a folder called components let's call this component hello world dot TSX initialize a functional component and that component can receive the message and that message will be a string so what we want to do is pass this message right here to this client component so use client that also has interactivity something like a state so number set number is going to be a number it's going to be zero import the U state so essentially the same thing as we wanted to do here now we remove the interactivity from the server component that we're going to make now to the client component and then we can pass the data to the client component so we can say hello world and that hello world we need to import it expects a message and that message can be the data that we await right here at the top level of the component which was not possible and before next.js 13. now we turn this into a server component this into a client component and we have interactivity on the client and we are working with a secure data on the server components now we can reload the page and we can see that hello world does render but we do want to render the message in here just to show you that it works we can reload and we see Hello World so the secure data we get from right here I will or we could even pass the process.env.api key itself which will be one two three now this doesn't work but we can just um hold up can we just yeah okay we can just do that and you can see we pass the API key to the front end now that is not something you you'd normally do um but just to prove you can work with secure data here and then pass it from a server component to a client component that's how you work with secure data now one very important step would be to declare this get data as a special file and that is why we created a separate file for it so the official Nexus documentation they recommend a package called npmi server Dash only and what that does is instead of the error that we get when trying to load data on a client component um let's just come that out for a second say hello in here so we turn this back into a client component and trying to work with secure data which won't work but it won't work after we start the server let's read out the page give it a second and now that's going to throw a lot of errors um and if you're working with other developers it makes a lot of sense to import the server on Observer only up here in the get data so that way when we read out the page it's a way way better error message as you can see it says you're importing a component that needs server only so this would be right here that only works in a server component but one of its parents is marked with use client so it's a client component so it's a very verbose error messages it's telling us we are trying to work with secure data that the client should not have access to so the process.env.api key on a client component which would you know cause a data leak which we really want to avoid so it tells us either you're not allowed to do that or um it you know it even gives you a list of one of these is marked as a client entry so that's really helpful as well so it tells us abstract that interactivity away so we can turn this into a server component and then pass the data we get from fetching into a client component so the client never gets access to any of our secure data except if we literally pass it to the client component but that's not what what you would normally do and that way you can work with secure data in Nexus 13 without leaking any information to the client now what I really like about nexjs in general not only 13 is that working with secure environment variables is pretty intuitive and easy so even in Nexus 12 if you were to say process.env.api key on the front end it would still not leak the information to the client it would just return undefined point for the environment variables now that is all I wanted to show you in this video that's pretty much it if you are interested in environment variables I've done a video on that in the past I'm going to link it to you in the video description thank you very much for watching I wish you a lot of fun a lot of fun um working with secure data in your next project see you in the next video have a good one and bye bye

Channel: Josh tried coding

Views: 15,977

Keywords: nextjs, nextjs 13, env variables, nextjs env, nextjs 13 env, nextjs 13 data, nextjs 13 data fetching, nextjs getserversideprops, nextjs 13 getserversideprops, josh tried coding, joshtriedcoding, react, typescript, tailwind

Id: RK3xRielPl4

Length: 14min 4sec (844 seconds)

Published: Wed Nov 16 2022