Records
Itereert over de records van een datatype en rendert per record je eigen markup.
Het hart van datagedreven pagina's: loop over records van een datatype met een render-functie en bepaal zelf de opmaak.
Toepassingen per site-type
Een webshop gebruikt Records voor het productoverzicht: elk product komt uit een datatype 'product' en de render-functie bepaalt hoe een productkaart eruitziet, met afbeelding, prijs en een knop. Een portfolio-site bouwt hiermee het projectenoverzicht op, waarbij elk project zijn eigen kaart krijgt op basis van dezelfde opmaak. Bij een zakelijke dienstverlener draait bijvoorbeeld het teamoverzicht of de klantenreferenties op dit block: voeg een nieuw teamlid toe aan het datatype en die verschijnt automatisch op de pagina.
Een veelgemaakte fout is de render-functie te complex maken met veel geneste logica: houd de opmaak per record simpel en verplaats herbruikbare onderdelen naar een eigen component. Een tweede valkuil is Records gebruiken zonder limit op een datatype dat op termijn groot wordt, zoals een kennisbank of productcatalogus — zonder limiet en Pagination laadt de pagina na verloop van tijd steeds meer records tegelijk, wat de laadtijd merkbaar vertraagt.
Dit block is de basis onder vrijwel elk overzicht en combineert met bijna alle andere blocks binnen de render-functie: een ImageGallery per record, een Icon bij een kenmerk, of een CTA onderaan elke kaart. Voor een los detailrecord op basis van de URL gebruik je in plaats daarvan een dynamische pagina die één record ophaalt.
Voor performance geldt: hoe meer velden en geneste blocks je per record rendert, hoe zwaarder de pagina wordt bij een grote lijst. Toon in een overzicht alleen de velden die de bezoeker nodig heeft om door te klikken — de rest hoort op de detailpagina.
Gebruik dit block voor elke pagina die gegevens uit een datatype toont: een teamoverzicht, een productcatalogus of, zoals op deze site, de kennisbank met alle blocks. Voeg je een nieuw record toe, dan verschijnt het automatisch op de pagina — zonder dat je de markup opnieuw hoeft te schrijven.
Combineer dit block met Pagination om lange lijsten op te delen, of met filters om bijvoorbeeld alleen uitgelichte items te tonen.
<Records type='article' limit={6}> {(a) => <Heading>{a.title}</Heading>} </Records>