Gatsby 4: SSR és DSG használata
A Gatsby 4 bétaverziója a közelmúltban két új fejlett megjelenítési módszert vezetett be: a szerveroldali renderelést (SSR) és a halasztott statikus generálást (DSG). Bemutatom ezeket az új renderelési módszereket, elmagyarázom, hogyan lehetnek hasznosak az Ön számára, és bemutatom, hogyan használhatja őket.
Megjegyzés: A cikk írásakor a Gatsby 4 még mindig béta állapotban van, így a funkciók változhatnak.
Renderelési módszerek
Egyoldalas alkalmazások (SPA)
Minden webhely rendelkezik egy HTML-fájllal, amely a webhely belépési pontjaként működik, vagyis betölti a webhely összes többi erőforrását és tartalmát. A hagyományos egyoldalas alkalmazásokban azonban a index.html fájl nem tartalmazza a webhely teljes HTML-kódját. Ehelyett script címkéket tartalmaz, amelyek további JavaScript-fájlokat töltenek be. Ezután a JavaScript-kód lefut, és valójában megjeleníti az alkalmazás tartalmát. Ezért a webhely nem jeleníthet meg tartalmat mindaddig, amíg be nem fejezi a JavaScript-kód teljes lekérését.
A „Demók” részben megtudhatja, hogyan töltenek be tartalmat az egyoldalas alkalmazások
Sajnos ez a megjelenítési módszer rosszabb a keresőoptimalizálás (SEO) és a teljesítmény szempontjából. Mivel a index.html fájl nem tartalmazza a webhely tartalmát, a keresőmotorok nem tudják feltérképezni, hogy megtudják, miről szól a webhely, ami rosszabb a keresőoptimalizálás szempontjából. Ezenkívül a hagyományos egyoldalas alkalmazások rosszabb teljesítményt nyújtanak. Mivel a HTML-fájlnak be kell töltenie a JavaScriptet, mielőtt bármit is megjelenítene az oldalon, a felhasználók üres tartalom felvillanását látják, amikor először látogatják meg az oldalt. Szerencsére van jobb megoldás is.
Statikus renderelés
A Gatsby egy statikus webhelygenerátor, ami azt jelenti, hogy a webhely tartalmát HTML-ben tartalmazza. Mivel a HTML-fájl tartalmazza a webhely tartalmát és szövegét, a keresőmotorok feltérképezhetik a webhelyet. A hagyományos egyoldalas alkalmazásokkal ellentétben a webhelynek nem kell JavaScriptet letöltenie az oldal kezdeti tartalmának betöltéséhez. Ezért a webhely gyorsabban töltődik be. Mivel a statikus generálás minden oldal teljes HTML-kódját generálja, a statikus generálás jobb a teljesítmény és a SEO szempontjából.
Tekintse meg a „Demók” részt, hogy megtudja, hogyan hoz létre a Gatsby webhelyfájlokat.
Halasztott statikus generálás (DSG)
Ezután bemutatom a Gatsby két új renderelési módszerének egyikét: a késleltetett statikus generálást. Ha több tucat vagy több száz oldal van a webhelyén, akkor a webhely felépítése sok időt vehet igénybe. Például lehet, hogy van egy blogja több ezer blogbejegyzéssel. Mivel előfordulhat, hogy a Gatsbynek le kell töltenie a tartalmat minden egyes bejegyzés oldalához, a webhely felépítése hosszú ideig tarthat. Nem minden oldal egyformán fontos, szóval mi lenne, ha csak azokat az oldalakat tudnád összeállítani, amelyekre szükséged van?
A késleltetett statikus generálás egy új megjelenítési mód a Gatsby 4-ben. A statikus generáláshoz hasonlóan a webhely tartalmát is tartalmazó HTML-kódot állít elő. A DSG azonban megadja az ellenőrzést, hogy mikor hozza létre az egyes oldalak HTML-kódját. Ahelyett, hogy az összes oldalt az összeállításkor generálja, dönthet úgy, hogy csak néhány fontos oldalt hoz létre, és halasztja a többi létrehozását, amíg valaki meg nem látogatja.
Visszatérve a blogpéldára, dönthet úgy, hogy csak a legfrissebb blogbejegyzések oldalait állítja össze, a többinél pedig késleltetett statikus generálást használ. Ha valaki meglátogat egy blogbejegyzést, amelyet a Gatsby még nem hozott létre, az azonnal generálja a blogbejegyzést. Ezután az alkalmazás elmenti a blogbejegyzés HTML-fájlját, hogy ne kelljen újra generálnia. A DSG használatával javíthatja a felépítési időt, ha csak a szükséges oldalakat állítja elő.
Szerveroldali renderelés (SSR)
Statikus generálással vagy késleltetett statikus generálással a Gatsby csak egyszer építi fel a webhely fájljait. Szerveroldali megjelenítés esetén azonban a szerver minden oldalt minden alkalommal, amikor a felhasználó meglátogatja elkészíti.
A szerveroldali megjelenítés akkor hasznos, ha az oldalak gyakran frissülnek. Például létrehozhat egy e-kereskedelmi alkalmazást, ahol a termékek árai és leírásai gyakran frissülnek. A Gatsby 3-ban minden alkalommal újra kell építenie az alkalmazást, amikor frissíteni szeretné a termékadatokat. Ezzel szemben a szerveroldali megjelenítés újra tudja építeni a termékoldalt minden alkalommal, amikor egy felhasználó felkeresi, így az oldal mindig a legfrissebb termékinformációkat jeleníti meg. A szerveroldali megjelenítés használatával automatikusan frissítheti az oldalakat anélkül, hogy újra kellene építenie a teljes webhelyet.
Próbáljuk ki a különböző megjelenítési módszereket
Létrehoztam egy nagyon egyszerű Gatsby alkalmazást az új renderelési módszerek bemutatására. Az alkalmazás betölti a termékek listáját, és mindegyikhez létrehoz egy oldalt. Minden oldal további információkat tartalmaz a termékről, például a termék címét és képeit. A termékek a Strapiból, egy tartalomkezelő rendszerből (CMS) töltődnek be. Nézzük meg, hogyan hozhatjuk létre a termékoldalakat a Gatsbyben statikus generálással, késleltetett statikus generálással és szerveroldali rendereléssel.
Az alkalmazás forráskódját a „https://github.com/eduardo-valencia/gatsby-4-test” címen tekintheti meg. Néhány kódom TypeScriptet használ, de akkor is követnie kell a követést, ha még nem tanulta meg.
Statikus generáció
Feltételezem, hogy már ismeri az oldalak létrehozását a Gatsbyben. Íme az oldal forráskódja:
// src/pages/static-products/{StrapiProducts.slug}.tsx
import { graphql } from 'gatsby'
export { default } from '../../components/ProductPage'
export const query = graphql`
query StaticProductQuery($id: String!) {
strapiProducts(id: { eq: $id }) {
...Product
}
}
`
Ez az oldal nem sokban különbözik az átlagos Gatsby-oldalától. Tartalmaz egy egyszerű GraphQL-lekérdezést az oldal információinak betöltéséhez. Az alkalmazás rendszerezése érdekében exportáltam egy összetevőt a ../../components/ProductPage fájlból, ahelyett, hogy ebbe a fájlba vettem volna.
Így néz ki az oldal, amikor meglátogatom a böngészőmben:
Halasztott statikus generálás (DSG)
Ezután ezt az oldalt késleltetett statikus generálásra konvertálom. A Gatsbyben kétféleképpen hozhat létre oldalakat: a fájlrendszer API-val (fájl hozzáadása az oldalak könyvtárába) és az createPages API-val (oldal létrehozása a gatsby-node.js fájlból). A Gatsby 4 csak a createPages API-hoz támogatja a DSG-t, ezért a termékoldalt a gatsby-node.js fájlban fogom létrehozni. Itt van az általam használt kód:
const createPages = async ({ graphql, actions: { createPage }, reporter }) => {
const productTemplate = require.resolve('./src/templates/product.tsx')
const createProductPage = ({ slug }) => {
createPage({
path: `/dsg/${slug}`,
component: productTemplate,
defer: true,
context: {
slug,
},
})
}
const createProductPages = ({
data: {
allStrapiProducts: { nodes: products },
},
}) => {
products.forEach(createProductPage)
}
const queryProducts = () =>
graphql(`
{
allStrapiProducts {
nodes {
slug
}
}
}
`)
const queryAndCreateProducts = async () => {
const result = await queryProducts()
if (result.errors) {
reporter.panicOnBuild('Query error', result.errors)
} else {
createProductPages(result)
}
}
await queryAndCreateProducts()
}
exports.createPages = createPages
Röviden elmagyarázom, hogyan működik, így nem kell túl sokat aggódnia a részletek miatt. Először lekérdezi a termékinformációkat. Ezután a createProductPage függvény létrehozza az egyes oldalakat a Gatsby createPage függvényének néhány opcióval történő meghívásával.
const createProductPage = ({ slug }) => {
createPage({
path: `/dsg/${slug}`,
component: productTemplate,
defer: true,
context: {
slug,
},
})
}
A DSG engedélyezéséhez a defer beállítást true értékre állítottam. Csak ennyit kell tennie a DSG engedélyezéséhez! Most a Gatsby elhalasztja az oldal létrehozását, amíg valaki meg nem látogatja.
Szerveroldali renderelés (SSR)
A szerveroldali renderelés könnyen beállítható a Gatsbyben. Az SSR engedélyezéséhez egy oldalon egyszerűen exportáljon egy getServerData nevű függvényt az oldal fájljából. Ahogy a függvény neve is sugallja, a getServerData-nek vissza kell adnia a szerveradatokat, amelyekre a szervernek szüksége van az oldal megjelenítéséhez. A getServerData-nek a következő formátumban kell visszaadnia az adatokat:
{
props: {
// the page's props go here
}
}
Az SSR beállításához létrehoztam egy új oldalt, és hozzáadtam a getServerData függvényt a termék információinak lekéréséhez. Lássuk a kódot:
export const getServerData = async (context: Context) => {
try {
return getProductsAndGetServerData(context)
} catch (error) {
console.error(error)
return getErrorServerData()
}
}
A getServerData felhívja a getProductsAndGetServerData számot, hogy megpróbálja lekérni a termékinformációkat. Ha a hálózati kérés sikeres, akkor a következő formátumban adja vissza a szerveradatokat:
props: {
product
}
A product tulajdon visszaküldésével a Gatsby átadhatja a termékinformációkat az oldalamnak. Ha a kérés sikertelen, akkor a getErrorServerData 500 állapotot ad vissza, és üres kellékeket ad vissza.
Teljes forráskód:
src/pages/ssr/{StrapiProducts.slug}.tsx
import React from 'react'
import axios from 'axios'
import ProductType, { StrapiProduct } from '../../types/Product'
import Product from '../../components/Product'
const getProductData = async (
slug: ProductType['slug']
): Promise<StrapiProduct> => {
const { data: products } = await axios.get(
`${process.env.GATSBY_STRAPI_URL}/products?slug=${slug}`
)
return products[0]
}
interface ServerDataProps {
product: StrapiProduct
}
interface ServerData {
props: ServerDataProps
}
interface Params {
slug: string
}
interface Context {
params: Params
}
// I added a default slug because there is a bug where the params do not get passed
const getProductsAndGetServerData = async ({
params: { slug = 'product-1' },
}: Context): Promise<ServerData> => {
const product: StrapiProduct = await getProductData(slug)
return {
props: {
product,
},
}
}
const getErrorServerData = () => {
return {
headers: {
status: 500,
},
props: {},
}
}
export const getServerData = async (context: Context) => {
try {
return getProductsAndGetServerData(context)
} catch (error) {
console.error(error)
return getErrorServerData()
}
}
interface Props {
serverData: ServerDataProps
}
const ServerSideRenderedPage = ({ serverData: { product } }: Props) => {
return (
<div>
<h1>SSR</h1>
{product && <Product product={product} />}
</div>
)
}
export default ServerSideRenderedPage
Minden alkalommal, amikor egy felhasználó meglátogatja az oldalt, a Gatsby felhívja a getServerData számot, hogy lekérje az oldal információit, és egy serverData nevű tulajdonságot továbbít az oldalam összetevőjének, amely alább látható.
const ServerSideRenderedPage = ({ serverData: { product } }: Props) => {
return (
<div>
<h1>SSR</h1>
{product && <Product product={product} />}
</div>
)
}
Figyelje meg, hogyan szerkesztettem meg a serverData tulajdonságot, hogy megkapjam a product-et. Ezután átadtam a Product komponensnek az oldal megjelenítéséhez.
Ez az! Ha a böngészőben az oldalra lépünk, láthatjuk, hogy az eredmény ugyanaz.
Mostantól a Gatsby minden alkalommal megjeleníti az oldalt a szerveren, amikor egy felhasználó felkeresi az oldalt.
Demos
Röviden elmagyarázom a különbségeket aközött, hogy a hagyományos egyoldalas alkalmazások és a statikus alkalmazások hogyan generálják az alkalmazás fájljait az összeállítás során.
Egyoldalas alkalmazás (SPA) létrehozása
Először is hozzunk létre egy SPA-t a Create React App segítségével, hogy megtudjuk, hogyan generálnak webhelyfájlokat az egyoldalas alkalmazások.
Nyissa meg a terminált. Ezután futtassa a következő parancsot egy új alkalmazás létrehozásához.
npx create-react-app gatsby-4-test-spa
A parancs futtatása után a Create React Appnek létre kell hoznia egy alapvető alkalmazást a gatsby-4-test-spa mappában. Nyissa meg a mappát, és készítse el az alkalmazást:
cd gatsby-4-test-spa npm run build
A build parancs létrehozza a webhely fájljait a build mappában. Nézzük meg, milyen fájlokat hozott létre az alkalmazás:
ls build --recursive
Figyelje meg, hogy a build mappában van egy index.html fájl és egy static/js mappa.
Ha megnyitja a index.html fájlt egy kódszerkesztőben, valami ilyesmit fog látni:
Figyelje meg, hogy maga a index.html fájl nem tartalmazza a webhely teljes HTML-kódját. Ehelyett a HTML script címkéket tartalmaz, amelyek további JavaScript fájlokat töltenek be, amelyek ténylegesen megjelenítik az alkalmazás tartalmát. Ezért a hagyományos egyoldalas alkalmazások JavaScript-től függenek a tartalom megjelenítéséhez.
Statikus webhely készítése a Gatsby segítségével
Ezután nézzük meg, hogy a Gatsby, egy statikus webhelygenerátor hogyan hozza létre a index.html fájlt. Futtassa a következő parancsot a Gatsby webhelygenerátor elindításához.
npm init gatsby
Kérni fogja a webhely nevét és a mappa helyét. Webhelyem nevét és mappáját gatsby-4-test-gatsby-ra állítottam be, de Ön kiválaszthatja a saját nevét. Ezután a generátor megkérdezi, hogy melyik CMS-t és stílusrendszert szeretné használni. Mi egyiket sem fogjuk használni, így ezekre a kérdésekre nemmel válaszolhat. Végül a generátor megkérdezi, hogy kíván-e további bővítményeket telepíteni. Nem fogunk semmilyen beépülő modult sem használni, ezért ne válasszon ki egyet sem. Végül erősítse meg a beállításokat, és várja meg a függőségek telepítését.
Miután befejezte a függőségek telepítését, navigáljon az alkalmazás mappájába, és készítse el az alkalmazást:
cd gatsby-4-test-gatsby npm run build
A felépítés befejezése után nézzük meg, milyen fájlokat generált nekünk a Gatsby. Sorolja fel a fájlokat a public könyvtárban:
ls public
Itt láthatja, hogy a Gatsby létrehozott egy index.html fájlt és néhány JavaScript fájlt. Nyissuk meg a index.html fájlt.
Itt láthatjuk, hogy a Gatsby HTML-fájlja sokkal nagyobb, mint a Create React App index.html-fájlja. Ez utóbbitól eltérően a Gatsby fájlja HTML elemeket is tartalmaz, például bekezdéseket, listákat és horgonycímkéket, ami azt jelenti, hogy az oldal teljes HTML-kódját tartalmazza. Ezért a statikus webhelygenerátorok nem függenek a JavaScripttől a webhely kezdeti tartalmának betöltéséhez.
Következtetés
Ebben a cikkben bemutattuk a Gatsby különböző megjelenítési módjait: statikus webhelygenerálás, szerveroldali megjelenítés és késleltetett statikus generálás. A statikus webhelygenerálás az egyes oldalak teljes HTML-kódját hozza létre az összeállítás során. Ha elhalasztott statikus generálást használ, a Gatsby megvárja, amíg valaki felkeresi az oldalt, mielőtt létrehozná a HTML-kódját, ami megnöveli a több tucat vagy több száz oldalt tartalmazó webhelyek felépítési idejét. Végül a szerveroldali megjelenítés egy szervert használ az oldaladatok lekérésére és az oldal megjelenítésére. Az SSR hasznos lehet, ha egy oldal gyakran frissül, és ha nem akarja újraépíteni az alkalmazást csak az oldal frissítése érdekében.
Remélem ezt hasznosnak találtad! Nyugodtan kérdezzen.
