Gatsby را با Strapi ادغام کنید

Gatsby یک مولد سایت مدرن و فوق العاده سریع برای React است.

بهترین Headless CMS برای Gatsby

از Strapi برای نگهداری و مدیریت سایت استاتیک Gatsby خود استفاده کنید.

ترکیب سریع: Strapi توسط پایه فناوری مدرن از Node.js که بسیار سریع است استفاده شده است. به علاوه، می تواند محتوای شما را با GraphQL ارائه دهد.

Gatsby تقسیم کد، بهینه‌سازی تصویر، inlining critical styles، lazy-loading، و واکشی اولیه منابع و موارد دیگر را خودکار می‌کند تا مطمئن شود سایت شما سریع است.

مزایای Strapi + Gatsby

تولید کننده سایت ایستا مزایای زیادی را به همراه دارد: عملکرد، امنیت، هزینه کمتر مقیاس بندی، اما همچنین یک تجربه توسعه عالی.

Gatsby با کمک Headless و تولید کننده محتوا به حل بسیاری از چالش ها آمده و مزایای زیادی برای سازندگان و توسعه دهندگان محتوا به ارمغان می آورد.

Strapi یک راه حل عالی به عنوان منبعی برای تولید Gatsby’s static markup ارائه می دهد. چه ساخت یک سایت ثابت، چه یک برنامه/وب سایت پویاتر، Strapi شما را با انعطاف پذیری انواع محتوا، پلاگین ها و سفارشی سازی پوشش می دهد.

با استفاده از Webhooks به صورت خودکار انجام دهید

از ویژگی webhook داخلی استفاده کنید که به شما امکان می دهد پروژه Gatsby خود را به صورت خودکار پس از به روز رسانی داده های خود بسازید.

بلافاصله پس از ایجاد تغییرات در Strapi، محتوای جدید شما پخش می شود.

شروع کار با Gatsby

راهنمای ادغام مستندات ما را دنبال کنید تا نحوه استفاده از API نوع محتوای Strapi از Gatsby را ببینید. گتسبی به عنوان یک سازنده سایت استاتیک، محتوای شما را در زمان ساخت از Strapi دریافت می کند. بنابراین، باید گتسبی را برای برقراری ارتباط با برنامه Strapi خود با استفاده از دستور CLI زیر پیکربندی کنید.

yarn add gatsby-source-strapi

module.exports = {
  plugins: [
    {
      resolve: "gatsby-source-strapi",
      options: {
        apiURL: process.env.STRAPI_API_URL || "http://localhost:1337",
        accessToken: process.env.STRAPI_TOKEN,
        collectionTypes: [
          {
            singularName: "restaurant",
            queryParams: {
              publicationState:
                process.env.GATSBY_IS_PREVIEW === "true" ? "preview" : "live",
              populate: {
                cover: "*",
                blocks: {
                  populate: "*",
                },
              },
            },
          },
          {
            singularName: "category
          }
        ],
      },
    },
  ],
}

در اینجا نمونه ای GraphQL API آورده شده است ./src/pages/index.js

import React from 'react';

import { StaticQuery, graphql } from 'gatsby';

const query = graphql`
  query {
    allStrapiRestaurant {
      edges {
        node {
          strapiId
          name
          description
        }
      }
    }
  }
`;

const IndexPage = () => (
  <StaticQuery
    query={query}
    render={data => (
      <ul>
        {data.allStrapiRestaurant.edges.map(restaurant => (
          <li key={restaurant.node.strapiId}>{restaurant.node.name}</li>
        ))}
      </ul>
    )}
  />
);

export default IndexPage;

شما می توانید از پلاگین Gatsby Source Strapi برای کشیدن اسناد به Gatsby از Strapi API استفاده کنید.