ویرگول
ورودثبت نام
یوسف
یوسف
خواندن ۲ دقیقه·۳ سال پیش

مقدمه ای بر Next js

نکست جی اس در واقع فریم ورکی هست برای React که اومده زندگی را برای شما که توسعه دهنده React هستی آسونتر و جذابتر کنه.

قبل از اینکه وارد بحث Next js بشیم بطور خلاصه در مورد اینکه یک اپلیکیشن React چگونه کار میکنه صحبت کنیم. فرض میکنیم که یک وبسایتی داریم که با ری اکت توسعه داده شده و همانطور که میدونم ری اکت یک Single Page Application هست ولی با کتابخونه React Router Dom میتونیم شبیه سازی کنیم که اپ ما چندین صفحه دارد.

زمانیکه از سمت کلاینت درخواستی برای اجرای (Render) اپ ما فرستاده میشه به سمت سرور .. سرور در پاسخ کل اپ ما را در قالب یک فایل جاوا اسکریپت به کلاینت ارسال میکنه. کلاینت در ابتدا یک قالب HTML خالی را که فقط یک تگ div با آی دی root را داخل خودش داره اجرا میکنه. در واقع این تگ div با آی دی root لینکی هست به فایل جاوا اسکریپت ما که کل اپ ما هست . سپس کلاینت بر اساس درخواست کاربر که کدوم صفحه از وب سایت ما را درخواست داده را براش نمایش میده و در صورتیکه کاربر درخواست داشته باشه که صفحه ای دیگه ای از اپ ما را باز کنه . کلاینت صفحه را براش نمایش میده چونکه کل اپ ما اینجاست و به سمت سرور درخواستی ارسال نمیشه لذا اپ ما سرعت خیلی بالایی خواهد داشت چونکه اجرا یا به اصطلاح دیگه render ما همینجاست سمت کلاینت.




ولی این شیوه از اجرای اپ در سمت کلاینت دو تا نکته منفی داره :

نکته اول: اینکه سرعت لود اولیه اپ ما بالا خواهد بود بخصوص اگر یک پروژه بزرگی باشه . چرا سرعت لود اولیه بالا خواهد بود ؟ چونکه کل اپ ما در همون درخواست اول به کلاینت ارسال میشه و کل اپ قطعا حجم زیادی دارد تا اینکه فقط یک صفحه از اپ ما ! ممکنه کاربر فقط بخواد یکی از صفحه های وب سایت ما را ببیند ! چه کاریه کل اپ را بفرستیم براش !

نکته دوم: چونکه در همان اجرای اولیه یک صفحه HTML خالی در سمت کلاینت اجرا میشه .. الگوریتم های موتورهای جستجو مانند گوگل با یک صفحه خالی و بدون محتوا مواجه میشن و وقتی که میبینن صفحه محتوایی ندارد ... آنرا نادیده میگیرند و به این شکل از نظر SEO وبسایت بسیار ضعیفی خواهیم داشت .

حالا Next js اومده که این دوتا نکته منفی را برای اپلیکیشن های ری اکت حل کرده به همراه یکسری ویژگی ها و امکانات بیشتر ..... با من همراه باشید در پست بعدی در مورد اینکه Next js چگونه کار میکنه توضیح خواهم داد ...


  • پینوشت: منظور از اپ => اپلیکیشن


reactnext jsnextjsjavascript
شاید از این پست‌ها خوشتان بیاید