react-best-practices

النتيجة المتوقعة:

• المشكلة: استدعاءات await المتسلسلة تنشئ شلالاً (3 جولات ذهاباً وإياباً)
• const user = await fetchUser()
• const posts = await fetchPosts()
• const comments = await fetchComments()
•  
• الإصلاح: استخدم Promise.all() للتنفيذ المتوازي (جولة واحدة)
• const [user, posts, comments] = await Promise.all([
• fetchUser(),
• fetchPosts(),
• fetchComments()
• ])

النتيجة المتوقعة:

• استخدم next/dynamic للتحميل الكسول للمكونات الثقيلة:
•  
• import dynamic from 'next/dynamic'
•  
• const MonacoEditor = dynamic(
• () => import('./monaco-editor').then(m => m.MonacoEditor),
• { ssr: false, loading: () => <LoadingSkeleton /> }
• )
•  
• هذا يؤجل حزمة ~300KB حتى يتم تقديم المكون، مما يحسن TTI.