از ReactJS تا GatsbyJS ـ تجربیات من از دنیای ReactJS

مدت زیادی نیست که می‌نویسم. به سبک خودم می‌‌نویسم و مطالبیو مینویسم که لااقل برای خودم خاص هستن و باهاشون حال می‌کنم:) قالب این سایت اسمش هست Sansi که در گیت هاب منتشرش کردم و میتوانید ازش استفاده کنید. میخوام فرآیندی که طراحی این سایت داشته و تکنولوژی هایی که پشت سر گذرونده رو بهتون بگم.

ReactJS

دوست داشتم وبلاگم خاص باشه و در عین حال تجربه جدیدی برای من داشته باشه. بجای اینکه بخوام وبلاگو با وردپرس یا یک CMS دیگه بالا بیارم ترجیه دادم خودم یچی بنویسم. قصد داشتم ReactJS یاد بگیرم و خب حالا یک پروژه داشتم برای تمرین. پس تصمیم گرفتم UI وبلاگمو با ReactJS بزنم و تنها برای بک اند از وردپرس استفاده کنم.

یکم ابتدایی تر از همین وبسایتی که می‌بینید رو با reactjs+wordpres بالا آوردم ولی مشکلی که خوردم SEO سایت بود که در حالت پیشفرض برای موتور های جست و جو محتوای سایتم قابل خواندن نبود. چون تکنولوژی وبسایت CSR(Client Side Rendering) بود و درواقع همه چیز با js در سیستم کلاینت ساخته میشد و بخاطر همین Page Source(با inspect element اشتباه نگیرید) ویسایت خالی از هرگونه محتوا بود و برای گوگل خواندنش ناممکن بود. پس دو راه داشتم. یا مشکل رو حل کنم یا از فورکی از ReactJS استفاده کنم که این مشکلاتو نداشته باشه. متاسفانه اون‌زمان نتونستم مشکلو حل کنم پس تصمیم گرفتم یک بار دیگه سایت رو بنویسم با یه تکنولوژی دیگه. راستی اگه این مشکلو دارین میتونین مطلب نیما رو بخونید.

NextJS

بله! رفتم سراغ این تکنولوژی. NextJS بر پایه Reactjs نوشته شده و تقریبا خیلی شبیهن. اصلی ترین تفاوتشون برای من SSR(Server Side Rendering) بودن NextJS بود که خیلی هم راضی بودم ازش:) یک تست کوچیک کردم و دیدم جواب میده و page source دارم بنابراین یک بار دیگه فرانت‌اند سایتو نوشتم منتهی اینبار با NextJS. بسیار هم عالی بود منتهی بعد اینکه بازطراحی تموم شد تازه متوجه شدم که ای بابا، قسمتایی از سایت که قراره به بک اند وصل شه و با کوئری به بک‌اند آپدیت شه(مثل محتوای پست ها) توی سورس نمایش داده نمیشه! منطقی بود! چون موقع پیج باز کردن، قسمت هایی از سایت باز میشد(همونایی که تو سورس سایت بود) بعد کلاینت به سرور کوئری میزد و محتوا رو پر میکرد. برای کوئری از axios استفاده میکردم و مشکل دقیقا همون قسمت بود. چون بصورت CSR کار میکرد ولی من SSR نیاز داشتم. دو تا راه داشتم. یا مشکلو حل کنم یا تکنولوژی رو عوض کنم! راجع به GastbyJS زیاد تعریف شنیده بودم پس تصمیم گرفتم اینبار با GasbyJS سایتو بازطراحی کنم!

GatsbyJS

بذارید اول GatsbyJS رو معرفی کنم! GatsbyJS بر پایه ReactJS نوشته شده با این تفاوت که سایت های استاتیک میسازه. مزیت اصلیش سرعت بالای بارگزاری سایت و درعین حال فشار بسیار کم روی سروره. سایت استاتیک دیگه دیتابیس نداره و اطلاعاتش تو صفحات html ذخیره میشه. البته با gatsby سایتتونو استاتیک نمینویسید، gatsby تبدیل میکنه به استاتیک. یعنی چی؟ GatsbyJS یک SSG(Server Side Generation) حساب میشه و موقع build گرفتن از برنامه، به بک اند وصل میشه و کوئری میگیره و با توجه به داده ها صفحات استاتیک می‌سازه. بذارید با مثال توضیح بدم. همین وبلاگی که می‌بینید برای بک اند از وردپرس استفاده میکنه و برای فرانت‌اند از Gatsby. پس شما دارید صفحات استاتیک می‌بینید! وقتی من از فرانت‌اند سایت build میگیرم وصل میشه به بک‌اند و پست ها، کتگوری ها و تگ هارو می‌گیره و با توجه به کدی که نوشتم چند تا فایل html و js تحویل میده و کافیه من بارگزاریش کنم روی سرور تا سایت آپدیت شه.

