Understand the Supabase SSR Package easily

it's not you the problem isn't you the new super base package with its deprecation notice of the old off helper packages got people confused and it got me confused as well and when I did talk to Paul the other day he also promised that they'll be more careful in the future with stuff like this now hopefully after this video there's no more confusion about it because I'll shed light on what the superbase SSR package does and how it works and after that hopefully you'll ask yourself why did we ever have framework specific off helpers because having a generic one really makes it easy to implement it anywhere before we jump in I have one more challenge for you you friends are soon hitting the th subscribers on this channel which is awesome but next year I want this channel to get to 5,000 and maybe we'll do a stream party so jump on board hit the Subscribe button and now enjoy the [Music] video very honestly the existing off helpers were super confusing I mean we had create server component client we had client component client middleware client client server client Cent C why why do all all of those need a different client in fact they don't and that's what super base recognized as well so they came up with that SSR package but funnily another thing that's confusing with that one is it's called SSR but it also exports a front end function naming wise a little bit of mystery mixed up but don't worry I'll explain it now before we get rid of anything you have we want to have a look at that new package P AG so install it with npmi superbase and then SL SSR and when that's installed let's have a look what it exports all right that looks cleaner and from those three exports we're really only interested in two create browser client and create server client okay let's start with the first one what is it and why does it exist create browser client works in the same way as create client superbas JS which means if you want to use super base on the front end for example a nextjs in a client component or with the older Pages router in a Pages component that means if you want to use superbase in the frontend you'd have to do create browser client and then pass it to superbase URL as well as your key and since that is super annoying to write all the time you just create a new file in a folder like util for example you just name that file superbas JS and then you just export create super base front end client then you return create browser client from the SSR package and now you can replace all of the cences in your project where you use create client component client or create Pages browser client or even just in any project that uses create client create client but this opens up a valid question why do we have create browser client when we can simply just use create client from the superbase GS package well they are in fact very similar they can both work in a browser however the create browser client internally uses create client and slightly improves it by using a so-called single singon pattern which avoids the recreation of a new front end client all the time and it's essentially the exact same thing as in the off helpers when you used either create client component client or create Pages browser client so that's that so you're good to go on front end just import your new function where you need it okay but that's just front end what about backend backend is a little bit more complicated but promise once you understand it it's very easy let's start with a framework independent explanation first so make sure to import create server client from the same package and now we also want to do the same as we did for the front end one so create super base server client and you guessed it it's the same Approach at first let's also make sure we use a proper nextjs variable okay looks like it's done but isn't and this is where you have to pay attention in a browser everything's the same there's a standard way of accessing cookies and writing cookies in a server there's not in terms of Standards there is one HTTP headers the problem is how to access HTTP headers in each framework that's different for each framework now we're coming to the point superbase just can't know where to get it from in such a generalized package and this is what the off helpers did before the next sh is off helpers for example but at the end of the day the only difference was how to read and write the cookies and this is what they generalized with this new package so we have to pass away for the create server client that it knows how to read and write cookies and that's an object in the first parameter you provide a cookies property and within that you provide three functions the first one is telling super base how to get cookies so super base tells you the name and you have to return the cookie with that name the second one you guessed it is how to set cookies that's with a name value and some cookie options and now there's just one thing missing that's deleting a cookie and that's done with remove also takes name and options now you know how to create server client works but you don't know how to implement it so the question now comes down to how can I get and set cookies with nextjs and in nextjs there are exactly two ways dealing with cookies the easy one is with the new app router it's in server component and and in server actions and in route handers and that's the cookies utility function the other one is by request and response object so getting cookies from the request object and setting cookies with the response object and this is also important in app router for the middleware and it is important for all of the pages router because in the pages router there is no cookies utility there's only request and response object that being said you guessed it we need two create super based server clients one for request and response object for the pages router and the middleware and one for the app router for Server actions rout handers and the server components and if you asked yourself why I did change my clothes for just saying that I did not because I just forgot to say it and now it's the other day let's start with the app router version because that is very easy I'd like to have it neatly separated so I'll create a new file super base app router client I'll move all of the code there and I rename that function to create super base app server client then simply import cookies from next headers and getting a cookie is done by calling cookies get passing the name and then its value and since it could be a cookie that potentially does not exist let's make sure that we don't throw an error so let's do conditional chaining return all of that and we're good to go with the first one the second one is very similar we call cookies then set we pass name and value and then the options pretty straightforward deleting a cookie is done by deleting its value so we'll use again set set the value to an empty string and pass the options now before you use this please pay attention again this function will work fine in server components in route handlers and in server actions but there's an ATT case for Server components in server components you can read cookies which is important for super bay to do proper requests and fetch data but server components are already in the last chain of nextjs rendering they can not set or delete cookies that's not a problem normally because you wouldn't call any of those functions in a server component that trigger this something like reset password or sign in that's what you would do with a route Handler but just to make sure you never run into trouble let's pass an additional Boolean that we call server component and that is initially false and if that's true then we want to avoid setting cookies as at all costs all right now you're perfectly done and now wherever on the server with next's app router you want to use super base just use that function for example here and this is how you can get rid of all of the offo functions with the new package not that hard right and since I am in a server component I want to pass through just to be on the 100% safe side and now to make this super convenient vent we'll export another function which we call create super base server component client that's a long function and the only thing we do here is returning create superbase app server client with true and now you can simply use the first one without passing anything in server actions and Route Enders and this second one in all of your server components let's do that go to page which uses the old create server component client and replace it with our create superbase server component client and if you're not using middleware with app router then you're done if you do use middleware with app router that's what we'll look at now and it's the exact same thing as with the pages router so I have this middleware file here middleware JS which does really nothing it just does an askjs to continue with the request the middleware gets past the request object and the response object we just created now say you wanted super base here unfortunately you cannot import cookies here from next headers that doesn't work with the middleware you have to work with request and response object that being said you need a superbase server client which works with request and response object so let's create another file super base rack rest client let's copy some code from the app router client which we just created then we export a function create super base recess client and then paste the code we copied first things first we will definitely have to work with request and response objects and now we have to read cookies and set cookies based on those two you can do that manually but it's kind of annoying and there's a very small package that does it for you it's called cookies next and it works with the newest version of nextjs as well as with older ones so let's install it and then you can just import get cookie and set cookie from cookies next getting the cookie then looks like this we give it the name and the request and response object setting a cookie is very similar you pass the name the value then re and rest and you also pass all of the options and you guessed it we copy paste that for removing a cookie we copy paste the set cookie and pass the value as empty and now you have the function that you need for either the pages router or your middleware so you can initialize super base here by calling create super base regress client and passing W and press object now you really have all you need and you can get completely rid of the off helpers package so happy removal there all right that's it now if you have any followup questions just put them in the comments and now whenever you're watching this at whatever time in whatever City I wish you a great day cheers

Channel: activenode

Views: 6,561

Keywords:

Id: XIj7nmIYtbo

Length: 13min 55sec (835 seconds)

Published: Sun Nov 26 2023