Bra att tänka på

Data

När vi jobbar med Javascript kod som server renderas. Så kommer samma data som används på serversidan att även användas i klienten (webbläsaren) när Javascript ramverket sedan försöker hydrera (initiera/rendrera om med Javascript) appen. Det är därför viktigt att se till att man bara skickar med den data man verkligen behöver till sina "sid komponenter".

Tvätta data

Se till att den datan som finns i de objekt vi hämtar från API/CMS endast innehåller den datan vi faktiskt behöver för presentation och logik. All annan data bör filtreras bort.

Exempelvis, ett objekt från ett CMS ser ut så här:

{
   "id": 161123232,
   "uuid": "2ab4e661-cdda-4b02-8791-66a2cc476dd0",
   "name": "Page name",
   "created_at": "2022-07-08T13:57:12.238Z",
   "published_at": "2023-03-06T08:34:37.639Z",
   "content": {
      "_uid": "8f621de1-0f85-4de6-abbe-525d8ecf09fa",
      "hero": [
         {
            "_uid": "b8e5208f-d22b-4785-a5ef-8a9c1e37a14e",
            "label": "",
            "title": "A hero title",
            "video": {
               "id": 5826934,
               "alt": null,
               "name": "",
               "focus": null,
               "title": null,
               "filename": "/paht/to/filename",
               "copyright": null,
               "fieldtype": "asset"
            }
         },
      ]
   }
}

Nu kan det vara värt att bara plocka ut den datan som är viktig för oss i frontend för att kunna presentera det här korrekt. Då kan vi tvätta bort all onödig information så att det kanske ser ut så här:

{
   "uuid": "2ab4e661-cdda-4b02-8791-66a2cc476dd0",
   "name": "Page name",
   "published_at": "2023-03-06T08:34:37.639Z",
   "content": {
      "hero": [
         {
            "title": "A hero title",
            "video": {
               "filename": "/paht/to/filename",
               "fieldtype": "asset"
            }
         },
      ]
   }
}

Vi tar bort alla tomma fält, t.ex. null-värden, tomma strängar samt data som vi aldrig kommer vara intresserade av i frontenden. Detta gör att vi kan hantera alla icke existerande värden i frontend endast som undefined istället vilket leder till renare typer.