Static site generators
از آن‌جایی که قلب تپنده گتسبی، مولفه مولد ایستای سایت SSG سرنام Static Site Generator است، اجازه دهید ابتدا به سراغ ارزیابی مولفه فوق برویم. اگر یک صفحه HTML ساده که اواسط دهه 90 میلادی توسعه پیدا کرده و روی سروری میزبانی شده را مشاهده کنید، متوجه می‌شوید در حال نگاه کردن به یک وب‌سایت ایستا هستید. چه عاملی باعث می‌شود تا محتوای یک سایت ایستا در وب جذاب به‌نظر برسد؟
عنصر ویژه‌ای که مولدهای ایستای سایت به جداول وارد میکنند، بارگذاری محتوای پویا است. در یک سیستم مدیریت محتوای مبتنی بر پایگاه داده مثل وردپرس یا دروپال، یک لایه نرم‌افزاری درخواست‌های دسترسی به منابع ارسال‌شده توسط کلاینت‌ها را دریافت می‌کند، قالب‌ها و فایل‌های محتوا را با یک‌دیگر ادغام می‌کند و سپس یک صفحه کامل HTML را در پاسخ ارائه می‌کند. با این حال، مولدهای ایستای سایت، محتوا را از قالب‌هایی که آن‌ها را نمایش می‌دهند، جدا میکنند. آن‌ها در زمان ساخت صفحات HTML، قالب‌ها را با محتوای واکشی‌شده از یک API خارجی ترکیب میکنند، این صفحات را در یک وب‌سرور بارگذاری میکنند و در نهایت HTML پردازش‌شده را به‌عنوان پاسخ برای کلاینت ارسال میکنند. با ساخت و ارائه صفحات وب به این روش، مولدهای ایستای سایت چند مزیت مهم ارائه می‌دهند. اول از همه، مشکل تاخیر میان پایگاه داده و درخواست‌ها را برطرف میکنند و سرعت و قابلیت اطمینان وب‌سایت‌ها را به میزان قابل توجهی بهبود می‌بخشند. مزیتی که روش فوق دارد این است که نه‌تنها سایت‌های ایستا به‌شکل سریع‌تری در مرورگرها بارگیری می‌شوند، بلکه مشکل مصرف بیش‌ازاندازه ترافیک و از‌دست‌رفتن برای پایگاه داده را حل میکنند. همچنین، مسئولیت بخشی از فرآیندهای مدیریت سرور پایگاه داده را بر عهده می‌گیرند. یکی دیگر از مزایای کلیدی مولدهای ایستای سایت این است که برای ارائه محتوای سایت خود به یک سامانه مدیریت محتوا (CMS) یا پایگاه داده متصل نیستید. درعوض، می‌توانید محتوا را از هر واسط برنامه‌نویسی کاربردی خارجی که با سازنده ایستای سایت سازگار است، دریافت کنید. اگرچه برخی از مولدهای ایستای سایت تنها به بارگیری محتوا از فایل‌های Markdown محدود می‌شوند، برخی دیگر (از جمله گتسبی) انعطاف‌پذیرتر هستند و به منابع متنوع‌تری اجازه می‌دهند که لایه داده را تشکیل دهند.
وب‌سایت‌هایی که روی مولدهای ایستای سایت اجرا می‌شوند، قابلیت استفاده و مزایای قابل توجهی از نظر سئو در اختیار مالکان سایت‌ها قرار می‌دهند. نکته دیگری که باید در این باره به آن اشاره داشته باشیم، این است که گوگل اعلام کرده، ویژگی Page Experience Update یکی از سه معیار کلیدی در زمینه ارزیابی تجربه کاربری در هنگام بازدید از یک صفحه وب است که تاثیر مستقیمی بر رتبه‌بندی صفحه دارد. معیاری که گتسبی به‌خوبی قادر به مدیریت آن است.
JAMstack
مولدهای ایستای سایت شکل دیگری از معماری وب به‌نام JAMstack که متشکل از JavaScript ،APIها و Markup است را ارائه می‌دهند. یک معماری کارآمد که قادر است فرآیند ساختاردهی به منابع مختلف مورد نیاز برای میزبانی و ارائه محتوای وب را به‌شکل بهتری مدیریت کند. اجازه دهید به مولفه‌های کلیدی معماری JAM نگاهی داشته باشیم.
- JavaScript: جاوا‌اسکریپت قابلیت‌های کاربردی زیادی ارائه می‌کند، یکی از آن‌ها مدیریت عملکردهای پویا هنگام ترکیب داده‌ها و محتوا در قالب رابط کاربری است. معماری JAMstack هیچ محدودیتی در رابطه با چارچوب‌ها یا کتاب‌خانه‌هایی که می‌توان در این زمینه از آن‌ها استفاده کرد، اعمال نکرده است، بنابراین توسعه‌دهندگان می‌توانند از چارچوب‌هایی که تسلط بیشتری بر آن‌ها دارند، استفاده کنند.
- APIها: دومین مولفه قدرتمند این معماری، واسط‌های برنامه‌نویسی کاربردی هستند که توانایی انتزاعی کردن عملیات‌های سنتی سمت سرور را دارند. این فرآیند می‌تواند از طریق سرویس‌های شخص ثالث مثل یک شبکه تحویل محتوا، یک CMS با افزونه‌های خارجی یا یک عملکرد سفارشی‌سازی‌شده انجام شود.
- Markup: نشانه‌گذاری در معماری JAM به این واقعیت اشاره دارد که این وب‌سایت‌ها از فایل‌های Markdown به‌عنوان منبعی برای ارائه فایل‌های ایستای HTML استفاده میکنند. در مورد گتسبی، این فایل‌های Markdown از طریق پلاگین‌های متصل به سایر APIها، CMSها یا پایگاه‌های داده دریافت می‌شوند.
گتسبی در تعامل با JAMstack
مولفه‌های React ماژولار هستند و قابلیت استفاده مجدد بالایی دارند. بنابراین برای استفاده به‌عنوان مکانیزم بسته‌بندی محتوای پویا ایده‌آل هستند. عملکرد یک مولفه در برنامه‌های مبتنی بر گتسبی به مکان آن در سیستم فایلی بستگی دارد. مولفه‌های موجود در پوشه src/components صفحات و هماهنگ با نام فایل‌ها ایجاد می‌شوند. این نام‌گذاری می‌تواند شبیه به حالت زیر باشد:
src/pages/about.js mywebsite.com/about
مولفه‌های قالب صفحه (Page Template Components) شبیه مولفه‌های صفحه هستند، هرچند در پوشه src/templates قرار دارند و می‌توانند از محاوره‌های GraphQL برای بازیابی داده‌های نشانه‌گذاری‌شده در یک صفحه استفاده کنند. مولفه‌های قالب صفحه، این توانایی را دارند تا ضمن حفظ الگوی طراحی رابط یک صفحه، برای ساخت منابع مورد استفاده قرار گیرند، اما محتوای متفاوتی مثل پست‌های وبلاگی، صفحات پروفایل کاربر و داشبورد را نمایش دهند. بر مبنای این تعریف باید بگوییم که گتسبی یک چارچوب رایگان و منبع‌باز مبتنی بر React است که به توسعه‌دهندگان کمک می‌کند تا وب‌سایت‌ها و برنامه‌های وب‌محور را در مدت زمان کوتاهی توسعه دهند. گتسبی به توسعه‌دهندگان این امکان را می‌دهد که با استفاده از React یک سایت طراحی کنند و با هر منبع داده‌ای (CMS ،Markdown و غیره) محتوا را به وب‌سایت تزریق کنند. گتسبی می‌تواند تنها کدهای HTML ،CSS و JavaScript مهم را بارگیری کند تا سایت با سرعت بیشتری بارگذاری شود. پس از بارگیری مولفه‌های ضروری، گتسبی می‌تواند دیگر عناصر موردنیاز صفحات را از منابع مختلف واکشی کند. همین مسئله باعث می‌شود تا کاربران هر زمان روی عناصر مختلف یک وب‌سایت کلیک میکنند، در کوتاه‌ترین زمان ممکن نتیجه کلیک را مشاهده کنند.
گتسبی به دنبال دستیابی به چه چیزی است؟
گتسبی با ارائه یک معماری متفاوت سعی دارد سبک جدیدی از روند توسعه وب‌سایت‌ها و برنامه‌های وب‌محور را معرفی کند. به بیان دقیق‌تر، گتسبی در تلاش است با ارائه مفاهیم انتزاعی مثل gatsby-image، gatsby-link و نمونه‌های مشابه، روند توسعه وب‌سایت‌ها را سریع‌تر و ساده‌تر کند.
گتسبی مفهوم جدیدی را که «سیستم توری محتوای» (Content Mesh System) نام دارد ارائه کرده است. سیستمی که به توسعه‌دهندگان اجازه می‌دهد، سایت‌های محتوامحور را به‌شکل کارآمدی توسعه دهند. به‌طور سنتی، یک راه‌حل CMS، یک برنامه یکپارچه برای ذخیره محتوا، ساخت سایت‌ها و ارائه آن‌ها به کاربران ارائه می‌دهد، اما با گذشت زمان، صنعت به‌سمت استفاده از ابزارهای تخصصی برای دستیابی به حوزه‌های کلیدی مثل جست‌وجوهای غنی، تجزیهوتحلیل، پرداخت‌ها و غیره حرکت کرد که سرعت حرف اول را در آن‌ها می‌زند. متاسفانه، کیفیت وب‌سایت‌ها و برنامه‌هایی که توسط سامانه‌های مدیریت محتوا توسعه پیدا میکنند، تقریبا ثابت باقی مانده و اگر نگاهی به وب‌سایت‌هایی داشته باشید که بر مبنای CMS طراحی شده‌اند، به‌خوبی متوجه این مسئله می‌شوید.
برای حل مشکل معماری ماژولار CMS، گتسبی یک مش محتوا ارائه کرده است که مبتنی بر یک لایه زیرساختی است. مش محتوا، سیستم‌های محتوا را در یک محیط توسعه مدرن به هم متصل می‌کند و در عین حال عملکرد وب‌سایت‌ها را بهینه می‌کند. مش محتوا به توسعه‌دهندگان قدرت لازم برای توسعه و به تولیدکنندگان محتوا انعطاف‌پذیری در درج محتوا در منابع مختلف را می‌دهد. رویکرد فوق به کاربران نهایی اجازه می‌دهد به بهترین شکل به سرویس‌های موردنیاز خود دسترسی داشته باشند. شکل ۱ معماری سنتی سامانه‌های مدیریت محتوا و شکل ۲ معماری مش توری گتسبی را نشان می‌دهد.
شکل 1
شکل 2
GraphQL واسط‌های برنامه‌نویسی کاربردی را به مولفه‌ها متصل می‌کند
شبیه به ری‌اکت، GraphQL نیز توسط شرکت فیسبوک توسعه پیدا کرد. همین مسئله باعث شده تا یکی از قوی‌ترین و انعطاف‌پذیرترین راه‌حل‌ها برای بارگذاری داده‌ها در مولفه‌های ری‌اکت را ارائه کند. GraphQL، به‌عنوان یک زبان پرس‌و‌جو، عملکردی مشابه با SQL دارد، زیرا کاربر داده‌های لازم را در یک محاوره وارد می‌کند تا پاسخ موردنظر را دریافت کرد. با این حال، از برخی جهات، ترکیب نحوی GraphQL ساده‌تر و واضح‌تر از SQL است. به‌عنوان مثال، پرس‌و‌جو زیر را در نظر بگیرید:
const query = graphql
query BlogPostQuery {
site {
title
content
}
}
داده‌هایی که این پرس‌و‌جو برمی‌گرداند، ساختار خود پرس‌و‌جو را حفظ میکنند که در نوع خود جالب توجه است:
data: {
site: {
title: “Seven tips for sprucing up your living room”
content : “Here is the content for this blog post about sprucing up your living room.”
}
}
انعطاف‌پذیری فراتر از نشانه‌گذاری ساده
بر خلاف برخی از مولدهای ایستای سایت که می‌توانند فایل‌های نشانه‌گذاری را برای ساخت لایه محتوای مولفه‌ها مورد استفاده قرار دهند، سایت‌هایی که توسط گتسبی پیاده‌سازی می‌شوند، انعطاف‌پذیری لازم برای دریافت داده‌ها از منابع مختلف را دارند. محبوب‌ترین انتخاب برای مدیریت محتوا، سامانه‌های مدیریت محتوای Headless هستند که به مجموعه خاصی از فناوری‌های وب برای پردازش داده‌ها وابسته نیستند. Contentful ،DatoCMS ،Prismic ،Sanity و Strapi برخی از محبوب‌ترین سامانه‌های مدیریت محتوای Headless هستند که مورد توجه توسعه‌دهندگان گتسبی قرار دارند. البته در اسناد منتشرشده توسط تولیدکنندگان گتسبی مشاهده می‌کنیم که طراحان وب به گزینه‌های CMS بیشتر و ابزارهای محبوبی مثل پیش‌پردازش‌های CSS، کتابخانههای مولفه رابط‌های کاربری و ابزارهای لازم برای توسعه سایت‌های تجارت الکترونیک و تجزیهوتحلیل دسترسی دارند.
به‌طور کلی، گتسبی سعی دارد فرآیند ساخت وب‌سایت‌ها را سرگرم‌کننده کند، به‌طوری که هر یک از ذی‌نفعان پروژه بتوانند به‌سرعت نتیجه کاری که را انجام می‌دهند مشاهده کنند. برای آن‌که عملکرد گتسبی را بررسی کنیم، اجازه دهید چگونگی درج یک تصویر واحد در یک وب‌سایت را بررسی کنیم:
- یک صفحه طراحی شده است.
- تصاویر خاصی انتخاب می‌شوند.
- اندازه تصاویر مطابق با اندازه دستگاه‌های مختلف تغییر اندازه داده می‌شوند.
- در نهایت، تصاویر در HTML/CSS/JS یا مولفه React صفحه قرار می‌گیرند.
gatsby-image در لایه داده گتسبی ادغام می‌شود و از قابلیت‌های پردازش تصویر به‌همراه graphql برای پرس‌و‌جو در مورد اندازه و شکل متفاوت تصاویر استفاده می‌کند. در معماری فوق، پیچیدگی مربوط به تعریف متغیرهای مرتبط با تصاویر حذف می‌شود. به همین دلیل، به‌جای مشاهده یک خط کد طولانی از مجموعه دستوراتی که قرار است برای تنظیم و بهینه‌سازی تصاویر وب‌سایت مشاهده کنید، یک خط کوتاه را مشاهده خواهید کرد. برای این منظور کافی است مراحل زیر را دنبال کنید.
- gatsby-image را نصب کنید.
- مشخص کنید تصاویری با چه اندازه‌ای نیاز دارید.
- درخواست خود و مولفه gatsby-image را به صفحه موردنظر اضافه کنید.
- و تمام. اکنون به تصاویر سرگرم‌کننده به ساده‌ترین شکل دسترسی خواهید داشت.
همان‌گونه که اشاره کردیم، گتسبی اجازه توسعه وب‌سایت‌های با کیفیت بالا را می‌دهد. وب‌سایت‌هایی که بر مبنای معیارهای کیفیت، امنیت، قابلیت نگه‌داری و سئو توسعه پیدا میکنند و سرعت بالایی دارند. گتسبی این ویژگی‌ها را به‌طور پیش‌فرض در هنگام طراحی وب‌سایت‌ها به آن‌ها اضافه می‌کند تا کار توسعه‌دهندگان و طراحان وب را ساده کند. تاثیرگذارترین راه برای بهبود و پیشرفت دنیای وب این است که در حالت پیش‌فرض وب‌سایت‌ها با کیفیت بالایی توسعه پیدا کنند.
چگونه کار با گتسبی را آغاز کنیم؟
فرآیند بارگذاری و اجرای گتسبی ساده است. با فرض این‌که Node را به‌صورت محلی نصب کرده‌اید، در مرحله بعد باید Gatsby را به‌شرح زیر نصب کنید:
npm install -g gatsby-cli
اکنون می‌توانید یک دایرکتوری محلی و یک مخزن راه دور که قرار است پروژه در آن ذخیره‌سازی شود، ایجاد کنید. مراحل انجام این‌کار به‌شرح زیر است:
gatsby new [SITE_DIRECTORY_NAME] [URL_OF_STARTER_GITHUB_REPO]
با این کار تمام فایل‌ها و ملزوماتی که برای پروژه گتسبی نیاز دارید به آن افزوده می‌شود. در مرحله بعد، باید محیط توسعه یکپارچه‌ای را که از آن استفاده می‌کنید باز کنید و به آدرس src/pages/index.js بروید. در این حالت، ساده‌ترین مولفه ری‌اکت را که به‌عنوان صفحه اصلی سایت در دسترس‌تان قرار دارد مشاهده خواهید کرد.
export default () => <div>Hello World!</div>
اکنون آماده‌اید از امکاناتی که اکوسیستم گتسبی ارائه می‌کند، استفاده کنید و یک سایت ایستای بسیار کارآمد ایجاد و راه‌اندازی کنید. شما می‌توانید صفحات جدیدی را با Markdown به پروژه اضافه کنید، مولفه‌هایی را با MDX به Markdown اضافه کنید، وب‌سایت را آزمایش کنید و کارهای این‌چنینی را انجام دهید.
هنگامی که یک وب‌سایت با گتسبی راه‌اندازی می‌شود، افزونه mParticle Gatsby کمک می‌کند تا اتصال سایت به mParticle و فرآیند جمع‌آوری داده‌های کاربری و رویداد‌ها ساده شود. برای این منظور در دایرکتوری ریشه پروژه باید دستور نصب سریع NPM را اجرا کنید.
npm i @mparticle/gatsby-plugin-mparticle
در این حالت، gatsby-js.config به پروژه افزوده می‌شود.
module.exports = {
plugins: [
// Other plugins here...
{
resolve: ‘@mparticle/gatsby-plugin-mparticle’,
options: {
apiKey: ‘YOUR APP KEY’,
logPageViews: true or false,
config: {
‘Your mParticle config object here, if needed e.g. isDevelopmentMode’,
},
}
}
]
}
کلام آخر
گتسبی تنها با هدف ساخت سایت‌های ایستا مورد استفاده قرار نمی‌گیرد. گتسبی به‌طور کامل قادر به تولید PWA به‌همراه تمام آن چیزی است که یک توسعه‌دهنده وب به آن نیاز دارد. کارهایی مثل احراز هویت، تعاملات پویا، واکشی داده‌ها و غیره نیز توسط گتسبی قابل انجام است. گتسبی این کار را با تولید محتوای ثابت با استفاده از APIهای سمت سرور React DOM انجام می‌دهد. هنگامی که HTML اولیه توسط گتسبی تولید می‌شود، در ادامه ری‌اکت فرآیند مدیریت عناصر در پشت صحنه را بر عهده می‌گیرد. این حرف به این معنا است که گتسبی تا آن‌جایی که ممکن است به‌صورت ایستا و پیشاپیش پردازش را انجام می‌دهد. در ادامه، ری‌اکت پردازش‌های سمت کلاینت را انجام می‌دهد تا توسعه‌دهندگان بتوانند کارهایی را که روی یک برنامه وب سنتی ری‌اکت انجام می‌دهند دنبال کنند.
ماهنامه شبکه را از کجا تهیه کنیم؟
ماهنامه شبکه را می‌توانید از کتابخانههای عمومی سراسر کشور و نیز از دکه‌های روزنامه‌فروشی تهیه نمائید.
ثبت اشتراک نسخه کاغذی ماهنامه شبکه
ثبت اشتراک نسخه آنلاین
کتاب الکترونیک +Network راهنمای شبکه‌ها
- برای دانلود تنها کتاب کامل ترجمه فارسی +Network اینجا کلیک کنید.
کتاب الکترونیک دوره مقدماتی آموزش پایتون
- اگر قصد یادگیری برنامه‌نویسی را دارید ولی هیچ پیش‌زمینه‌ای ندارید اینجا کلیک کنید.
نظر شما چیست؟