Kodėl DatoCMS išsiskiria iš kitų headless CMS
Kai prieš keletą metų pirmą kartą išbandžiau DatoCMS, buvau skeptiškas. Dar vienas headless CMS? Tikrai? Tačiau po kelių projektų supratau, kad čia ne tik dar vienas įrankis – tai gerai apgalvota platforma, kuri iš tikrųjų supranta, ko reikia šiuolaikiniams projektams.
DatoCMS iš esmės yra headless content management sistema, kuri leidžia valdyti turinį per patogią administravimo sąsają, o jį pasiekti galima per API. Skirtingai nei tradicinės CMS kaip WordPress, čia nėra jokio primetamo frontend’o – jūs gaunate grynai duomenis ir galite juos naudoti bet kur: svetainėje, mobilioje aplikacijoje, IoT įrenginiuose ar net skaitmeniniuose ekranuose.
Bet kas daro DatoCMS ypatingą? Pirma, jie nuo pat pradžių pastatė viską ant GraphQL. Ne kaip papildomą funkciją, o kaip pagrindinį būdą bendrauti su sistema. Antra, jų redaktoriaus patirtis yra tikrai gera – ne tokia sudėtinga kaip Contentful, bet kur kas lankstesnė nei Sanity. Trečia, jie turi realtime updates per GraphQL subscriptions, kas reiškia, kad jūsų turinys gali atsinaujinti puslapyje be jokio perkrovimo.
GraphQL API pagrindai DatoCMS kontekste
Jei dar nesate dirbę su GraphQL, DatoCMS gali būti puiki vieta pradėti. Jų implementacija yra intuityvi ir gerai dokumentuota. Pagrindinis skirtumas nuo REST API – jūs tiksliai nurodote, kokių duomenų jums reikia, ir gaunate būtent tai. Jokių perteklinių duomenų, jokių kelių užklausų tam pačiam rezultatui gauti.
Štai paprastas pavyzdys. Tarkime, turite blog’ą ir norite gauti straipsnių sąrašą su autorių informacija. Su REST API dažnai gautumėte arba per daug duomenų, arba turėtumėte daryti kelias užklausas. Su DatoCMS GraphQL:
query {
allArticles {
id
title
slug
publishedAt
author {
name
avatar {
url
}
}
}
}
Ir gausite tiksliai tai, ko prašėte. Nieko daugiau, nieko mažiau. DatoCMS automatiškai sugeneruoja visą GraphQL schemą pagal jūsų sukurtus modelius. Sukūrėte naują content type? Jis iškart atsiranda API su visais reikiamais query ir mutation laukais.
Vienas dalykas, kurį tikrai vertinu – jų GraphQL explorer. Tai ne tik playground užklausoms testuoti, bet ir pilnavertis dokumentacijos įrankis. Matote visus galimus laukus, tipus, ryšius tarp modelių. Galite eksperimentuoti realiu laiku ir iškart matyti rezultatus.
Modelių kūrimas ir ryšių valdymas
DatoCMS modelių sistema yra gana lanksti, bet reikia suprasti keletą niuansų. Pirmiausia, jūs kuriate „models” (turinių tipus), o tada „records” (konkrečius turinių įrašus). Modeliai gali turėti įvairių laukų tipų: tekstą, skaičius, datas, nuorodas į kitus įrašus, media failus ir t.t.
Kai kuriu projektui e-commerce katalogą, susidūriau su įdomia situacija. Turėjau produktus, kategorijas ir gamintoją. Norėjau, kad produktas galėtų būti keliose kategorijose, bet turėtų tik vieną gamintoją. DatoCMS leidžia nustatyti „single link” ir „multiple links” ryšius, kas puikiai išsprendė šią problemą.
type Product {
id: ItemId
title: String
price: FloatType
manufacturer: Manufacturer
categories: [Category]
images: [FileField]
}
Kas įdomu – galite kontroliuoti, kaip šie ryšiai veikia abiem kryptimis. Pavyzdžiui, jei ištrinate kategoriją, galite nustatyti, kad produktai tiesiog netektų šios kategorijos, o ne būtų ištrinami kartu. Arba atvirkščiai – jei ištrinate gamintoją, visi jo produktai taip pat išnyksta. Tai vadinasi „inverse relationships” ir labai praverčia sudėtingesnėse struktūrose.
Dar vienas patarimas – naudokite „modular content” laukus, kai reikia lankstumo. Tai leidžia redaktoriams kurti turinį iš įvairių blokų (tekstas, vaizdas, video, citata ir pan.), o jūs GraphQL užklausoje galite naudoti fragmentus kiekvienam bloko tipui:
fragment TextBlock on TextRecord {
__typename
text
}
fragment ImageBlock on ImageRecord {
__typename
image {
url
alt
}
}
Vaizdų optimizavimas ir transformacijos
Čia DatoCMS tikrai šviečia. Jų vaizdų apdorojimo sistema yra viena geriausių, kokias esu matęs. Viskas vyksta per GraphQL API, ir galimybės yra tikrai plačios.
Pirmiausia, DatoCMS automatiškai optimizuoja visus įkeltus vaizdus. Bet tikroji magija prasideda, kai pradedate naudoti transformacijas tiesiog GraphQL užklausoje. Norite responsive vaizdų su skirtingomis rezoliucijomis? Nėra problemos:
query {
article {
coverImage {
responsiveImage(imgixParams: {
fit: crop,
w: 800,
h: 600,
auto: format
}) {
srcSet
webpSrcSet
sizes
src
width
height
alt
title
}
}
}
}
Parametras `auto: format` automatiškai pasirenka geriausią formatą (WebP šiuolaikiniems naršyklėms, JPEG seniems). DatoCMS naudoja Imgix po gaubtu, tai reiškia, kad turite prieigą prie daugybės transformacijų: crop, resize, blur, sharpen, watermark ir t.t.
Vienas projektas, kurį dariau, turėjo galerijas su šimtais vaizdų. Pradžioje tiesiog naudojau originalius failus ir puslapis kraudavosi amžinai. Perjungus į DatoCMS responsive images su lazy loading, puslapio įkėlimo laikas sumažėjo nuo ~8 sekundžių iki ~1.5 sekundės. Tai ne tik techninis pagerinimas – tai realus UX skirtumas.
Dar vienas cool dalykas – focal point. Galite nustatyti, kuri vaizdo dalis yra svarbiausia, ir DatoCMS užtikrins, kad ji būtų matoma net kai vaizdas apkarpomas skirtingiems formatams. Tai ypač naudinga su portretinėmis nuotraukomis ar produktų foto.
Realtime updates su GraphQL subscriptions
Tai funkcija, kurią ne visi naudoja, bet kai reikia – ji neįkainojama. DatoCMS palaiko GraphQL subscriptions, kas leidžia jūsų aplikacijai gauti realtime atnaujinimus, kai turinys pasikeičia.
Įsivaizduokite, kad kuriate live event’o puslapį arba dashboard’ą, kur turinys turi atsinaujinti nedelsiant. Su tradiciniais metodais turėtumėte daryti polling (kas kelias sekundes tikrinti, ar yra naujienų). Su subscriptions, serveris pats praneša, kai kas nors pasikeičia.
Implementacija nėra sudėtinga, bet reikia šiek tiek setup’o. Pirmiausia, jums reikia WebSocket connection:
import { createClient } from 'graphql-ws';
const client = createClient({
url: 'wss://graphql-listen.datocms.com/graphql',
connectionParams: {
authorization: 'Bearer YOUR_API_TOKEN',
},
});
Tada galite subscribe’intis į pakeitimus:
subscription {
article(filter: {id: {eq: "123"}}) {
title
content
updatedAt
}
}
Naudojau tai projektui, kur klientas norėjo matyti preview savo turinį realiu laiku, kol redaktorius jį keitė. Veikė puikiai – redaktorius rašo, o klientas kitame ekrane mato pokyčius iškart. Jokio refresh, jokio delay.
Tačiau būkite atsargūs su subscriptions production aplinkoje. Jos naudoja WebSocket connections, kurios gali būti resource-intensive. Jei turite daug vartotojų, gali tekti pagalvoti apie caching sluoksnį arba rate limiting.
Daugiakalbystė ir lokalizacija
Jei jūsų projektas turi būti keliomis kalbomis, DatoCMS turi įtaisytą lokalizacijos sistemą. Ir ji veikia tikrai gerai su GraphQL.
Pirmiausia, nustatote, kokias kalbas palaikote (Settings → Locales). Tada kiekviename modelio lauke galite pasirinkti, ar jis bus lokalizuojamas. Pavyzdžiui, produkto pavadinimas ir aprašymas gali būti skirtingi kiekvienai kalbai, bet SKU kodas ar kaina – universalūs.
GraphQL užklausoje galite nurodyti, kokios kalbos turinį norite:
query {
allArticles(locale: lt) {
title
content
}
}
Arba gauti visas kalbas vienu metu:
query {
allArticles {
_allTitleLocales {
locale
value
}
_allContentLocales {
locale
value
}
}
}
Vienas niuansas, kurį sužinojau sunkiu būdu – fallback kalbos. Jei turinys nėra išverstas į konkrečią kalbą, DatoCMS gali automatiškai grąžinti default kalbos versiją. Bet tai reikia nustatyti per API parametrus:
query {
allArticles(locale: lt, fallbackLocales: [en]) {
title
}
}
Taip jei lietuviško vertimo nėra, gausite anglišką. Labai patogu development metu, kai ne visas turinys dar išverstas.
Performance optimizavimas ir caching strategijos
GraphQL API yra galingas, bet su didele galia ateina ir atsakomybė. Jei neoptimizuosite užklausų, galite susidurti su performance problemomis.
Pirmasis dalykas – būkite selektyvūs su laukais. Neprašykite visko, jei jums reikia tik kelių dalykų. Pavyzdžiui, jei rodote straipsnių sąrašą, jums tikriausiai nereikia viso content lauko:
// Blogai
query {
allArticles {
id
title
slug
content // Gali būti labai didelis
author {
name
bio
avatar {
url
}
}
}
}
// Gerai
query {
allArticles {
id
title
slug
excerpt // Trumpas aprašymas
author {
name
}
}
}
Antra – naudokite pagination. DatoCMS palaiko kelis pagination metodus: offset-based ir cursor-based. Cursor-based yra efektyvesnis dideliems duomenų kiekiams:
query {
allArticles(first: 10, after: "cursor_value") {
id
title
}
}
Trečia – caching. DatoCMS grąžina HTTP cache headers, kuriuos galite naudoti su CDN ar savo caching layer. Jei naudojate Next.js, galite kombinuoti su ISR (Incremental Static Regeneration):
export async function getStaticProps() {
const data = await fetchFromDatoCMS();
return {
props: { data },
revalidate: 60 // Revalidate kas minutę
};
}
Dar vienas patarimas – naudokite DatoCMS webhooks, kad invalidintumėte cache tik kai turinys tikrai pasikeičia. Taip išvengsite nereikalingo revalidation ir sutaupysite API requests.
Viename projekte turėjome problemą – per daug nested relationships. Užklausa atrodė taip:
query {
article {
author {
articles {
author {
articles {
// ir t.t.
}
}
}
}
}
}
Tai vadinasi N+1 problema ir gali labai sulėtinti atsakymus. Sprendimas – apribokite nesting depth ir naudokite separate queries, kai reikia gilesnių duomenų.
Kai viskas sudėliojama į vietą
Po kelių metų darbo su DatoCMS galiu pasakyti, kad tai viena patikimiausių headless CMS platformų rinkoje. GraphQL API nėra tik marketing’as – tai tikrai gerai įgyvendinta sistema, kuri daro darbą efektyvesnį ir malonesnį.
Ar tai tobula? Ne. Kaina gali būti aukšta didesnėms komandoms (nors jie turi nemokamą tier’ą mažesniems projektams). Kai kurios advanced funkcijos reikalauja šiek tiek mokymosi kreivės. Ir kartais dokumentacija galėtų būti išsamesnė specifinėms use cases.
Bet bendrai, jei kuriate šiuolaikinę aplikaciją ir jums reikia content management, DatoCMS su GraphQL API yra tikrai vertas dėmesio. Ypač jei jau dirbate su React, Next.js, Gatsby ar panašiomis technologijomis – integracija yra sklandžia.
Mano patarimas pradedantiesiems: pradėkite nuo paprasto projekto. Sukurkite keletą modelių, pažaiskite su GraphQL explorer, išbandykite vaizdų transformacijas. DatoCMS turi nemokamą planą su visomis pagrindinėmis funkcijomis, tai galite viską išbandyti be jokių įsipareigojimų.
O tiems, kurie jau naudoja kitas headless CMS – pabandykite DatoCMS bent vienam projektui. Gali būti, kad, kaip ir man, jis taps jūsų go-to sprendimu daugeliui projektų. GraphQL API lankstumas, puiki vaizdų sistema, realtime updates – visa tai kartu sudaro tikrai stiprų paketą.
