Why you can't set cookies in Server Components
2024 ж. 9 Мам.
5 615 Рет қаралды
Today we're going look at why you can't set cookies when rendering server components in Next.js.
- 0:00 - Intro
- 1:22 - Setting cookies in RSC
- 2:43 - Suspense
- 5:13 - Streaming
- 6:55 - Anatomy of an HTTP request
- 9:22 - Setting cookies in Next.js
For more videos on React check out buildui.com/
Such an undersubscribed channel. Learned an insane amount from this video. Thank you for what you do, Ryan!
Thanks Ryan, keep uploading we love your videos!
Glad to hear it! I've got a few more videos based around RSCs that will be coming soon!
Thanks man, you solved my bug because I got pissed of from last 2 days !! Please bring more about react server components !!
Awesome glad it helped!
Thanks for sharing man!
Ryan this is really good information 👌
a brilliant and advanced video. thank you
Glad you liked it!
Nice video! I got into this issue and never understood why I couldn’t do it
Glad you liked it!
THANK YOU, this video really helped me.
This is awesome thanks… I was literally just working on this. I ran into an issue trying to encrypt the cookies. The crypto library isn’t available in middleware because of the edge runtime. But… the web api for crypto is available which I’m working on now.
Great content, I really like the way you explain in such simple terms. Also noticed your @twofold/framework which seems great, have you thought on making a course on how something like that could be created?
Thank you! Ya that's a great idea for a course. I think once React 19 is released there will be a great teaching story for RSC from scratch.
Really good video!
Thank you!
I remember back in my PHP days we were constantly presented with "Headers already set" if we ever tried to set a cookie after the headers were set. Not sure why we can't be presented with the same error if we tried doing that
Hi Ryan, Thanks for the detailed explanation on cookies. I am having one problem with cookies. I am setting cookies in middleware in response and setting of cookies will happen to particular route only. After setting the cookies, i am accessing the cookies in my navbar using next/headers. Every time i try to access the cookies i am getting old value and not the updated values that is being set in middle ware. Why is that? Can you please tell me what is the wrong here.
Hmm, sounds like there might be a bug somewhere! Have you tried making a minimal reproduction that highlights the issue?
@@RyanToronto No, I didn’t try in minimal app. May be i will check it out. I want to know is that possible to get updated value which is being set in the cookies through middleware. Example: i added the middleware and inside it i am setting the cookies which is next url path. I added the config which is /about (so this middleware is run only in about page). Now when i access the about page, cookies will set through middleware, now i want to access that cookie in about page. Every time i try to access that cookie i get old value not newly set cookie through middleware.
Great tutorial. you should start an ASMR channel! voice is so relaxing.😅
what if we want to save data gotten from our backend server to cookies how do we do that with the nextjs middleware?
I believe you can fetch data from your backend inside of the middleware function, then use that to set the cookie.
Ohh alright thanks@@RyanToronto
@@RyanToronto i would still love a platform to discuss with you on some other questions i have, where can i dm you ?
Subscribed, can I protect routes with Middleware using encrypted user data stored in Cookies? thanks a lot and keep up the good work.
I think so! I would need to hear more, but I think signed cookies that are verified in middleware is a great place to start!
Sir，how do we implement theme switcher by using cookie so that when page gets refreshed users wont see a flicker/flash or a blank screen before theme got changed in nextjs 14 app router 🙏
Great question! For this one I think I'd read the cookie while rendering a server component and use that to control the theme. You can read more about reading cookies in Next.js here: nextjs.org/docs/app/api-reference/functions/cookies#cookiesgetname
You can read the cookie in server components, just can't set it. If you want to set it, you have to call server action from a client component. So if you want to set the cookie in a server component, you can use a Provider (client component) and pass the values you want to set to that provider so that it can call a server action to set the cookie.
@@prohacker5086 Thank you for the reply, it would be best illustrated with a sample codes 🥰
Hi, man. I have a problem with cookies. I have backend api(i dont want to use next as backend) and I want to send on my backend from my next app request when web site is loading I try do it on server components but in this case cookies are not transmitted(Cookies have refresh token and access token). How to slove it? Or do I need ti make a request from client component? Sorry for my English, I just started learning English :)
That's great english from someone who just started learning! I think I would read the cookie (and the refresh token) in Next.js and then pass it to the fetch() call that Next is making when talking to your backend. Give that a try and let me know how it goes!
@@RyanToronto thank you, i will try it)
@@RyanToronto Hi again, I understood how cookies works in nextjs, but now I have the problem is with the server components. For example, I try to get private data, if access token expired, I fetch refresh token to endpoint /refresh and if response is successfull I try set new tokens in cookies but like you said I can't set cookies from server components. What solution would you suggest? Or I need to fetch from client components?
So how you can set a cookie based on a third-party API response you called inside your server component?
Hmm that's a good question! Could you make the API call in a middleware and use that to set the cookie? Then read it in the server component if you need the value
@@RyanToronto unfortunately thats not an option in my case, as I have a lot of APIs that will return a data needs to be stored in cookies, so I wonder what could be the best practice in that case?
Can we use server components without next.js or implementing it ourselves? I mean, with pure React running react-scripts. Great vid.
Thanks! In order to use RSC you'll need a build tool, so it's more work than dropping a script tag into your HTML file. You could implement it yourself, but there's a lot involved. Right now Next.js is one of the best implementations of RSC.
can you share how to set the cookie in server using route handlers?
Check out these Next.js docs: nextjs.org/docs/app/building-your-application/routing/route-handlers#cookies
And RSC's can be rendered at build time in some cases.
Yup great point!
Why haven't you imported the cookies fron next?
I'm not sure what you mean? This video initially uses next cookies, and then uses next middleware to solve the problem.
You import cookies from twofold/framework/cookies, why not from nextjs? import {cookies} from next/headers @@RyanToronto
This is exactly why RSCs will never be used for real fully-fledged backends - its use-case will mainly be as a BFF and proxying to another api/backend server somewhere else
Whats BFF?
@@sadiqshaik4064 backend for frontend
@@sadiqshaik4064"Backend For Frontend"
Using RSCs in BFF apps can work really well. I hope in the future as RSCs get used by more-and-more apps we'll be able to improve some of these APIs and make it easier to do all of the things that backend apps can do already. What kind of React apps are you working on these days? Do you have a BFF setup?
@@sadiqshaik4064backend for front end kind of a middle ground between a backend server and the front end.