Why you can't set cookies in Server Components

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/

[@jordancutler7552]

Such an undersubscribed channel. Learned an insane amount from this video. Thank you for what you do, Ryan!

[@sagarchilivery6112]

Thanks Ryan, keep uploading we love your videos!

[@RyanToronto]

Glad to hear it! I've got a few more videos based around RSCs that will be coming soon!

[@adwaitbokade2890]

Thanks man, you solved my bug because I got pissed of from last 2 days !! Please bring more about react server components !!

[@RyanToronto]

Awesome glad it helped!

[@helljohn211]

Ryan this is really good information 👌

[@ElHawary]

Thank you, I was actually watching this in a private window "doing some testing", I had to login just to like and sub.

[@RyanToronto]

Wow thanks for the kind words! Really appreciate it!

[@VitorVelosoSA]

Nice video! I got into this issue and never understood why I couldn’t do it

[@RyanToronto]

Glad you liked it!

[@toomanyarguments]

a brilliant and advanced video. thank you

[@RyanToronto]

Glad you liked it!

[@buddy.abc123]

Thanks for sharing man!

[@Dreamer4777]

THANK YOU, this video really helped me.

[@RyanToronto]

Glad it helped!

[@victorajayi9056]

Really good video!

[@silverlila]

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?

[@RyanToronto]

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.

[@philmoody5888]

Thank you!

[@cb73]

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.

[@RyanToronto]

Nice! Did the web api end up working out for you?

[@cb73]

@@RyanToronto no lol. Too hard. I’m already using a separate api written in golang that handles auth so I just wrote an endpoint that does the encryption (much easier in golang) - I call that in the middleware to give me the encrypted string I need to write a cookie. Works perfect for me.

[@saifmohammad733]

Great tutorial. you should start an ASMR channel! voice is so relaxing.😅

[@mounir101]

Subscribed, can I protect routes with Middleware using encrypted user data stored in Cookies? thanks a lot and keep up the good work.

[@RyanToronto]

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!

[@tejasyoutuber]

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.

[@RyanToronto]

Hmm, sounds like there might be a bug somewhere! Have you tried making a minimal reproduction that highlights the issue?

[@tejasyoutuber]

@@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.

[@setasan]

Can we use server components without next.js or implementing it ourselves? I mean, with pure React running react-scripts. Great vid.

[@RyanToronto]

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.

[@ColynBrown]

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

[@RyanToronto]

Oh that's a very neat idea

[@godkid.]

what if we want to save data gotten from our backend server to cookies how do we do that with the nextjs middleware?

[@RyanToronto]

I believe you can fetch data from your backend inside of the middleware function, then use that to set the cookie.

[@godkid.]

Ohh alright thanks@@RyanToronto

[@godkid.]

@@RyanToronto i would still love a platform to discuss with you on some other questions i have, where can i dm you ?

[@NetraPatwari]

Hey man ... I have a problem. i m using server actions to set cookies , with "use server" at top, i have created a actions directory in my-app , and have all my server side actions there. still i m facing this error. "" [Error]: Cookies can only be modified in a Server Action or Route Handler."". Actually my backend is in python (fastapi) and it worked fine last time , with same tech stack. this time i have made 2 routes also , for stripe webhook.., How can i solve this ...

[@RyanToronto]

Oh that's strange, setting cookies in server actions should absolutely work! I would try opening a bug report with a reproduction showing the error. Sorry I couldn't be of more help!

[@user-pw9tn1jo9i]

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 :)

[@RyanToronto]

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!

[@user-pw9tn1jo9i]

@@RyanToronto thank you, i will try it)

[@user-pw9tn1jo9i]

@@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?

[@user-ei8mw7lk1c]

can you share how to set the cookie in server using route handlers?

[@RyanToronto]

Check out these Next.js docs: nextjs.org/docs/app/building-your-application/routing/route-handlers#cookies

[@maskman4821]

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 🙏

[@RyanToronto]

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

[@prohacker5086]

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.

[@maskman4821]

@@prohacker5086 Thank you for the reply, it would be best illustrated with a sample codes 🥰

[@JIPPOKIKKA]

How about if you do Cookie Banner for asking permission for users to use cookies.

[@RyanToronto]

For a cookie banner use a server action to set the cookie when they click the accept button.

[@mauricedebeijer]

And RSC's can be rendered at build time in some cases.

[@RyanToronto]

Yup great point!

[@bahaalmomani-jo]

So how you can set a cookie based on a third-party API response you called inside your server component?

[@RyanToronto]

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

[@bahaalmomani-jo]

@@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?

[@stevebendersky2056]

Why haven't you imported the cookies fron next?

[@RyanToronto]

I'm not sure what you mean? This video initially uses next cookies, and then uses next middleware to solve the problem.

[@stevebendersky2056]

You import cookies from twofold/framework/cookies, why not from nextjs? import {cookies} from next/headers @@RyanToronto

[@darren_baldwin]

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

[@sadiqshaik4064]

Whats BFF?

[@Nikich13v]

@@sadiqshaik4064 backend for frontend

[@user-yf3ec9ml1j]

​@@sadiqshaik4064"Backend For Frontend"

[@RyanToronto]

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?

[@jollyJedi]

@@sadiqshaik4064backend for front end kind of a middle ground between a backend server and the front end.