چند تا سوال ممکنه پیش میاد:

اگه پست جدید بخوام بگذارم چطوری میشه؟

خب فرض کنید پست جدید در وردپرس ارسال کردم. اما تو سایت نمایش داده نمیشه. چون آخرین build ای که از سایت گرفتم مال قبل از این پست بوده. حالا باید مجدد از سایت build بگیرم تا با توجه به اطلاعات جدید سایت ساخته شه.

پس حتی برای هر کامنت باید دوباره سایت build گرفته شه؟!

مطمئنا نه! میتونست اینطور باشه ولی راهی که من انتخاب کردم قسمت کامنت سایت رو با axios طراحی کردم و بصورت CSR کار میکنه. پس بعد از اینکه پست توسط کلاینت لود شد کوئری زده میشه به سرور و کامنت های سایت لود میشن.

چرا gatsby؟

• سرعت! فراموش نکنید سایت های استاتیک به مراتب سرعت بالاتری از سایت های داینامیک دارن.
• پرفورمنس! وقتی سایت داینامیکی رو لود میکنید چندین پروسه باید گذرونده شه تا سایت برای کاربر نمایش داده شه یا اصطلاحا لود شه. بدترین و پرفشارترین پروسه، کوئری به دیتابیس و گرفتن اطلاعات صفحست. این مورد در gatsbyjs فقط موقع build گرفتن از برنامه صورت میگیره. پس فشار به سرور خیلی خیلی کاهش پیدا میکنه.

جمع بندی

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

ریکت CSR هست. درواقع سایت سمت کلاینت رندر میشه و وقتی از پیج سورس بگیرید فقط یک تگ توش میبینید که هیچ محتوایی نداره. و محتوا توسط js در سیستم کاربر ساخته میشه. این بصورت پیشفرض برای موتور های جست و جو قابل دسترس نیست.

نکست SSR هست. یعنی صفحات در سمت سرور ساخته میشه و به کاربر فرستاده میشه. این محتوا برای گوگل قابل دسترسه منتهی اگه قرار باشه کوئری زده شه به بک اند و محتوا از اونجا خوانده شه(یعنی سایت داینامیک باشه) اون محتوا با توجه به طرز کوئری زدنتون SSR یا CSR میشه. برای من CSR بود چون کدی که برای کوئری زده بودم CSR بود.

گتس‌بای SSG هست. یعنی از محتوای داینامیک، سایت استاتیک می‌سازه. این اتفاق زمان build برنامه میوفته. یسری مزایا داره یسری معایب ولی در کل چیز خاص و جالبیه. یکم مشکل بود بازطراحی این سایت با گتس‌بای منتهی کم کم داره تکمیل میشه و اگه میخواید تو طراحی کمک کنید یا از این قالب استفاده کنید میتونید به گیت هاب پروژه که اسمشو گذاشتم Sansi سر بزنید. شاید فکر کنید خیلی سخته هر بار build گرفته شه از سایت، در جواب میگم این تکنولوژی اولا برای هر سایتی مناسب نیست و دوما میشه اتوماسیون کرد تا با هربار آپدیت بک اند، از سایت ‌build گرفته شه و روی سرور بارگزاری شه.

نتیجه اخلاقی

من با هرکدوم از این تکنولوژی ها می‌تونستم این سایتو بدون نقص طراحی کنم. منتهی زیاد برای رفع مشکلاتی که برخوردم وقت نذاشتم و همین باعث شد تکنولوژی های متفاوتی رو امتحان کنم. من عقیده دارم هرکی هرجوری راحته می‌تونه یاد بگیره و حتی معتقدم یادگیری اولیه بهتره سطحی باشه و بعدا با یک دید و درک خوبی عمیق شیم رو زمینه موردعلاقمون:)