مقدمة
معظم المقالات في الغالب لما بتتكلم عن تحسين الـ Performance في الـ Next.js بتتكلم عن الـ dependencies والـ bundle size وازاي تعمل dynamic imports عشان تقلل حجم الباندل، في المقال هنا بيتكلم عن حاجه تانية مختلفة وهو حجم الـ HTML document وتأثيره على الـ Performance!
تأثير حجم الـ HTML Document على الأداء
الـ Next.js بتحقن الـ Props اللي انت بترجعها من getServerSideProps في الـ HTML عندك (هتلاقيها جوا script الـ ID بتاعه ___NEXT_DATA___) عشان عملية الـ Hydration. وبالتالي لو انت مرجع داتا حجمها ضخم ده هيكبر الـ HTML document وبالتالي هيقلل الـ Performance. حجم الداتا الضخم اللي انت بترجعه ده يرجع لمجموعة من الأسباب زي ان الـ REST API بيرجعلك داتا كبيرة جدا انت مش محتاجها بس انت بترجعها للـ Client زي ما هي.
تأثير الـ Server Side Rendering
المشكلة التانية اللي هو اتكلم عنها ان الـ React بتشتغل مرتين في حالة الـ SSR: مرة على السيرفر عشان تبني الـ HTML document، ومرة تانية على الـ client. وبالتالي لو انت بتعمل aggregation للداتا في الـ React Client فكده اللوجيك ده هيشتغل مرتين مرة على السيرفر ومرة عند اليوزر، عكس لو عملته على السيرفر ورجعته جاهز للـ Client.
الخاتمة
هسيبك مع المقال في شرح جميل لطريقة التغلب على المشاكل دي وهيفهمك حاجات.
رابط المقال: https://www.smashingmagazine.com/2021/05/reduce-data-sent-client-nextjs/