ریاکت برای غارنشینان 2(next.js)

شاید یه کم عجیب باشه که من قبل از این که حرفی در مورد ریاکت بزنم اومدم و دارم شروع میکنم به نوشتن از نکست .چند تا دلیل داره ...مهم ترینش اینه که ریاکت خیلی آسونه و ترکیبش با نکست آسونترش میکنه ...اگه جاوااسکریپت رو مسلط باشی به سادگی میتونی برای ریاکت کد بزنی و یادگیریش کمتر از یه روز زمان میبره ولی اکسپرت شدن خب نیاز به چلنچ و زمان داره...اگه تازه کاری و میخوای js رو یاد بگیری تا ریاکت رو یاد بگیری نمیخواد خیلی بترسی و پا پس بکشی ...همین که بتونی یه کم با آبجکت ها و آرایه ها کار کنی و بتونی فانکشن بنویسی و map بزنی میتونی شروع کنی به ریاکت .. ولی یادت باشه هر وقت که به مشکل خوردی قبل از این که فکر کنی به خاطر ضعفت از دونستن رساکته یادت باشه که احتمالا به خاطر ضعفت در استفاده از js هست .اینجوری راحت تر میتونی مشکل رو پیدا و حل کنی. خب بزارین شروع کنم...مشکل چی بود؟ریاکت در حالت عادی به این صورت کار میکنه که شما به عنوان دولوپر یه سری کامپوننت مینویسین و اون هارو در نهایت با استفاده از وب پک باندل میکنین و در انتها شما یه فایل html ساده ب همراه تعدادی فایل js دارین که اگر کاربر درخواست دیدن صفحه ای رو بده این فایل ها براش فرستاده میشه و مرورگرش اجرا میشه و بعد از اجرا ساختار اون فایل html ساده توی دام تغییر میکنه و کاربر خروجی نهایی رومیبینه .این وسط چند تا مشکل وجود داره اگر مرورگر کاربر فایل جاوااسکریپت رو ساپورت نکنه عملا جز اون html ساده هیچی نمیبینه . لابد میپرسی کدوم کاربره که مرورگرش js ساپورت نکنه؟ احتمالا ربات هایی که توسط موتور های جستجو وارد سایتتون میشن در اجرای js کمی مشکل داشته باشن یا حال نداشته باشن فایل js رو پردازش کنن و چون با دیدن اون html ساده چیزی دستگیرشون نمیشه seo سایتتون افت میکنه...به خاک سیاه نمیشینین ولی یه کم خاک بازی خواهید کرد.اولین فایلی که کاربر میگیره اون html هست و بعد از اونه که فایل های باندل js شروع میکنن به لود شدن ..حالا اگه فایل باندلتون خیلی بزرگ باشه کاربر هیچی جز اون html ساده نمیبینه و باید منتظز باشه تا کل اون باندل دانلود و اجرا بشه تا بتونه خروجی رو ببینه.هر چقدر این زمان طولانی تر بشه احتمال خروج کاربر از صفحه هم بیشتر میشه .بنابراین ما دلمون میخواد اصلا یه html ساده نداشته باشیم و وقتی درخواستی اومد سمت سرور ما خودمون اون html اصلی رو درست کنیم و به جای اون html ساده ,اون اصلیه رو بفرستیم سمت کاربرخب لازمه ش چیه؟ لازمش اینه که ما سمت سرور بیایم و خودمون رو بزاریم به جای مرورگر کاربر و یه دور اون فایل های js رو اجرا کنیم و خروجی رو به صورت html در بیاریم و بفرستیم سمت کاربر. به این کار میگن server side rendering یا ssr که در مقابل client side rendering قرار میگیرهسایت airbnb که ssr نداره رو در حالتی که js روشن و خاموش باشه میبینینسایت پیاده که ssr داره رو در حالتی که js روشن و خاموش باشه میبینین خب فکر کنم تفاوت مشخص باشه؟استفاده از ssr در کنار مزایایی که داره مشکلاتی رو هم به وجود میاره که چند تاش رو میگماول از همه این که شما سمت سرور باید node داشته باشین و همه ی درخواست ها رو رندر کنین که نیاز به توان پردازشی بالایی داره و اسکیل کردن پروژه رو سخت میکنه ...شاید وقتی میبینی یه سایت مثل airbnb دتبال ssr نرفته دلیلش همین باشهشما نیاز دارین برنامه تون رو جوری بنویسین که علاوه بر مرورگر در محیط node هم قابل اجرا باشه. پس اگه از window جایی استفاده کردین نیاز هست که کدتون رو تغییر بدین چون ما توی node چیزی به اسم window نداریم.تغییر دادن آدرس rout ها به دو صورت ssr و csr انجام میشه و باید برای هر دو حالت آماده باشید و تدارک دیده باشین .بزار با مثال بگم. کاربر اگه آدر صفحه ی جستجوی سایت مارو وارد کنه در همون ابتدا سمت سرور این صفحه به طور کامل رندر میشه و فرستاده میشه برای کاربر و کاربر محتوا میبینه (روتینگ ssr)...ولی اگر کاربر در صفحه ی هوم باشه و با کلیک روی دکمه ی جستجو وارد صفحه ی جست و جو بشه (روتینگ csr) همزمان یه api call میشه و تا زمانی که جواب api نیومده در صفحه ی سرچ یه سری بلاک خالی همراه با علامت لودینگ به کاربر نمایش داده میشه.این دو رفتار رو شما باید در قالب یک فایل پیاده کنین که خیلی هم کار سختی نیست فقط حواستون باید بهش باشهحالا چطور میتونیم ssr رو برای پروژه مون فعال کنیم ؟خب ما این کار رو توی پست قبلی به طور کامل انجام دادیم...خخخخخبه صورت دیفالت next js برامون ssr رو انجام میده ..بدون درد و خونریزی .. ولی روش های دیگه ای هم وجود داره که بهش نمیپردازیم اصلاویژگی های نکست:نکست کامیونیتی قوی ای داره و دیدن همین عکس برای اثباتش کفایت میکنههفته ای نیست که این ها یکی دوتا ریلیز جدید نداشته باشن و باگی فیکس نکرده باشننکست تقریبا یه اکوسیستم کامل ساخته و بعد از نصبش لازم نیست تک تک دنبال اجزای مختلف برای کارهای مختلف بگردی. همونزور که میدونیم ریاکت یه لایبرری هست و برای کارهایی مثل روتینگ یا پشتیبانی از css و خیلی کارای دیگه باید از کتابخونه های دیگه ای استفاده کنیم که واسه شروع کار رو سخت میکنه ولی از اون طرف هم دستمون رو باز میزاره تا خودمون انتخاب کنیم . حالا نکست اومده و برای خودش یه سری از این ویژگی هارو ساخته مثلا برای css-in-js اومده و styled-jsx رو معرفی کرده و داره ازش استفاده میکنه و یا نیاز نیست برای روتینگ کتابخونه ای نصب کنین و خودش روتینگ داره و...برای تیکه تیکه کردن کد ها نکست اومده و بر اساس روتینگ ها کد رو میشکنه..یعنی چی؟شما یه پوشه به اسم pages دارین که هر فایلی داخل اون باشه نکست به عنوان یه rout میشناشتش مثلا اگه من داخل پوشه ی pages یه فایل home.js داشته باشم .بعد از اجرای برنامه میتونم برم به آدرس 127.0.0.1:3000/home و وقتی واردش شدم نکست میاد و home.js رو رندر میکنه و خروجی رو میفرسته برای مرورگر به این ویژگی میگن file base routing ...در مقاله ی قبلی اگه یادتون باشه رفتیم به 127.0.0.1:3000 و ارور 404 دیدیم چون چیزی اونجا نبود .نکست میاد و 127.0.0.1:3000 رو از فایل index.js میخونه بنابراین من باید یه فایل index.js درست کنم و کد های مربوط به صفحه ی اولم رو اونجا بزاریم...حالا اگه کاربر وارد صفحه ی اولم بشه اون کد هارو میبینه و لازم نیست کد های مربوط به سایر صفحات براش فرستاده بشه ..به این میگن code splitting ... که نکست داره خودکار انجامش میده . یکی از جذابیت های next اینه که قسمت مثال هاش خیلی کامله و تقریبا چیز به درد بخوری نیست که نکست براش مثال نداشته باشه ... میتونین لیست مثال هاش رو از اینجا ببینین . همه ی مثال هاش هم به طور مرتب آپدیت میشن و خیلی کار راه انداز هستن .خب توی پست قبل نصبش هم که کردیم ..حالا کم کم بریم به سمت این که تایپ اسکریپت چیه ؟ چطور باید نصبش کرد ... یه کم به پروژه سرو شکل بدیم , ساختار فولدر هارو در بیاریم و گیت راه بندازیم و eslint رو هم فعال کنیم