تحسين أداء صفحة تطبيق ويب للتوظيف

أرجو توضيح ما هي التقنيات التي تستخدمها لتقديم إجابة مفيدة وليس عامة.

بتاريخ 2 دقائق مضت قال Mustafa Suleiman:

أرجو توضيح ما هي التقنيات التي تستخدمها لتقديم إجابة مفيدة وليس عامة.

أشكرك على اهتمامك بتقديم اجابة وافية

التقنيات المستخدمة

Next.js - Tailwind - Typescript - Django - PostgreSQL - Socket.io

لكن ما الحاجة إلى Django بالرغم من أنك تستخدم Next.js أتفهم أنك تستخدمها للواجهة الأمامية لكن هل قمت باستخدام getStaticProps لصفحات تحتوي على بيانات ثابتة نسبيًا مثل قوائم المستخدمين المُحدثة بشكل غير متكرر.

واستخدام getServerSideProps في حال البيانات تتغير بشكل دقيق ويحتاج المستخدمون إلى تحديث فوري، أيضًا Incremental Static Regeneration (ISR) لتحديث الصفحات تلقائيًا دون إعادة بناء كامل الموقع.

فما سبق هو الفائدة الحقيقية من استخدام Next.js في الواجهة الأمامية.

تستطيع استخدامه أيضًا للواجهة الخلفية لتقليل تعقيد المشروع، لو هناك سبب وجيه فلا مشكلة.

أيضًا في الواجهة الأمامية من الأفضل تنفيذ Pagination/Infinite Scroll أي قسم قائمة المستخدمين إلى صفحات أو أضف infinite scroll لتجنب تحميل آلاف السجلات مرة واحدة.

وLazy Loading  من خلال React.lazy() أو مكتبات مثل react-virtualized لتحميل المكونات والبيانات عند الحاجة فقط، وnext/dynamic لتحميل المكونات الثقيلة بشكل غير متزامن.

ولتحسين تجربة المستخدم حاول إضافة خيارات تصفية متقدمة حسب الدولة، الوظيفة، الخبرة، وغيرهم، واستخدم debounce في شريط البحث لتقليل الطلبات إلى الخادم، أيضًا أظهر هيكلًا مؤقتًا skeleton UI أثناء انتظار تحميل البيانات، وتأكد من توافق التصميم مع جميع الأجهزة باستخدام Tailwind's responsive utilities.

ولو استطعت استخدم TypeScript لتعريف أنواع البيانات كـ UserProfile لتجنب الأخطاء.

بخصوص الواجهة الخلفية خزن النتائج الشائعة كقائمة المستخدمين في دولة معينة من خلال Django’s cache framework مع Redis أو Memcached، أيضًا استخدم Django REST Framework’s pagination لتقسيم النتائج مثل PageNumberPagination أو CursorPagination.

وقلل عدد استعلامات قاعدة البيانات من خلال select_related (لـ ForeignKey) و prefetch_related (لـ ManyToMany)، ثم استخدم Celery أو Django Channels للمهام الثقيلة كإرسال إشعارات لجميع المستخدمين.

وحدد عدد الطلبات المسموح بها لكل مستخدم بواسطة مكتبات مثل django-ratelimit.

وبخصوص Socket.io لا ترسل تحديثات الوقت الحقيقي إلا عند حدوث تغيير مهم  كإضافة مستخدم جديد، وقسم الاتصالات إلى غرف rooms حسب الدولة أو الوظيفة لتقليل الحمل، وحدد عدد الأحداث التي يمكن للمستخدم إرسالها/استقبالها في الثانية.

بتاريخ On 25‏/2‏/2025 at 22:07 قال Mustafa Suleiman:

لكن ما الحاجة إلى Django

أشكرك على الرد 
سبب استخدام Django في الواجهة الخلفية ، هو شهرته بقلة ثغراته الامنية

هل لو استخدمت next هايكون بنفس هذه الميزة (مع اعتبار أن المطورين ذو كفاءة)؟

حصلت مشكلة أن مطور الواجهة الامامية يدعي أن APIs لا يعمل ، ومطور الواجهة الخلفية يدعي أن ال APIs ليس بها أي مشكلة 

لذا أرى صعوبة في ادراتهم
أريد أن تنصحني بحل؟

أنا فكرت في حل أحتاج رأيك
حيث أننا في بداية المشروع ، والتطبيق ضخم وأمل أن أتوسع فيه في المستقبل القريب ، لذا فكرت في حل جذري لهذه المشكلة هو أن اطلب من مطور Django أن يقوم بتطوير الواجهة الأمامية والخلفية للصفحات التي لا تحتاج إلى التوافق مع محركات البحث مثل: تسجيل الدخول - الاعدادات - تاريخ المعاملات المالية - صفحات تحكم المسؤول
ومطور next أن يقوم بتطوير الواجهة الأمامية والخلفية للصفحات التي تحتاج إلى التوافق مع محركات البحث

رابط التصميم على فيجما 
https://www.figma.com/design/JZshuW9Pnw1PP8Bt2T4veW/Freelancer-Ph-01?node-id=0-1&p=f&t=k3ViqlNowY28giAW-0