GatsbyJS

CRA, NextJS, Gatsby - różnice

"React vs. Next vs. Gatsby – czym się różnią? ⌨️ hello roman #84" [YT 18:19] - O związkach pomiędzy CRA, NextJS i Gatsbym, a przede wszystkim o różnicach pomiędzy nimi. Z grubsza rzecz biorąc:

  • CRA: aplikacja wrzucana na serwer w formie plików statycznych i pobierana z serwera; pobrana działa po stronie klienta. Strona to pusty HTML, wszystko jest w app (<div id="app"></div>), React wstrzykuje tam DOM i wszystkie funkcje. W procesie renderowania aplikacji pobierane są dane z jakiegoś API (może być CMS). Słabe SEO. Natychmiastowe przetwarzanie danych.
  • Next.js: Server Side Rendering, aplikacja Node.js działająca na serwerze, która renderuje zapytanie klienta i wysyła gotową stronę. Duże wymagania wobec dewelopera i serwera (nie wszędzie jest usługa Noe.js). Dobre SEO. Do elemetów strony można dodać w plikach JS reaktywność: walidacja formularza, ankieta. Tzw rehydration czyli wstrzyknięcie Reacta do HTML. Wydajność i łatwość indeksowania, ranking. Dane pobierane są na serwerze w czasie renderowania. Next renderuje zmiany z API natychmiast na serwerze.
  • Gatsby: Build time server rendering. Podczas builda wszystkie pliki są przygotowane do wysłania na serwer, wszystkie routy wyrenderowane, wtedy też pobierane są dane przez graphQL z API. Po wysłaniu na serwer dostęp do danych normalnie nie jest możliwy. Klient dostaje wyrenderowana strone statyczną z serwera oraz JS, który zapewnia mu reaktywność reactową, tak samo rehydration. To React z dodatkami, generator PWA. Dane moga byc pobierane w momencie wykonywania pliku JS axios w komponencie do API. Wszystko co jest mozliwe w Reaccie jest możliwe w Gatsbym. Gatsby circleCI buduje na nowo za każdą zmiana w API, trzeba chwilkę poczekać.

Porównanie SSR i stron statycznych: Next.js: Server-side Rendering vs. Static Generation

Na moim blogu jest seria wpisów, które gruntownie omawiają Gatsby'ego od instalacji przez budowę strony, CSS, pluginy po deploy i blog MDX - Hello, Gatsby!. Powtarzające się treści zostały lub wkrótce zostaną usunięte z niniejszego artykułu.

Integracja z NetlifyCMS

Netlify: "A Step-by-Step Guide: Gatsby on Netlify"

Headless Drupal

Instalacja Drupala z bazą danych.

Włączenie wszystkich Usług Web

HAL
 Serializacja encji przy użyciu formatu Hypertext Application Language.
 
 HTTP Basic Authentication
 Dostarcza uwierzytelnienie w trybie HTTP Basic authentication
 
 JSON:API
 Exposes entities as a JSON:API-specification-compliant web API.
 
 RESTful Web Services
 Udostępnia encje i inne zasoby w postaci RESTful web API
 
 Serialization
 Provides a service for (de)serializing data to/from formats such as JSON and XML.

Utworzenie nwego rodzaju zawartości, np. Blog.

Utworzenie nwego widoku np. "Blog API"

 Ścieżka: /api/blog
 Uwierzytelnianie: Bez autoryzacji
 Dostęp: Rola | Użytkownik anonimowy

Sprawdzic w trybie anonimowym czy jest dostepny pod adresem /jsonapi

Trzeba opublikować przynajmniej jeden wpis.

Instalacja pluginu gatsby-source-drupal

 {
  resolve: `gatsby-source-drupal`,
  options: {
  baseUrl: `http://api.domena/`,
  apiBase: `jsonapi`, // optional, defaults to `jsonapi` ; old 'api' - z każdą zmianą trzeba restartować Gatsby'ego
  },

I dopiero teraz można znowu uruchomić Gatsbiego, tak żeby pociągnął dane z Drupala.

graphQL

 query MyQuery {
  allNodeBlog {
  nodes {
  id
  title
  body {
  value
  }
  }
  }
  }

Brian Perry "Understanding the Limitations of Gatsby-Source Drupal", Andrew Larcombe "Gatsby, Drupal, inline images and friends"

Contenta CMS an API-First Drupal distribution

Headless Wordpress

Pluginy

  • Headless Mode (jedno rozszerzenie działające w prosty sposób, które załatwia większość spraw)
  • WP Editor.md (albo klasyczny edytor)

API

 adres/wp-json/

login: domena/wp-login.php

Strapi

Cyril Lopez "How to change the WYSIWYG in Strapi" - Image upload on custom CKEditor #4369

gatsby-source-strapi

GraphGL i query i import. Potem {data} w propsie i mapowanie po wynikach zapytania. W gatsby-config podać typy importowanych danych.

Netlify CI

Drupal: Build Hooks - Drupal 9 compatibility (ta łata niestety stawia nadzwyczajne opory, więc trzeba pójść za radą Hunk #1 FAILED at 1. What's that mean? i (zakładając, że jesteśmy w rozpakowanym /build_hooks a łata jest w tym samym katalogu co katalog modułu) zadać jej:

 patch --ignore-whitespace --fuzz 3 -p1 < ../3153199-5.patch

Potem zzipowanie i instalacja z pliku.

"Deploy content changes for your Gatsby Drupal site on Netlify - Daily Dose of Gatsby Episode 9" [YT 12:45]

PrismJS

 npm install --save gatsby-transformer-remark gatsby-remark-prismjs prismjs

Odnośniki

Strony

Kursy, tutoriale

Artykuły

YT

Narzędzia

GraphQL

GraphQL - YT

GraphQL - API

Headless CMS

Strapi

Strapi YT

ContentfulCMS

Drupal

WordPress

CI/CD

AWS

Contact Form

Axios

Storybook

Gatsby 4

Inne

Dark mode

Inne