From mentors who do this for a living

Code Review tips from mentors

Short, practical advice from the mentors on this platform, with the resources behind it. Vote up what helped you and follow the mentors you learn from.

Tips
19
Mentors sharing
6
Helpful votes
86
  1. mostafa mohamed abdalla Mentor Senior Frontend Engineer ·

    إزاي صفحة Next توصل فورا وجواها بيانات خاصة بالمستخدم؟

    زمان كان قدامك اختيارين: صفحة Static سريعة بس مفيهاش حاجة تخص المستخدم، أو صفحة Dynamic فيها كل حاجة بس بتستنى السيرفر.

    الـ Partial Prerendering بتدّيك الاتنين في صفحة واحدة.

    وقت الـ Build، Next بتعدّي على شجرة الـ Components وتقرر مصير كل حتة:
    \

    • حاجة متخزنة بـ use cache، أو حاجة ثابتة (imports، قراءة ملف محلي، حسابات بحتة): بتدخل الـ Static Shell.\
    • حاجة جوه Suspense: الـ Fallback بس هو اللي بيدخل الـ Shell، والمحتوى الحقيقي بييجي وقت الطلب.

      الـ Shell ده HTML بيتخدم من الـ CDN مباشرة، ومعاه RSC Payload للتنقل جوه الموقع. يعني أول محتوى بيوصل من غير ما السيرفر الأصلي يتحرك.

      والتفصيلة اللي بتفرق: كل ما كانت الحاجة اللي بتستنى الـ Request أعمق في الشجرة، كل ما الـ Shell بتاعك أكبر.

      مثال: لو الـ Layout قرا الـ params في أول سطر، الـ Layout كله بقى بيستنى الـ Request ومش هيدخل الـ Shell. لو نقلت القراءة جوه Component صغير ملفوف في Suspense، الباقي كله بيدخل الـ Shell.

      ولو الـ params مجهولة وقت الـ Build، بيطلع App Shell مشترك، وبعد أول زيارة بيتحدث للنسخة الكاملة (ISR).

      سؤال: Component بتاعك بيقرا الـ Request فين في الشجرة؟
    Helpful Comment Open tip