✨ نحوه عملکرد ارسال و دریافت درخواست‌ها در SPA + چرخه‌ی حیات (Lifecycle)


1️⃣ (درخواست اولیه) Initial Request – ورود به سایت برای اولین بار

داستان از اینجا شروع می‌شه که کاربر برای اولین بار سایت رو باز می‌کنه.

🔸 توی SPA این یعنی:

1. مرورگر کاربر درخواست (Request) رو به سرور می‌فرسته تا کل ساختار برنامه (HTML, CSS, JavaScript) رو دریافت کنه.

2. سرور فایل اصلی HTML رو ارسال می‌کنه (معمولاً یه صفحه‌ی ساده که فقط یه <div id="app"> داخلشه).

3. بعد از اینکه صفحه‌ی HTML لود شد، مرورگر می‌ره سراغ فایل‌های جاوااسکریپت که شامل React, Vue یا Angular هستن.

4. جاوااسکریپت اجرا می‌شه و کل اپلیکیشن روی مرورگر کاربر ساخته می‌شه بدون اینکه صفحه دوباره لود بشه.

2️⃣ (جابجایی بین صفحات بدون رفرش) Routing

خب، حالا که صفحه‌ی اولیه لود شد، کاربر می‌خواد روی یه لینک کلیک کنه (مثلاً بره به صفحه‌ی پروفایل خودش).

💡 در MPA این یعنی درخواست جدید به سرور و لود شدن یک صفحه‌ی جدید، اما در SPA ما اینو هوشمندانه‌تر مدیریت می‌کنیم.

🔸 اینجا اتفاقی که می‌افته اینه:

1. وقتی کاربر روی لینک کلیک می‌کنه، جاوااسکریپت جلوی رفرش شدن صفحه رو می‌گیره.

2. React Router / Vue Router / Angular
تشخیص می‌ده Router که کاربر کدوم صفحه رو می‌خواد ببینه.

3. اگر اطلاعات جدیدی نیاز باشه، یه درخواست AJAX یا Fetch API به سرور فرستاده می‌شه.

4. داده‌های جدید به‌صورت JSON برمی‌گردن و کامپوننت‌ها آپدیت می‌شن.

3️⃣ (دریافت اطلاعات از سرور) Fetching Data

وقتی صفحه‌ی جدید باز می‌شه، شاید نیاز باشه که داده‌ها از سرور گرفته بشن.
مثلاً کاربر به صفحه‌ی پروفایلش می‌ره و می‌خواد اطلاعات کاربری‌اش رو ببینه.

🔸 توی این مرحله:

1. جاوااسکریپت یه درخواست به سرور ارسال می‌کنه (معمولاً با ()fetch یا axios).

2. سرور اطلاعات رو از دیتابیس می‌گیره و به‌صورت JSON به مرورگر می‌فرسته.

3. بعد از دریافت داده‌ها، React/Vue/Angular کامپوننت‌ها رو با اطلاعات جدید آپدیت می‌کنن.

4️⃣ (مدیریت وضعیت) State Management

اینجا زمانی پیش میاد که داده‌های برنامه باید توی حافظه نگه داشته بشن تا تجربه‌ی کاربری بهتر بشه.

مثلاً وقتی لاگین می‌کنی، دیگه نمی‌خوای هر بار که صفحه رو عوض می‌کنی، دوباره از سرور اطلاعاتت گرفته بشه.

🔸 توی SPA معمولاً از یکی از این روش‌ها استفاده می‌شه:

1. LocalStorage یا SessionStorage:
اطلاعات در مرورگر ذخیره می‌شه.

2. State Management Libraries مثل Redux, Vuex, یا Zustand:
یه بخش مرکزی برای ذخیره‌ی وضعیت (State) داریم.

3. React Context یا useState:
برای نگه‌داشتن داده‌های کوچک در سطح کامپوننت.

5️⃣ (آپدیت شدن رابط کاربری بدون رفرش) Updating UI

یکی از جذاب‌ترین بخش‌های SPA اینه که وقتی چیزی تغییر می‌کنه، فقط همون بخش آپدیت می‌شه، نه کل صفحه!

مثلاً وقتی یه پیام جدید توی چت واتساپ می‌گیری، فقط همون پیام اضافه می‌شه، نه اینکه کل صفحه رفرش بشه.

🔸 نحوه‌ی کار:

1. داده‌های جدید از سرور میاد.
2. در واقع در React/Vue فقط همون بخش صفحه رو تغییر می‌ده.
3. کاربر هیچ تغییری حس نمی‌کنه جز اینکه محتوا آپدیت شده.

6️⃣ (بستن و تمیزکاری) Unmounting & Cleanup

وقتی کاربر از یه صفحه خارج می‌شه، داده‌ها و رویدادهای قبلی باید پاک بشن تا عملکرد سایت کند نشه.

مثلاً توی React وقتی یه کامپوننت بسته می‌شه، باید از useEffect یا componentWillUnmount برای حذف رویدادهای غیرضروری استفاده کرد.




📁#javascript

✅ کانال تخصصی لاراول
📌 @PapiDon_state

☕️ اتاق برنامه‌نویسی
📌 @PapiDon_coding