پیشنویس: اصطلاحات "لایبراری" و "فریمورک" در واقع مربوط به دو ماهیت متفاوت میشن مثلا ری‌اکت یک لایبراری محسوب میشه ولی انگیولار یک فریمورک اما برای ساده نویسی من همه‌جا از لفظ فریمورک استفاده میکنم توی این پست.
اگر شما با هر کدوم از فریمورک‌های ری‌اکتیو مثل Reactjs یا Vuejs کار کرده باشید میدونید که فرایند یادگیری اونها برای ساخت یک SPA درست و درمون خیلی پیچیده‌ست مثلا React در نگاه اول خیلی لایبراری باحالیه ولی وقتی واردش شدید و فهمیدید باید با مفاهیم جدیدی مثل routing و ریداکس و کانتکست و... سر و کله بزنید بعد هم قضیه مشکلاتتون با موتورهای جستجو و SEO و ایندکس نشدن صفحاتتون پیش میاد و میفتید به فکر SSR و pre-render کردن صفحه‌ها و سر و کله زدن با وب‌سرورتون واقعا یک جایی ممکنه به زمین و زمان لعنت بفرستید که چرا از همون اول به شیوه آبا و اجدادتون پروژه رو نبستید!
اما مدتی پیش من به شکل جالبی با یک فریمورک خیلی خیلی باحال به اسم Next.js آشنا شدم که بر پایه ری‌اکت نوشته شده اما به قولی Batteries-included بود (منظور اینه که کاملا آماده استفاده نهاییه).
قضیه آشنا شدن هم این بود که داشتم یکی از کنفرانس‌های pycon 2018 رو نگاه میکردم (این کنفرانس‌ها مربوط میشه به کامیونیتی پایتون که هر سال همه جای دنیا بجز اون جایی که میدونین برگزار میشه و نماینده‌های شرکت‌های بزرگ یا کسایی که خیلی حرفه‌ای هستند میان تجربه‌هاشون رو به اشتراک میذارن یا محصولات جدید رو پروموت میکنن) و یک خانمی که متاسفانه اسمشون رو فراموش کردم از کمپانی گوگل اومده بود در مورد تلفیق ری‌اکت و flask (یک میکروفریمورک پایتونی) صحبت میکرد و اینکه گوگل چه کارهایی کرده برای اینکه بتونه وب سایت‌های ری‌اکت رو ایندکس کنه و برنامه نویس‌ها بهتره چکار کنن که سایتشون خوب optimize بشه برای موتورهای جستجو (SEO) و در حین صحبتاش گفت ما فهمیدیم که سایت‌های ری‌اکتی که با Next.js ساخته شده‌ن ۳۰ تا ۷۰ درصد!!! پرفورمنس بهتری نسبت به سایت‌های معمولی ری‌اکت دارند چون next بصورت built-in از pre-rendering پشتیبانی میکنه... خوب اول بیاید با هم مرور کنیم که pre-rendering چیه اصولا و چرا کسانی که با یک فریمورک ری‌اکتیو کار میکنند حتما بهش نیاز دارند.
برای اینکه بفهمیم فرایند pre-rendering چه اهمیتی داره بایستی با پشت صحنه کار با این فریمورک‌ها نگاهی بندازیم مثلا ری‌اکت رو در نظر بگیرید... همونطور که میدونید ری‌اکت سیستم تمپلیتینگ مخصوص به خودش رو داره که با نام jsx میشناسیمش و در واقع شما تمپلیت‌تون رو توی خود فایل جاوااسکریپت مینویسید و وقتی شما از وب‌سرورتون درخواست یک آدرس میکنید براتون یک فایل html خالی میفرسته که توش لینکی به اسکریپت شما و لایبراری‌‌های ری‌اکت وجود داره. بعد از اینکه فایل بوسیله browser دریافت شد همین سمت کلاینت view شما ساخته میشه استایل‌ها اعمال میشه از اون بدتر اینکه وقتی شما بین صفحات سایت‌تون جابجا میشید اصلا ریکوستی به سرور زده نمیشه و اطلاعات صفحه‌ها همه دست همون فایل جاوااسکریپت اول هست و صفحه بعد هم همینجا ساخته میشه. خوب حالا فرض کنید یک اسپایدر برای ایندکس کردن صفحه سایت ما تلاش میکنه و مثلا صفحه محصولات سایت ما قراره بعد از ساخته شدن یک ریکوئست به سرور بزنه و لیست محصولات رو بخونه و نمایش بده... اون اسپایدر در وحله اول که صفحه خالی میاد که کلا ولش میکنه میره سراغ آدرس‌های دیگه (البته یک مکانیزم‌هایی جدیدا طراحی کردن که در واقع صفحه کاملا رها نمیشه ولی برای اینکه فرایند ایندکس کردن صفحه‌ها کُند نشه اون آدرس رو یک جایی ذخیره میکنند و سر فرصت ایندکسش میکنند ولی در همون حالت هم که کار ایندکس صفحه ما عقب افتاده بعد از ساخته شدن صفحه هم محصولی برای ایندکس شدن توی اون نیست چون قراره اونها توی ریکوئست بعدی خونده بشن پس این Client Side Rendering توی این وضعیت اصلا به درد نمیخوره هرچند توی محتوای استاتیک که قرار نیست چیزی از سرور fetch بشه سرعت وب اپلیکیشن ما رو خیلی بالا میبره. اینجاست که pre-rendering میاد وسط و میگه که بهتره "اولین باری" که یک صفحه فرستاده میشه بهتره سمت سرور ساخته بشه کاملا و بعد به کلاینت فرستاده بشه و از اون به بعد برای اون صفحه خاص میتونیم Client Side Rendering داشته باشیم.
فریمورک Next.js بصورت پیشفرض این امکان رو به ما میده و حتی برای صفحاتی که احتمالا دایما آپدیت میشن و ممکنه هر لحظه تغییر کنند میتونیم درخواست کنیم که دایما SSR انجام بشه.
خوب این مقدمه رو داشته باشید در کنار اون در نظر بگیرید که مشکل routing رو هم براتون حل کرده و بسیار فریمورک خوش‌دست و ساده‌ایه. در ادامه میخوایم یاد بگیریم چطور یک وب اپلیکیشن با next بسازیم و بعد یک پروژه تعریف میکنیم و میخوایم با استفاده از next.js یک وب‌سایت بسازیم که در واقع دیتابیس موزیک هست و میشه توش موزیک آپلود و play کرد و شاید بعدا بزرگترش هم کردیم.
لطفا مطابق معمول برای یادگیری عملی ویدیوی یوتیوبی که در ادامه اومده رو ببینید و اگر از این مطلب خوشتون اومده و میخواید پیگیر قسمت‌های بعدی هم باشید به کانال یوتیوب من سابسکرایب کنید.
خوب اگر به اینجا رسیدید یعنی قسمت اول از آموزش Next.js رو تموم کردید و بلدید چطور یک اپلیکیشن Next رو راه بندازید و صفحه اضافه کنید و از سیستم routing پیش‌ساخته‌ی نکست برای جابجا شدن بین صفحات استفاده کنید. علاوه بر اون شما یاد گرفتید چطور یک کامپوننت ری‌اکت رو به شکل Shared Component بین چند صفحه مختلف نکست استفاده کنید.
لطفا اگر علاقه‌مند شدید به کانال من سابسکرایب کنید که از آپدیت‌های بعدی باخبر بشید.
فعلا
