وقتی نوبت به ایجاد یک وب سایت می رسد، چارچوبی که نوید دهد به شما کمک می کند تا جلوهیا زیبا ایجاد کنید، کم نیست. با وجود گزینه های زیاد، اما انتخاب بهترین چارچوب همیشه آسان نیست. React یکی از محبوب ترین فریم ورک های فرانت-اند است. جای تعجب نیست، اگر می خواهید از React در پروژه وردپرس خود استفاده کنید، گزینه های زیادی پیش روی شماست. اگر احساس می کنید این همه انتخاب شما را غرق کرده است، قابل درک است – اما جای نگرانی نیست.
در این مقاله ما فریم ورک های React را معرفی می کنیم که می توانید در پروژه های وردپرس خود استفاده کنید. جوانب مثبت و منفی هر چارچوب را بیان خواهیم کرد. همچنین برخی از سناریو های رایج را بررسی خواهیم کرد که در آن ممکن است بخواهید از یک فریم ورک React بر دیگری استفاده کنید. بیایید شروع کنیم!
REST API چیست؟
Application Programming Interface (API) مجموعه ای از دستورالعمل ها و استاندارد های برنامه نویسی برای دسترسی به برنامه ها و ابزار های تحت وب است. می توانید از API ها برای برقراری ارتباط با وب سایت ها، برنامه ها و سرویس های دیگر استفاده کنید. این شامل درخواست داده از اشخاص ثالث است.
بسیاری از شرکت ها API های خود را به عنوان محصولی منتشر کرده اند که اشخاص ثالث می توانند از آن ها استفاده کنند. به عنوان مثال گوگل طیف گسترده ای از API ها را منتشر کرده است که دسترسی به خدمات آن ها را فراهم می کند، از جمله API ها برای YouTube ،Street View و Google Play.
API های REST از سایر API ها متمایز هستند. برای در نظر گرفتن RESTful، یک API باید از دستورالعمل های خاصی پیروی کند. این دستورالعمل ها به شما اطمینان می دهند که API حاصل از آن سبک، انعطاف پذیر، قابل ارتقا و ایمن باشد.
این دستورالعمل ها شامل جدایی بین سرویس گیرنده و سرور، استفاده از داده های قابل ذخیره در هر زمان ممکن و یک رابط کاربری یکنواخت (UI) است.
وردپرس REST API خاص خود را دارد. این API در ابتدا به عنوان یک افزونه ویژگی جداگانه توسعه داده شد. با این حال عناصر REST API از همان ابتدای وردپرس 4.4 به سیستم عامل اصلی اضافه شدند. API کاملاً در وردپرس 4.7 ادغام شده بود، این بدان معناست که از آن زمان به بعد هر نسخه از وردپرس دارای REST API کاملاً کاربردی خود است.
WordPress ‘REST API داده هایی را در قالب JSON فراهم می کند. به طور پیش فرض هر وب سایت وردپرس دارای داده های JSON است. تا زمانی که مالک سایت دسترسی محدودی به آن نداشته باشد، مشاهده خروجی JSON وب سایت شما آسان است – به سادگی URL آن را در قالب زیر وارد کنید:
http://example.com/wp-json/wp/v2/posts
مرورگر شما اکنون باید یک سری داده های JSON مربوط به پست های اخیر سایت شما را نمایش دهد. این داده ها به خصوص توسط انسان قابل خواندن نیستند، اما با تعداد زیادی از فناوری های وب سازگار است.
REST API برای وردپرس چه معنی دارد؟
به طور سنتی وردپرس HTML را با استفاده از یک تم مبتنی بر فایل های الگوی PHP تولید می کرد. با این حال معرفی REST API این وابستگی را به موتور رندر PHP از بین برد. این کار فرصت های زیادی را برای توسعه دهندگان وردپرس ایجاد کرد.
REST API تعامل وردپرس با سایر وب سایت ها و برنامه های وب را آسان می کند. این API به شما امکان می دهد اقدامات ایجاد، خواندن، به روزرسانی و حذف (CRUD) را روی محتوای وردپرس از جمله پست ها، صفحات و حتی انواع پست سفارشی انجام دهید. این به توسعه دهندگان راهی آسان برای درون ریزی و برون ریزی داده ها از وردپرس می دهد.
وردپرس REST API همچنین می تواند ارتباط برقرار کرده و داده ها را تبادل کند، صرف نظر از زبانی که برنامه خارجی از آن استفاده می کند. این باعث شده است که پلتفرم وردپرس بسیار انعطاف پذیر تر و قدرتمند تر باشد، زیرا شما محدود به هیچ فناوری یا زبان خاصی نیستید.
REST API نمایش دهندگان محتوا را از یک وب سایت جداگانه در یک تنظیم چند سایته برای توسعه دهندگان آسان می کند. همچنین امکان نمایش محتوا از وب سایت های جداگانه وردپرس وجود دارد.
امروزه از WordPress REST API معمولاً برای جداسازی محتوا از قسمت جلویی استفاده می شود و راه را برای توسعه دهندگان برای استفاده از وردپرس به عنوان یک سیستم مدیریت محتوای بدون سر (CMS) هموار می کند. اینجاست که React وارد می شود.
چگونه React و وردپرس می توانند به شما در ایجاد یک برنامه با عملکرد بالا کمک کنند؟
فریم ورک React یک کتابخانه JavaScript است. توسعه دهندگان می توانند از این کتابخانه برای ایجاد UI برای برنامه های تک صفحه (SPA) در محیط وب و تلفن همراه استفاده کنند.
هدف اصلی از توسعه React بهبود توسعه رابط کاربری JavaScript بود. اگرچه در ابتدا برای استفاده با فیسبوک راه اندازی شده بود، اما اکنون واکنش در بسیاری از صنایع از نرخ عالی استفاده برخوردار است. همچنین در جامعه وردپرس محبوبیت خاصی پیدا می کند، خصوصاً در بین توسعه دهندگانی که می خواهند وردپرس بدون دردسری راه اندازی کنند.
با یک تنظیم بدون سر، می توانید از WordPress CMS در بک-اند استفاده کنید، سپس قسمت جلویی خود را با استفاده از تقریباً هر فناوری توسعه ای که می خواهید، بسازید.
چارچوب های مبتنی بر واکنش می توانند از WordPress REST API به عنوان یک رابط برای دسترسی به داده های وب سایت شما از خارج از چارچوب وردپرس استفاده کنند. این بدان معناست که ایجاد SPA با استفاده از React امکان پذیر است.
React همچنین با حذف نیاز به ارائه مجدد، پروژه های شما را سریع تر می کند. SPA به جای بارگیری مجدد هر صفحه به طور کامل، محتوا را به صورت پویا بارگیری می کند.
این بدان معنی است که کد اساسی یک وب سایت فقط یک بار بارگیری می شود. اگر حالت یک مولفه تغییر کند، React فقط مولفه های لازم را دوباره ارائه می دهد.
React یک انجمن توسعه دهنده بزرگ و فعال دارد. شرکت های بزرگی مانند Facebook ،Airbnb ،Dropbox ،Netflix و Reddit برای ساخت بسیاری از برنامه های خود از React استفاده می کنند. این از نظر توسعه و پایگاه تخصصی با امتیازات زیادی همراه است.
برخی از فریم ورک های React که در این مقاله به آن ها خواهیم پرداخت، نسبتاً جدید هستند. استفاده از فناوری های پیشرفته ممکن است هیجان انگیز باشد، اما اگر با مشکلات فنی روبرو شوید نیز می تواند مشکلاتی ایجاد کند. شما ممکن است تلاش کنید تا یک متخصص پیدا کنید که دانش لازم برای حل مشکل شما را داشته باشد. با این حال با انتخاب فریم ورک React، می توانید از جامعه بزرگ و در حال رشد React درخواست کمک کنید.
آنچه شما باید در یک فریم ورک React به دنبال آن باشید:
هنگام استفاده از هر فناوری وب، انتخاب فریم ورک مناسب مهم است. هر فریم ورک مجموعه ای از ویژگی ها، نقاط قوت و ضعف منحصر به فرد خود را دارد. برخی از چارچوب ها نیز برای انواع خاصی از پروژه ها مناسب ترند.
در این مقاله ما چهار چارچوب React را به اشتراک می گذاریم که پیشنهادات زیادی برای توسعه دهندگان وردپرس دارد. با این حال چارچوب مناسب بسته به پروژه شما متفاوت خواهد بود. با استفاده از این ذهنیت، در اینجا چند نکته وجود دارد که باید در هنگام تصمیم گیری در مورد مناسب بودن چارچوب React برای خود در نظر بگیرید:
- مراحل نصب: تنظیم برخی از چارچوب ها نسبت به سایر چارچوب ها آسان تر است. به طور خاص باید بررسی کنید که آیا چارچوب از قبل برای کار با وردپرس پیکربندی شده باشد. همچنین بهتر است بررسی کنید که آیا این چارچوب ابزار های اضافی مورد نیاز برای ساخت پروژه شما را فراهم می کند یا خیر.
- منحنی یادگیری: تسلط بر یک فنآوری جدید همیشه به زمان و تلاش نیاز دارد، اما برخی از چارچوب ها نسبت به سایر موارد دارای منحنی یادگیری سریعتری هستند. به طور خاص شما باید بررسی کنید که آیا فناوری های اضافی مانند Redux ،Webpack ،Babel و GraphQL برای یادگیری نیاز دارید یا خیر.
- سازگاری و یا بهینه سازی: تمام چارچوب های این مقاله با وردپرس سازگار است. با این حال برخی ممکن است به منظور دستیابی به بهترین تجربه ممکن، به بهینه سازی اضافی نیاز داشته باشند. چهارچوب های دیگر مانند Frontity با وردپرس کاملاً مچ طراحی شده اند. چارچوب هایی که برای وردپرس بهینه شده اند، نیازی به پیکربندی اضافی خاصی ندارند.
- انعطاف پذیری یا سهولت استفاده: انتخاب چیز خوبی است، اما همه ی آن تنظیمات اضافی گیج کننده هستند. هنگام کاوش در فنآوری های جدید، هوشمندانه است که چارچوبی مناسب برای مبتدیان انتخاب کنید. با این حال بهتر است در نظر بگیرید که چگونه می توانید از این چارچوب در آینده استفاده کنید. یک چارچوب باید ویژگی های پیشرفته و انعطاف پذیری مورد نیاز شما برای پشتیبانی از پروژه های در حال رشد را ارائه دهد.
- تصمیم مهم دیگری نیز برای انتخاب چارچوب وجود دارد. این گزینه بین رندر سمت سرور (SSR) و رندر سمت کلاینت (CSR) است.
رندر سمت کلاینت یا رندر سمت سرور؟
برای ارائه محتوا دو روش وجود دارد: سمت کلاینت و سمت سرور. هر دو نقاط قوت و ضعف منحصر به فرد خود را دارند.
CSR محلی است که محتوا را در مرورگر ارائه می دهد. به جای دریافت تمام مطالب از یک سند HTML، مرورگر یک سند HTML بدون استخوان را با یک فایل JavaScript دریافت می کند. سپس بقیه مطالب در داخل مرورگر وب ارائه می شوند.
با CSR بارگیری صفحه اولیه به طور معمول کندتر است، اما بارگیری صفحه بعدی سریعتر خواهد بود. یک چارچوب CSR می تواند با بازنشر مجدد فقط عنصر DOM تحت تأثیر، UI را به روز کند. پس از هر تماس به سرور، نیازی نیست که کل UI را بارگیری کنید. این بدان معنی است که CSR به خوبی برای وب سایت هایی مناسب است که تعاملات کاربر غنی را ارائه می دهند یا محتوای پویای زیادی دارند.
مخالف سمت کلاینت، سمت سرور است. با SSR کاربر درخواست می کند و سرور یک بسته HTML برای آن کاربر خاص آماده می کند. سرور این داده ها را به دستگاه کاربر می فرستد و سپس مرورگر محتوا را می سازد و صفحه وب را نمایش می دهد.
روند واکشی داده ها ایجاد بسته HTML و تحویل آن ها به مرورگر بسیار سریع اتفاق می افتد. به این معنی است که بارگذاری اولیه صفحه سریعتر است که منجر به تجربه کاربری بهتر می شود.
با کاهش زمان بارگذاری صفحه SSR ممکن است بهینه سازی موتور جستجو (SEO) را افزایش دهد. SSR برای سئو نیز خوب است زیرا برای ارائه JavaScript نیازی به ربات های موتور جستجو نیست.
با این حال با SSR، ارائه صفحه معمولاً کندتر است. محتوای جدید همچنین نیاز به بارگیری مجدد صفحه کامل دارد که می تواند تأثیر قابل توجهی در عملکرد وب سایت شما داشته باشد. به همین دلیل SSR برای وب سایت های ثابت بهتر مناسب است. همچنین برای سایت هایی که دارای تعاملات کاربر پیچیده یا محتوای پویا هستند، ایده آل نیست.
بهترین فریم ورک های React برای توسعه وردپرس
بسیاری از چارچوب های React برای انتخاب وجود دارد. هر پروژه متفاوت است، اما ما 4 چارچوب React را جمع آوری کرده ایم که به اعتقاد ما توسعه دهندگان وردپرس، چیز های زیادی برای ارائه دارد.
1. Frontity
Frontity یک چارچوب اپن سورس برای React است. برخلاف دیگر چارچوب های React که با وردپرس سازگار هستند، Frontity به طور خاص برای WordPress.org و WordPress.com طراحی شده است. این بدان معنی است که Frontity از قبل پیکربندی شده است تا بهترین تجربه ممکن را برای کاربران وردپرس فراهم کند.
به عنوان یک چارچوب سمت سرور، Frontity تمام محتوای شما را در HTML ذخیره می کند، سپس با یک صفحه HTML کاملاً پر جمعیت و خوش فرم که بلافاصله قابل استفاده است، به درخواست ها پاسخ می دهد.
این زمان بارگذاری اولیه سایت شما را به حداقل می رساند. فایل HTML نیز برای خزنده های موتور جستجو ارائه می شود. این موتور های جستجو مانند Google را راضی نگه می دارد و به شما کمک می کند تا از مجازات SEO جلوگیری کنید.
حتی اگر از وردپرس برای راه اندازی بدون سر استفاده می کنید، باز هم ممکن است بخواهید از برچسب های متای تولید شده توسط یک افزونه SEO استفاده کنید. برای کمک به حفظ SEO، تیم Frontity یک پلاگین REST API – Head Tags ایجاد کرده است. این افزونه تمام برچسب های متا را در بخش HEAD وب سایت شما به پاسخ های REST API اضافه می کند.
Frontity به گونه ای طراحی شده است که استفاده از آن آسان است. این چارچوب مدیر دولتی خود را دارد و از Emotion برای CSS استفاده می کند، بنابراین لازم نیست پیچیدگی های فنآوری هایی مانند Redux را یاد بگیرید.
این باعث می شود Frontity گزینه خوبی برای تازه واردان React یا کسی باشد که به دنبال راه اندازی سریع یک پروژه بدون لزوماً تسلط بر فنآوری های اضافی است. در واقع شما می توانید با استفاده از Frontity و WordPress در پنج مرحله آسان یک برنامه وب بسازید.
2. Gatsby.js
طبق مطالعه Critical Case، افزایش یک ثانیه ای در زمان بارگیری صفحه می تواند باعث کاهش 11 درصدی بازدید صفحه شود. اگر نگران عملکرد سایت خود هستید، Gatsby یک سایت سازنده ایستا است که تمرکز را بر سرعت قرار می دهد.
Gatsby پروژه شما را در فایل های ثابت HTML که برای عملکرد بهینه شده اند، می سازد و همچنین فقط CSS ،HTML و JavaScript لازم را بارگیری می کند.
پس از بارگیری وب سایت شما، Gatsby سپس منابع اضافی مورد نیاز خود را فرا می خواند. این منجر به افزایش سرعت بارگذاری صفحه می شود.
با این حال Gatsby به دنبال نمایش محتوای ثابت است. گرچه کد سمت کلاینت را مجاز می کند، اما در مقایسه با راه حل های دیگر دارای منحنی شیب تیز است. اگر شما نیاز به نمایش مقدار زیادی محتوای پویا دارید، ممکن است Gatsby بهترین چارچوب برای پروژه شما نباشد.
برای تازه واردان تیم Gatsby یک پروژه پیش فرض مبتدی مفید ارائه می دهد. این پروژه شامل کد هایی مربوط به قسمت انتهایی وب سایت شما، از جمله سر صفحه سایت و الگوی صفحه است.
همچنین به طور خودکار تمام ماژول های کدی را که پروژه شما به آن وابسته است، نصب می کند. با این کار می توانید زمان قابل توجهی را در هنگام شروع صرفه جویی کنید. اگر Gatsby را به عنوان چارچوب خود انتخاب کردید، توصیه می کنیم هر جا ممکن باشد از پروژه پیش فرض شروع کننده استفاده کنید.
با این حال اگر Gatsby را انتخاب کنید، هر زمان که محتوای خود را به روز می کنید، باید ساخت را ایجاد کنید. یک راه حل این است که وب سایت خود را با استفاده از بستر Netlify مستقر کنید.
شما می توانید از Netlify برای ایجاد webhooks استفاده کنید که هر زمان که یک تعهد جدید به شاخه اصلی مخزن شما فشار داده شود یا ادغام شود، پروژه شما را به طور خودکار بازسازی می کند.
متناوباً می توانید با استفاده از یک افزونه وردپرس مانند WP Trigger Netlify Build کمک بگیرید. با این حال، این روند بازسازی می تواند پیچیدگی قابل توجهی را به پروژه های وردپرس شما اضافه کند.
مطالعه بیشتر …
3. Next.js
Next.js یک فریم ورک مینیمالیستی React است. این چارچوب برنامه ها را در سمت کلاینت ارائه می دهد، اما Next.js از SSR هم پشتیبانی می کند. همچنین می تواند ضمن حفظ عملکرد پروژه، به حفظ سئو شما کمک کند. به لطف رندر خودکار سرور و تقسیم کد، Next.js می تواند باعث افزایش عملکرد اضافی شود.
این بدان معنی است که Next.js انعطاف پذیرترین راه حل نیست. به عنوان مثال شما ممکن است در استفاده از روتر دیگری با تنظیمات Next.js خود مشکل داشته باشید.
قبل از انتخاب Next.js به عنوان چارچوب خود، فکر هوشمندانه ای است که باید در مورد چگونگی توسعه پروژه خود در آینده فکر کنید. سپس می توانید مستندات Next.js را مطالعه کرده و تصمیم بگیرید که آیا این چارچوب با نقشه راه پروژه شما سازگار است یا خیر.
اگر تصمیم دارید از Next.js استفاده کنید، می توانید تمام نرم افزار های لازم را نصب کرده و سرور توسعه را از خط فرمان شروع کنید. دستورالعمل های دقیق و گام به گام را می توانید در اسناد رسمی Next.js مشاهده کنید .
4. Create React App (CRA)
برنامه React App (CRA) به این منظور طراحی شده است که پروژه React شما را در اسرع وقت فعال و راه اندازی کند. این ابزار یک ساخت مدرن با پیکربندی صفر را ارائه می دهد. شما فقط باید یک دستور را اجرا کنید و CRA تمام ابزار های لازم برای شروع توسعه را تنظیم می کند.
هنگامی که با Create React App پروژه ای ایجاد می کنید، آخرین نسخه React و React-DOM را نصب می کند. همچنین آخرین نسخه اسکریپت های واکنش را نصب می کند که وابستگی توسعه ای است و سایر وابستگی های مربوط به شروع، آزمایش و ساخت برنامه شما را مدیریت می کند.
CRA فقط فایل های مورد نیاز برای ساخت پروژه React شما را تولید می کند. به فایل های پیکربندی مانند Webpack ،Babel و ESLint دسترسی نخواهید داشت.
این برای هر کسی که می خواهد بدون نیاز به تسلط بر فنآوری های اضافی پروژه ایجاد کند، عالی است. از آنجا که CRA بسیاری از تنظیمات را برای شما انجام می دهد، شما آزادانه می توانید روی آنچه واقعاً مهم است در ساخت پروژه خود تمرکز کنید.
با این وجود ممکن است در بعضی از مراحل نیاز به انجام کارهای پیچیده تری داشته باشید که به دسترسی به این فایل های پیکربندی نیاز دارند.
اگرچه CRA این فایل ها را به طور پیش فرض ارائه نمی دهد، اما دستور eject دارد. این کلیه فایل های پیکربندی و وابستگی های انتقالی را در پروژه شما کپی می کند. با این حال این یک عملیات یک طرفه است که مقدار قابل توجهی پیچیدگی را به پروژه شما اضافه می کند.
پروژه های CRA فقط در سمت کلاینت ارائه می شوند. این بدان معنی است که CRA برای توسعه وب سایت های بسیار تعاملی یا پروژه هایی که دارای محتوای پویا هستند مناسب نیست. همچنین هیچ تقسیم کدی وجود ندارد، که خبر بدی برای عملکرد است.
CRA با سهولت استفاده در ذهن طراحی شده است. اگر CRA را به عنوان فریم ورک React خود انتخاب کنید، می توانید فقط با استفاده از تعداد معدودی از دستورات یک پروژه CRA جدید ایجاد کنید.
هاست مناسب برای پروژه React
هنگامی که از برنامه وب خود راضی بودید، می خواهید آن را با دنیا به اشتراک بگذارید. بسته به انتخاب فریم ورک React برای استفاده در پروژه، ممکن است گزینه های شما متفاوت باشد.
برای ارائه وسیع ترین گزینه ممکن به کاربران، تیم Frontity اطمینان حاصل می کند که کد سرور آن ها به اندازه کافی کوچک است تا بتواند با فناوری های بدون سرور کار کند.
این بدان معنی است که می توانید پروژه Frontity خود را در هر سرور Node.js یا ارائه دهنده بدون سرور از جمله Vercel و AWS Lambda مستقر کنید . متناوباً از آنجا که از وردپرس استفاده می کنید، ممکن است بخواهید راه حل میزبانی وردپرس مورد علاقه خود را انتخاب کنید.
نتیجه
React یک فرم ورک فرانت-اند بسیار محبوب است. با این حال با محبوبیت گزینه های زیادی وجود دارد و انتخاب بهترین فریم ورک React برای پروژه شما بسیار طاقت فرسا است.
اگر مطمئن نیستید که از کجا می خواهید به دنبال فریم ورک React بگردید، هر یک از چهار گزینه ای را که قبلا توصیه کردیم بررسی کنید:
- Frontity: یک چارچوب اپن سورس و سمت سرور که برای وردپرس بهینه شده است.
- Gatsby: یک تولید کننده سایت ایستا که اولویت را در عملکرد قرار می دهد، بدون اینکه بهینه سازی موتور جستجو (SEO) را به خطر بیندازد.
- Next.js: چارچوبی متمرکز بر عملکرد که به طور شفاف SSR را کنترل می کند.
- Create React App (CRA): یک چارچوب با پیکربندی صفر برای مواقعی که باید سریعاً یک پروژه React ایجاد کنید.
فناوری هایی مانند React می توانند عملکرد پروژه شما را به میزان قابل توجهی افزایش دهند، اما چرا در این مرحله متوقف می شوید؟ با انتخاب یک ارائه دهنده میزبانی که اولویت عملکرد را دارد، می توانید پروژه React خود را فوق العاده شارژ کنید.
