اگر شما یک توسعه‌دهنده وب هستید، به احتمال زیاد نام Gatsby.js را شنیده اید. این فریم‌ورکِ قدرتمند و اوپن‌سورس به شما امکان می‌دهد با استفاده از فناوری‌های مدرن مانند React و GraphQL وب سایت‌های سریع و مدرن بسازید.
یکی از چیز‌های خوب در مورد گتسبی این است که می‌توان از آن با انواع Backendها از جمله سیستم‌های مدیریت محتوا مانند وردپرس استفاده کرد. در این پست، نحوه استفاده از گتسبی و وردپرس را با هم بررسی خواهیم کرد.
مقایسه Headless وردپرس و Traditional وردپرس
در وردپرس پیش‌فرض، از یک تم سنتی وردپرس استفاده خواهید کرد. با این حال، در Headless وردپرس، از تم‌های وردپرس استفاده نمی‌کنید. در وردپرس پیش‌فرض، افزونه‌ها همانطور که انتظار دارید کار می‌کنند، مالک وب‌سایت می‌تواند یک افزونه را از داشبورد دانلود و استفاده کند. با این حال، در یک سایت Headless وردپرس، مالک سایت همچنان می‌تواند افزونه‌ها را دانلود کند، اما برای کارکرد آن در بیشتر موارد به توسعه سفارشی نیاز دارد زیرا افزونه‌ها امکان ایجاد تغییرات بر روی فرانت‌اند Gatsby را ندارند. توسعه‌دهنده باید یک اتصال از طریق WordPress REST API یا WordPress GraphQL API باز کند که می‌تواند شامل هزینههای اضافی توسعه باشد.
برای اطلاعات بیشتر می‌توانید به مقاله مقایسه معماری CMS های Headless و Coupled مراجعه کنید.
چرا از Gatsby + WP استفاده کنیم؟
چند مزیت کلیدی برای استفاده از گتسبی با وردپرس وجود دارد:
- پرفورمنس: گتسبی برای هر صفحه در سایت شما فایل های HTML ایستا تولید می کند، به این معنی که سایت شما می‌تواند به سرعت و بدون نیاز به Server Side Rendering اجرا شود. این می‌تواند برای سایت‌هایی با ترافیک زیاد یا برای سایت هایی که نیاز به بارگذاری سریع در دستگاه‌های تلفن همراه دارند، مزیت بزرگی باشد. همچنین امکان فعالسازی PWA به آسانی وجود دارد.
- جداسازی نگرانی ها: گتسبی Frontend و Backend سایت شما را از هم جدا می کند و به شما این امکان را می دهد که روی ایجاد یک تجربه کاربری عالی تمرکز کنید و در عین حال مدیریت محتوا را به وردپرس بسپارید. این می‌تواند مدیریت سایت و به‌روزرسانی‌ها را آسان‌تر کند.
- امنیت: از آنجایی که گتسبی فایل های HTML ایستا تولید می کند، نیازی به نگرانی در مورد آسیب پذیری‌های کد سمت سرور نیست. این می‌تواند سایت شما را ایمن‌تر کند و خطر حملات را کاهش دهد.
- همان تجربه عالی خلق محتوا: بیشتر نیرو‌های تولید‌محتوا، تجربه کار با وردپرس را داشته‌اند. نیازی به سوییچ کردن به یک داشبورد جدید نیست. با استفاده از داشبورد وردپرس به تولید محتوا بپردازید و بقیه کارها را به گتسبی واگذار کنید. گتسبی می‌تواند پیش‌نمایش مطالب شما را پیش از انتشار نمایش دهد.
- کاهش هزینههای نگه‌داری: فقط کافیست سایت وردپرسی خود را در یک هاست ارزان نگه‌داری کنید. هزینههای نگه‌داری یک سایت استاتیک و پرترافیک که با گتسبی ایجاد شده، بسیار کمتر از هزینههای یک‌سایت وردپرسی پرترافیک است.
معایب استفاده از گتسبی و وردپرس
معایب براساس توانایی‌های تیم و سایت شما می‌تواند بسیار متفاوت باشد اما مهم‌ترین مواردی که قبل از شروع پروژه باید بدانید عبارت‌اند از:
- توانایی‌های تیم: توسعه‌دهنده‌ای که سایت را می‌سازد باید با React.js و GraphQL آشنا باشد تا بتواند یک سایت مناسب ایجاد کند. این توانایی‌ها معمولاً خارج از مجموعه مهارت‌های یک توسعه‌دهنده وردپرس (درحال حاضر) است.
- ضعف عملکرد افزونه‌های وردپرس: در یک سایت پیش‌فرض وردپرس، افزونه‌های زیادی برای افزودن فیچر‌های حرفه‌ای به سایت وجود دارد. برای اینکه برخی پلاگین ها به درستی در WP+Gatsby کار کنند، به توسعه سفارشی نیاز دارید. بنابراین اگر در حال حاضر یک وب سایت با تعداد زیادی افزونه دارید، ساخت وب سایت در GatsbyJS زمان و هزینه پروژه را افزایش می‌دهد.
نحوه استفاده از گتسبی با وردپرس
استفاده از گتسبی با وردپرس آسان است. در اینجا یک نمای کلی در سطح بالا از این فرآیند است:
- راه اندازی سایت وردپرسی: اگر سایت وردپرسی ندارید، باید آن را راه‌اندازی کنید. می‌توان بر روی سرور خود یا با استفاده از یک سرویس مانند liara.ir انجام داد.
- افزونه Gatsby WordPress source را نصب کنید: این افزونه به گتسبی اجازه می‌دهد تا داده‌ها را از سایت وردپرس شما دریافت کند و از آن برای تولید فایل های HTML ایستا استفاده کند.
- راه‌اندازی گتسبی: در مرحله بعد، باید یک سایت گتسبی راه اندازی کنید. این را می توان با استفاده از Gatsby CLI یا با استفاده از یک Starter template انجام داد.
- پیکربندی افزونه Gatsby WordPress source: پس از نصب افزونه، باید آن را طوری پیکربندی کنید که به سایت وردپرس شما متصل شود. این کار با ارائه URL سایت و یک کلید API انجام می شود.
- کوئری‌های GraphQL را بنویسید: گتسبی از GraphQL برای کوئری از داده‌های سایت وردپرس شما استفاده می کند. باید کوئری‌های GraphQL بنویسید تا به گتسبی بگویید چه داده هایی را می خواهید در فایل‌های HTML استاتیک خود بگنجانید. درصورت استفاده از Starter themeهای مناسب برای وردپرس، بخش زیادی از کار شما انجام شده است.
- سایت خود را بیلد و دیپلوی کنی د: هنگامی که سایت گتسبی شما پیکربندی شد و کوئری‌های GraphQL شما نوشته شد، می توانید از Gatsby CLI برای ساخت سایت خود و استقرار آن در یک سرویس میزبانی استفاده کنید.
این وبلاگ با استفاده از WP+Gatsby توسعه داده شده است و از Vercel برای استقرار و میزبانی استفاده می‌شود. برای اطلاعات بیشتر درباره مزایای گتسبی می‌توانید به سایت Gatsbyjs.com مراجعه کنید و درباره آن اطلاعات کسب کنید.