All posts / React & Next.js / №01
Why Next.js only lets Server Actions set cookies
Moving auth to the server hit “Cookies can only be modified in a Server Action or Route Handler”. The answer was Set-Cookie: only code that sends a response back to the browser can change a cookie.
This post is written in Arabic; the English summary is above.
وأنا عم اشتغل على Server-Side Authentication بمشروع Next.js، كنت بخزّن الـ tokens باستخدام cookies.
لما نقلت الـ auth ليصير Server Side، طلعلي هالـ Error اللطيف 👇
Cookies can only be modified in a Server Action or Route Handlerاستغربت شوي…
ليش بس Server Actions أو Route Handlers؟ 🤔
بحثت بالمشكلة، واكتشفت شغلة صادمة شوي:
أنا ما كنت فهمان الـ cookies منيح 😅
خلينا نرجع خطوة لورا 👇
الـ cookies بتتخزّن جوات الـ browser، وبتختلف عن localStorage إنو التعامل معها مو مباشر.
تعديل الـ cookies ما بيصير من JavaScript مباشرة،
بل بيصير عبر HTTP Response من السيرفر باستخدام header اسمه:
Set-Cookieيعني ببساطة:
- السيرفر بيرسل
Set-Cookie - الـ browser بيستقبل الـ response
- وبيحدّث الـ cookies عنده
وهون كانت المشكلة:
أنا كنت عم حاول أخلّي كود Server Side يغيّر cookies بدون ما يكون في request/response راجع للـ browser.
وطالما ما في response:
👉 الـ browser ما بيشوف شي
👉 والـ cookies ما بتتغير
وهون فهمت ليش Next.js حصر هالعملية بـ: Server Actions و Route Handlers
لأن هدول الوحيدين اللي:
- بينفذوا على السيرفر
- بينطلقوا من client request
- وبيرجعوا response حقيقي للـ browser
بهاللحظة حسّيت قديش عالم الويب أعمق مما كنت متوقع،
وقديش في مفاهيم منستخدمها يوميًا بدون ما نعرف شو عم يصير بالأعماق 😄