{"id":51015,"date":"2023-06-01T09:52:06","date_gmt":"2023-06-01T08:52:06","guid":{"rendered":"https:\/\/kinqsta.com\/dk\/?p=51015&#038;preview=true&#038;preview_id=51015"},"modified":"2023-08-24T10:14:14","modified_gmt":"2023-08-24T09:14:14","slug":"wordpress-react","status":"publish","type":"post","link":"https:\/\/kinqsta.com\/dk\/blog\/wordpress-react\/","title":{"rendered":"S\u00e5dan opretter du et headless WordPress-site med React.js"},"content":{"rendered":"<p>WordPress er et af de <a href=\"https:\/\/kinqsta.com\/wordpress-market-share\/\">mest popul\u00e6re content management-systemer (CMS)<\/a>, som bruges af 810 millioner &#8211; det er 41% af hele internettet! Det er det oplagte valg for alle, der hurtigt vil bygge en hjemmeside, fordi det er enkelt, brugervenligt, tilbyder en bred vifte af tilpasningsmuligheder og ogs\u00e5 har et st\u00e6rkt \u00f8kosystem af plugins og andre ressourcer.<\/p>\n<p>En m\u00e5de at f\u00e5 mest muligt ud af WordPress p\u00e5 er ved at g\u00e5 headless.<\/p>\n<p>Et headless CMS, ogs\u00e5 kendt som et headless system, er en type <a href=\"https:\/\/kinqsta.com\/blog\/backend-vs-frontend\/\">backend-CMS<\/a>, der udelukkende bruges til at administrere indhold. Det hj\u00e6lper dig med at integrere indhold i ethvert system eller website ved blot at <a href=\"https:\/\/kinqsta.com\/blog\/api-endpoint\/\">kalde API&#8217;erne<\/a> i det headless CMS.<\/p>\n<p>Det betyder dog, at frontenden skal administreres separat. Det er her, et API kommer ind i billedet.<\/p>\n<p>API&#8217;er g\u00f8r det muligt for to eller flere forskellige applikationer at udveksle data. I dette tilf\u00e6lde bruges API&#8217;en til at overf\u00f8re data fra CMS&#8217;et til en frontend-hjemmeside, hvilket giver mere fleksibilitet og <a href=\"https:\/\/kinqsta.com\/blog\/wordpress-slow\/\">hurtigere ydeevne<\/a>.<\/p>\n<p>I denne artikel unders\u00f8ger vi, hvad et headless CMS er, hvorfor du m\u00e5ske gerne vil bygge et, og hvordan du s\u00e6tter et op til WordPress.<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>Hvad er headless WordPress?<\/h2>\n<p>Et headless <a href=\"https:\/\/kinqsta.com\/blog\/headless-wordpress\/\">WordPress-website<\/a> er en type site, der prim\u00e6rt <a href=\"https:\/\/kinqsta.com\/dk\/blog\/hvorfor-bruge-wordpress\/\">bruger WordPress<\/a> som CMS, eller <a href=\"https:\/\/kinqsta.com\/dk\/blog\/cms-software\/\">content management system<\/a>, og bruger andre frontend-teknologier som <a href=\"https:\/\/kinqsta.com\/blog\/vue-vs-react\/\">React eller Vue<\/a> til frontend.<\/p>\n<p><a href=\"https:\/\/kinqsta.com\/dk\/blog\/javascript-biblioteker\/\">JavaScript-biblioteker og -frameworks<\/a> bruges til at vise hjemmesidens indhold. Derfor har et headless WordPress en separat frontend og backend, og der bruges en API til kommunikation.<\/p>\n<p>I enkle vendinger betyder en headless-arkitektur, at CMS&#8217;et kun bruges til at gemme og administrere dit indhold, og at det er ligeglad med hjemmesidens frontend.<\/p>\n<p>Frontend&#8217;ens vigtigste opgave er derimod at vise indholdet, og den er til geng\u00e6ld ligeglad med, hvor indholdet er gemt eller administreret, s\u00e5 l\u00e6nge den kan n\u00e5 det.<\/p>\n<p>Et headless WordPress har bedre ydeevne, da frontend-anmodningerne h\u00e5ndteres af hurtigere teknologier <a href=\"https:\/\/kinqsta.com\/dk\/blog\/bedste-react-vejledninger\/\">som React<\/a>, og kun backend administreres af WordPress. Adskillelsen af frontend og backend g\u00f8r det muligt at skalere komponenterne uafh\u00e6ngigt af hinanden.<\/p>\n\n<h2>Fordele og ulemper ved Headless WordPress<\/h2>\n<p>Som med alle udviklingsmuligheder er der b\u00e5de fordele og ulemper ved at v\u00e6lge en headless WordPress-l\u00f8sning. Det er vigtigt at forst\u00e5 begge dele, f\u00f8r man tr\u00e6ffer en beslutning.<\/p>\n<h3>Fordele ved headless WordPress<\/h3>\n<p>Nogle af de vigtigste fordele ved en headless WordPress-implementering inkluderer f\u00f8lgende:<\/p>\n<ul>\n<li><strong>Fleksibilitet:<\/strong> Headless WordPress giver udviklere mulighed for at skabe brugerdefinerede frontend-oplevelser uden at v\u00e6re begr\u00e6nset af det traditionelle <a href=\"https:\/\/kinqsta.com\/blog\/what-is-a-wordpress-theme\/\">WordPress-tema-system<\/a>. Det betyder, at du kan skabe unikke brugergr\u00e6nseflader og oplevelser til specifikke behov.<\/li>\n<li><strong>Ydeevne:<\/strong> At adskille frontend fra backend p\u00e5 et WordPress-site kan f\u00e5 dit website til at <a href=\"https:\/\/kinqsta.com\/blog\/wordpress-slow\/\">loade hurtigere<\/a> og \u00f8ge dets performance, da serveren kun leverer data via en API i stedet for ogs\u00e5 at <a href=\"https:\/\/kinqsta.com\/blog\/what-is-html\/\">gengive HTML<\/a> for hver anmodning.<\/li>\n<li><strong>Sikkerhed:<\/strong> Ved at adskille frontend og backend kan headless WordPress give et ekstra lag af sikkerhed ved at begr\u00e6nse adgangen til den underliggende WordPress-kodebase og -database.<\/li>\n<\/ul>\n<h3>Ulemper ved headless WordPress<\/h3>\n<p>Ulemperne ved headless WordPress kan omfatte:<\/p>\n<ul>\n<li><strong>Mangel p\u00e5 temaer:<\/strong> Da headless WordPress ikke er afh\u00e6ngig af <a href=\"https:\/\/kinqsta.com\/dk\/blog\/hurtigste-wordpress-temaer\/\">forudbyggede temaer<\/a>, bliver du n\u00f8dt til at oprette dine egne tilpassede temaer. Det kan v\u00e6re tidskr\u00e6vende og kan kr\u00e6ve ekstra ressourcer.<\/li>\n<li><strong>Omkostninger:<\/strong> At udvikle et headless WordPress-site kan v\u00e6re dyrere end et <a href=\"https:\/\/kinqsta.com\/dk\/blog\/wordpress-website-omkostninger\/\">traditionelt WordPress-site<\/a>, da det kr\u00e6ver mere teknisk ekspertise og ressourcer at s\u00e6tte op og vedligeholde.<\/li>\n<li><strong>Plugin-begr\u00e6nsninger:<\/strong> Nogle <a href=\"https:\/\/kinqsta.com\/dk\/emner\/wordpress-plugins\/\">WordPress-plugins<\/a> fungerer muligvis ikke med headless WordPress, da de er afh\u00e6ngige af WordPress-temaer for at fungere korrekt.<\/li>\n<\/ul>\n<h2>Hvad er WordPress REST API?<\/h2>\n<p><a href=\"https:\/\/kinqsta.com\/blog\/wordpress-rest-api\/\">WordPress REST API<\/a> bruges som en gr\u00e6nseflade mellem backend og frontend. Med API&#8217;en kan data nemt sendes eller hentes fra webstedet, da API&#8217;en har kontroladgang til webstedets data. Det sikrer ogs\u00e5, at kun autoriserede brugere kan interagere med det.<\/p>\n<p>API&#8217;en kan underst\u00f8tte en lang r\u00e6kke dataformater, herunder JSON, hvilket g\u00f8r det nemt at interagere med systemet.<\/p>\n<p>WordPress REST API er et kraftfuldt v\u00e6rkt\u00f8j for udviklere til at oprette, opdatere eller slette data ud over at skabe brugerdefineret funktionalitet til websteder eller integrere med en anden tjeneste. Desuden er der plugins til r\u00e5dighed, som udvider API&#8217;ens funktionalitet, f.eks. ved at integrere yderligere autentificeringsmetoder.<\/p>\n<h2>Hvad er React?<\/h2>\n<p><a href=\"https:\/\/kinqsta.com\/blog\/what-is-react-js\/\">React<\/a> er et <a href=\"https:\/\/kinqsta.com\/blog\/what-is-javascript\/\">JavaScript-bibliotek<\/a> til opbygning af brugergr\u00e6nseflader. Det er et open source, genanvendeligt komponentbaseret frontend-bibliotek, der giver udviklere mulighed for at bygge <a href=\"https:\/\/kinqsta.com\/dk\/blog\/react-komponentbiblioteker\/\">brugergr\u00e6nsefladekomponenter (UI)<\/a> ved hj\u00e6lp af deklarativ syntaks.<\/p>\n<p>React skaber en interaktiv brugergr\u00e6nseflade og gengiver komponenterne, n\u00e5r data \u00e6ndres. Biblioteket er meget popul\u00e6rt blandt udviklere, der \u00f8nsker at skabe komplekse, genanvendelige komponenter, styre tilstand effektivt og nemt opdatere brugergr\u00e6nsefladen i realtid.<\/p>\n<p>Reacts st\u00e6rke udviklerf\u00e6llesskab har skabt en r\u00e6kke v\u00e6rkt\u00f8jer, biblioteker og ressourcer til at forbedre bibliotekets funktionalitet. Mange organisationer og virksomheder anvender React som deres teknologi til at bygge komplekse, dynamiske og hurtigt performende webapplikationer.<\/p>\n<figure id=\"attachment_152469\" aria-describedby=\"caption-attachment-152469\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2023\/04\/Companies-Using-React-min.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-152469 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2023\/04\/Companies-Using-React-min.png\" alt=\"Collage af popul\u00e6re firmalogoer (herunder Facebook, Netflix, Amazon, Reddit) ved hj\u00e6lp af React\" width=\"1024\" height=\"621\"><\/a><figcaption id=\"caption-attachment-152469\" class=\"wp-caption-text\">Popul\u00e6re virksomheder, der bruger React.js (kilde: inexture.com)<\/figcaption><\/figure>\n<h3>Hvorfor bruge React?<\/h3>\n<p>React har mange fordele, der g\u00f8r det til et fremragende valg til udvikling af komplekse og dynamiske webapplikationer.<\/p>\n<p>Her er nogle af de vigtigste fordele ved at bruge React:<\/p>\n<ul>\n<li><strong>Deklarativ syntaks:<\/strong> React bruger en deklarativ tilgang til opbygning af UI-komponenter, hvilket g\u00f8r det nemt at skabe genanvendelige og meget effektive komponenter.<\/li>\n<li><strong>Stort f\u00e6llesskab og \u00f8kosystem:<\/strong> React har et stort og aktivt f\u00e6llesskab af udviklere, hvilket har f\u00f8rt til skabelsen af en bred vifte af v\u00e6rkt\u00f8jer og biblioteker til at forbedre dets funktionalitet.<\/li>\n<li><strong>Virtuel DOM:<\/strong> React bruger virtual DOM til at opdatere brugergr\u00e6nsefladen i realtid. Det betyder, at n\u00e5r tilstanden \u00e6ndres, opdaterer den kun de komponenter, der skal \u00e6ndres, i stedet for at genskabe hele siden.<\/li>\n<li><strong>Genanvendelighed<\/strong>: React.js tilbyder genanvendelige komponenter, der kan bruges p\u00e5 tv\u00e6rs af forskellige applikationer, hvilket reducerer udviklingstiden og -indsatsen betydeligt.<\/li>\n<\/ul>\n<h2>S\u00e5dan opretter du et headless WordPress-site med React<\/h2>\n<p>Nu er det tid til at f\u00e5 beskidte h\u00e6nder og l\u00e6re, hvordan man opretter og implementerer et headless WordPress-site med React.<\/p>\n<p>L\u00e6s videre for at blive klogere p\u00e5 det.<\/p>\n<h3>Foruds\u00e6tninger<\/h3>\n<p>F\u00f8r du g\u00e5r i gang med denne tutorial, skal du s\u00f8rge for at have:<\/p>\n<ul>\n<li>En god forst\u00e5else af React<\/li>\n<li><a href=\"https:\/\/kinqsta.com\/dk\/blog\/saadan-installeres-node-js\/\">Node.js v14 eller h\u00f8jere installeret<\/a> p\u00e5 din maskine<\/li>\n<\/ul>\n<h3>Trin 1. Ops\u00e6tning af en WordPress-hjemmeside<\/h3>\n<p>Lad os starte med at s\u00e6tte WordPress-hjemmesiden op, da den vil fungere som datakilde for React-applikationen. Hvis du allerede har opsat en WordPress-hjemmeside, kan du springe dette afsnit over; ellers skal du bare f\u00f8lge med.<\/p>\n<p>I denne vejledning bruger vi DevKinsta, et udbredt, hurtigt og p\u00e5lideligt lokalt udviklingsmilj\u00f8 til oprettelse, udvikling og implementering af WordPress-websteder. Det er helt gratis at bruge &#8211; du skal blot <a href=\"https:\/\/kinqsta.com\/dk\/devkinsta\/download\/\">downloade det fra den officielle hjemmeside<\/a> og <a href=\"https:\/\/kinqsta.com\/docs\/devkinsta\/devkinsta-getting-started\/installation\/\">installere det p\u00e5 dit system<\/a>.<\/p>\n<p>N\u00e5r installationen er f\u00e6rdig, skal du \u00e5bne DevKinsta-dashboardet og klikke p\u00e5 <strong>Nyt WordPress-site<\/strong> for at oprette et nyt WordPress-site.<\/p>\n<p>Udfyld de n\u00f8dvendige input, og tryk p\u00e5 knappen <strong>Opret websted<\/strong> for at forts\u00e6tte.<\/p>\n<figure id=\"attachment_152847\" aria-describedby=\"caption-attachment-152847\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2023\/04\/Kinsta-Dev-New-WordPress-site.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-152847 size-large\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2023\/04\/Kinsta-Dev-New-WordPress-site-1024x681.png\" alt=\"Sk\u00e6rmbillede af DevKinstas side for oprettelse af websted, der viser tre inputfelter og en knap\" width=\"1024\" height=\"681\"><\/a><figcaption id=\"caption-attachment-152847\" class=\"wp-caption-text\">DevKinsta side til oprettelse af websted<\/figcaption><\/figure>\n<p>Det kan tage et par minutter, men n\u00e5r din hjemmeside er oprettet, kan du f\u00e5 adgang til den og dens admin-panel ved at klikke p\u00e5 henholdsvis &#8221; <strong>\u00c5ben site<\/strong>&#8221; eller &#8221; <strong>WP Admin<\/strong> options&#8221;.<\/p>\n<p>For at aktivere JSON API skal du derefter opdatere permalinks p\u00e5 din hjemmeside.<\/p>\n<p>I <a href=\"https:\/\/kinqsta.com\/blog\/wordpress-admin\/\">WordPress&#8217; adminpanel<\/a> skal du klikke p\u00e5 <strong>Indstillinger<\/strong> efterfulgt af <strong>Permalinks<\/strong>. V\u00e6lg indstillingen <strong>Post navn<\/strong>, og klik p\u00e5 <strong>Gem \u00c6ndringer<\/strong>.<\/p>\n<figure id=\"attachment_152850\" aria-describedby=\"caption-attachment-152850\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2023\/04\/WordPress-Permalink-Settings.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-152850 size-large\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2023\/04\/WordPress-Permalink-Settings-1024x651.png\" alt=\"Sk\u00e6rmbillede af WordPress Admin Panels Permalinks Settings-side, der viser forskellige muligheder for at tilpasse webstedets permalinkstruktur.\" width=\"1024\" height=\"651\"><\/a><figcaption id=\"caption-attachment-152850\" class=\"wp-caption-text\">WordPress indstillinger for Permalink<\/figcaption><\/figure>\n<p>Du kan ogs\u00e5 bruge v\u00e6rkt\u00f8jer som <a href=\"https:\/\/www.postman.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Postman<\/a> til nemt at teste og sende anmodninger til WordPress REST API&#8217;er.<\/p>\n<h3>Trin 2: Ops\u00e6tning af en React-applikation<\/h3>\n<p>Nu, hvor vi har opsat vores WordPress-hjemmeside, kan vi begynde at arbejde p\u00e5 frontenden. Som n\u00e6vnt ovenfor vil vi i denne tutorial bruge React til frontenden af vores applikation.<\/p>\n<p>For at komme i gang skal du k\u00f8re nedenst\u00e5ende kode i din terminal for at oprette en React-applikation.<\/p>\n<pre><code class=\"language-bash\">npm create vite@latest my-blog-app \ncd my-blog-app \nnpm install<\/code><\/pre>\n<p>Ovenst\u00e5ende kommandoer opretter en React-applikation og installerer de n\u00f8dvendige afh\u00e6ngigheder.<\/p>\n<p>Vi skal ogs\u00e5 installere Axios, et JavaScript-bibliotek til at lave HTTP-anmodninger. K\u00f8r nedenst\u00e5ende kommando for at installere det.<\/p>\n<pre><code class=\"language-bash\">npm install axios<\/code><\/pre>\n<p>For at starte udviklingsserveren kan du nu k\u00f8re <code>npm run dev<\/code> i terminalen. Serveren b\u00f8r derefter initialisere din app p\u00e5 <a href=\"http:\/\/127.0.0.1:5173\/\" target=\"_blank\" rel=\"noopener noreferrer\">http:\/\/127.0.0.1:5173<\/a>.<\/p>\n<figure id=\"attachment_152848\" aria-describedby=\"caption-attachment-152848\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2023\/04\/Vite-React-landing-page.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-152848 size-large\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2023\/04\/Vite-React-landing-page-1024x651.png\" alt=\"Sk\u00e6rmbillede af Reacts standardside viser et logo af React og Vite, en knap og tekst.\" width=\"1024\" height=\"651\"><\/a><figcaption id=\"caption-attachment-152848\" class=\"wp-caption-text\">Vite + React landingsside<\/figcaption><\/figure>\n<p>\u00c5bn derefter dit projekt i din foretrukne <a href=\"https:\/\/kinqsta.com\/dk\/blog\/bedste-teksteditorer\/\">kodeeditor<\/a>, og slet alle un\u00f8dvendige filer, som du ikke har brug for, f.eks. <strong>assets-mappen<\/strong>, <strong>index.css<\/strong> og <strong>app.css<\/strong>.<\/p>\n<p>Du kan ogs\u00e5 erstatte koden i <strong>main.jsx<\/strong> og <strong>App.jsx<\/strong> med f\u00f8lgende kode:<\/p>\n<pre><code class=\"language-javascript\">\/\/ main.jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom\/client'\nimport App from '.\/App'\n\nReactDOM.createRoot(document.getElementById('root')).render(\n  &lt;React.StrictMode&gt;\n    &lt;App \/&gt;\n  &lt;\/React.StrictMode&gt;,\n)<\/code><\/pre>\n<pre><code class=\"language-javascript\">\/\/ App.jsx\n\nimport React from 'react'\n\nexport default function App() {\n  return (\n    &lt;App \/&gt;\n  )\n}<\/code><\/pre>\n<h3>Trin 3: Hentning af indl\u00e6g fra WordPress<\/h3>\n<p>Nu er det tid til at hente indl\u00e6ggene fra vores WordPress-hjemmeside.<\/p>\n<p>Inde i <strong>App.jsx<\/strong> skal du tilf\u00f8je nedenst\u00e5ende tilstand og importere &lt;code&gt;useState&lt;\/code&gt; fra React:<\/p>\n<pre><code class=\"language-javascript\">const [posts, setPosts] = useState([])<\/code><\/pre>\n<p><code>useState<\/code> er en <a href=\"https:\/\/kinqsta.com\/blog\/react-usecallback\/\">indbygget hook i React<\/a>, der bruges til at tilf\u00f8je tilstande til en komponent, en tilstand, der henviser til data eller en egenskab.<\/p>\n<p><code>posts<\/code> bruges til at hente data fra tilstanden, og <code>setPosts<\/code> bruges til at tilf\u00f8je nye data til post. Vi har ogs\u00e5 sendt et tomt array til state som standard.<\/p>\n<p>Tilf\u00f8j derefter f\u00f8lgende kode efter state for at hente indl\u00e6ggene fra WordPress REST API:<\/p>\n<pre><code class=\"language-javascript\">const fetchPosts = () =&gt; {\n    \/\/ Using axios to fetch the posts\n    axios\n      .get(\"http:\/\/headless-wordpress-website.local\/wp-json\/wp\/v2\/posts\")\n      .then((res) =&gt; {\n        \/\/ Saving the data to state\n        setPosts(res.data);\n      });\n  }\n\n\n  \/\/ Calling the function on page load\n  useEffect(() =&gt; {\n    fetchPosts()\n  }, [])<\/code><\/pre>\n<p>Ovenst\u00e5ende kode k\u00f8rer <code>fetchPosts()<\/code> -funktionen, n\u00e5r siden indl\u00e6ses. Inde i <code>fetchPosts()<\/code> -funktionen sender vi en <code>GET<\/code> -anmodning til WordPress API ved hj\u00e6lp af Axios for at hente indl\u00e6g og derefter gemme i den tilstand, vi erkl\u00e6rede tidligere.<\/p>\n<h3>Trin 4: Oprettelse af en blogkomponent<\/h3>\n<p>I rodmappen skal du oprette en ny mappe med navnet <strong>components<\/strong>, og i den skal du oprette to nye filer: blog <strong>.jsx<\/strong> og <strong>blog.css<\/strong>.<\/p>\n<p>F\u00f8rst skal du tilf\u00f8je f\u00f8lgende kode til <strong>blog.j<\/strong>sx:<\/p>\n<pre><code class=\"language-javascript\">import axios from \"axios\";\nimport React, { useEffect, useState } from \"react\";\nimport \".\/blog.css\";\n\nexport default function Blog({ post }) {\n  const [featuredImage, setFeaturedimage] = useState();\n\n  const getImage = () =&gt; {\n    axios\n     .get(post?._links[\"wp:featuredmedia\"][0]?.href)\n     .then((response) =&gt; {\n      setFeaturedimage(response.data.source_url);\n    });\n  };\n\n  useEffect(() =&gt; {\n    getImage();\n  }, []);\n\n  return (\n    &lt;div class=\"container\"&gt;\n      &lt;div class=\"blog-container\"&gt;\n        &lt;p className=\"blog-date\"&gt;\n          {new Date(Date.now()).toLocaleDateString(\"en-US\", {\n            day: \"numeric\",\n            month: \"long\",\n            year: \"numeric\",\n          })}\n        &lt;\/p&gt;\n        &lt;h2 className=\"blog-title\"&gt;{post.title.rendered}&lt;\/h2&gt;\n        &lt;p\n          className=\"blog-excerpt\"\n          dangerouslySetInnerHTML={{ __html: post.excerpt.rendered }}\n        \/&gt;\n        &lt;img src={featuredImage} class=\"mask\" \/&gt;\n      &lt;\/div&gt;\n    &lt;\/div&gt;\n  );\n}<\/code><\/pre>\n<p>I ovenst\u00e5ende kode har vi oprettet en kortkomponent, der tager <code>posts<\/code> -egenskaben, der indeholder oplysninger om blogindl\u00e6gget fra WordPress API.<\/p>\n<p>I <code>getImage()<\/code> -funktionen bruger vi Axios til at hente URL&#8217;en til det fremh\u00e6vede billede og derefter gemme oplysningerne i state.<\/p>\n<p>Derefter tilf\u00f8jede vi en <code>useEffect<\/code> hook til at kalde <code>getImage()<\/code> -funktionen, n\u00e5r komponenten er monteret. Vi tilf\u00f8jede ogs\u00e5 returs\u00e6tningen, hvor vi gengiver indl\u00e6gsdata, titel, uddrag og billede.<\/p>\n<p>Tilf\u00f8j derefter stilarterne nedenfor til filen <strong>blog.css<\/strong>:<\/p>\n<pre><code class=\"language-css\">@import url(\"https:\/\/fonts.googleapis.com\/css?family=Poppins\");\n\n.blog-container {\n  width: 400px;\n  height: 322px;\n  background: white;\n  border-radius: 10px;\n  box-shadow: 0px 20px 50px #d9dbdf;\n  -webkit-transition: all 0.3s ease;\n  -o-transition: all 0.3s ease;\n  transition: all 0.3s ease;\n}\n\nimg {\n  width: 400px;\n  height: 210px;\n  object-fit: cover;\n  overflow: hidden;\n  z-index: 999;\n  border-bottom-left-radius: 10px;\n  border-bottom-right-radius: 10px;\n}\n\n.blog-title {\n  margin: auto;\n  text-align: left;\n  padding-left: 22px;\n  font-family: \"Poppins\";\n  font-size: 22px;\n}\n\n.blog-date {\n  text-align: justify;\n  padding-left: 22px;\n  padding-right: 22px;\n  font-family: \"Poppins\";\n  font-size: 12px;\n  color: #c8c8c8;\n  line-height: 18px;\n  padding-top: 10px;\n}\n\n.blog-excerpt {\n  text-align: justify;\n  padding-left: 22px;\n  padding-right: 22px;\n  font-family: \"Poppins\";\n  font-size: 12px;\n  color: #8a8a8a;\n  line-height: 18px;\n  margin-bottom: 13px;\n}<\/code><\/pre>\n<p>I App.jsx-filen skal du derefter tilf\u00f8je f\u00f8lgende kode i <code>return<\/code> -s\u00e6tningen for at gengive blogkomponenten:<\/p>\n<pre><code class=\"language-javascript\">&lt;div&gt;\n\t{posts.map((item) =&gt; (\n\t\t&lt;Blog post={item} \/&gt;\n\t))}\n&lt;\/div&gt;;<\/code><\/pre>\n<p>Til sidst er det s\u00e5dan, din App.jsx skal se ud:<\/p>\n<pre><code class=\"language-javascript\">import React, { useEffect, useState } from 'react'\nimport axios from \"axios\"\nimport Blog from '.\/components\/Blog';\n\nexport default function App() {\n  const [posts, setPosts] = useState([]);\n\n  const fetchPosts = () =&gt; {\n    axios\n      .get(\"http:\/\/my-awesome-website.local\/wp-json\/wp\/v2\/posts\")\n      .then((res) =&gt; {\n        setPosts(res.data);\n      });\n  }\n\n  useEffect(() =&gt; {\n    fetchPosts()\n  }, [])\n\n  return (\n    &lt;div&gt;\n      {posts.map((item) =&gt; (\n        &lt;Blog\n          post={item}\n        \/&gt;\n      ))}\n    &lt;\/div&gt;\n  )\n}<\/code><\/pre>\n<p>Gem filen, og opdater din browserfane. Nu skulle du gerne kunne se dine blogindl\u00e6g gengivet p\u00e5 siden.<\/p>\n<figure id=\"attachment_152849\" aria-describedby=\"caption-attachment-152849\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2023\/04\/WordPress-Headless-w-React.js_.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-152849 size-large\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2023\/04\/WordPress-Headless-w-React.js_-1024x654.png\" alt=\"Sk\u00e6rmbillede af React-appen med fire blogkort, der hver viser et forskelligt WordPress-indl\u00e6g.\" width=\"1024\" height=\"654\"><\/a><figcaption id=\"caption-attachment-152849\" class=\"wp-caption-text\">Hovedl\u00f8s WordPress med React.js<\/figcaption><\/figure>\n\n<h2>Opsummering<\/h2>\n<p>Headless WordPress er en fantastisk m\u00e5de at skabe hurtigt performende hjemmesider med en skalerbar arkitektur. Med brugen af React og WordPress REST API er det nemmere end nogensinde at skabe dynamiske og interaktive hjemmesider med WordPress som content management system.<\/p>\n<p>Lige s\u00e5 vigtigt for hastigheden er det, hvor du hoster dit WordPress-site. Kinsta er unikt positioneret til at give en lynhurtig <a href=\"https:\/\/kinqsta.com\/dk\/wordpress-hosting\/\">WordPress-hostingoplevelse<\/a> med top-of-the-line Google C2-maskiner p\u00e5 deres <a href=\"https:\/\/kinqsta.com\/dk\/blog\/cloud-platform-for-udviklere\/\">Premium Tier Network<\/a>, samt en <a href=\"https:\/\/kinqsta.com\/dk\/cloudflare-integration\/\">Cloudflare-integration<\/a> til at l\u00e5se dit websted ned mod datatab og ondsindede angreb.<\/p>\n<p><em>Har du bygget &#8211; eller planl\u00e6gger du at bygge &#8211; en headless WordPress-hjemmeside med React? Lad os vide det i kommentarfeltet nedenfor!<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>WordPress er et af de mest popul\u00e6re content management-systemer (CMS), som bruges af 810 millioner &#8211; det er 41% af hele internettet! Det er det oplagte &#8230;<\/p>\n","protected":false},"author":256,"featured_media":51016,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[559,197,38],"topic":[730,746,754],"class_list":["post-51015","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-javascript","tag-web-development","tag-webdev","topic-react","topic-web-udviklingsvaerktoejer","topic-wordpress-udvikling"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>S\u00e5dan opretter du et headless WordPress-site med React.js - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Opdag, hvordan du opretter en hjemmeside ved hj\u00e6lp af React.js og Headless Wordpress med vores trin-for-trin guide til, hvordan headless CMS fungerer.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinqsta.com\/dk\/blog\/wordpress-react\/\" \/>\n<meta property=\"og:locale\" content=\"da_DK\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"S\u00e5dan opretter du et headless WordPress-site med React.js\" \/>\n<meta property=\"og:description\" content=\"Opdag, hvordan du opretter en hjemmeside ved hj\u00e6lp af React.js og Headless Wordpress med vores trin-for-trin guide til, hvordan headless CMS fungerer.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinqsta.com\/dk\/blog\/wordpress-react\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Kinsta-Danmark-122855885298660\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-06-01T08:52:06+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-24T09:14:14+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinqsta.com\/dk\/wp-content\/uploads\/sites\/12\/2023\/06\/wordpress-react.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Suhail Kakar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Opdag, hvordan du opretter en hjemmeside ved hj\u00e6lp af React.js og Headless Wordpress med vores trin-for-trin guide til, hvordan headless CMS fungerer.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinqsta.com\/dk\/wp-content\/uploads\/sites\/12\/2023\/06\/wordpress-react.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@kinsta_dk\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_dk\" \/>\n<meta name=\"twitter:label1\" content=\"Skrevet af\" \/>\n\t<meta name=\"twitter:data1\" content=\"Suhail Kakar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimeret l\u00e6setid\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutter\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinqsta.com\/dk\/blog\/wordpress-react\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinqsta.com\/dk\/blog\/wordpress-react\/\"},\"author\":{\"name\":\"Suhail Kakar\",\"@id\":\"https:\/\/kinqsta.com\/dk\/#\/schema\/person\/5ba7d23f58a0b812e2a85ec38b61287b\"},\"headline\":\"S\u00e5dan opretter du et headless WordPress-site med React.js\",\"datePublished\":\"2023-06-01T08:52:06+00:00\",\"dateModified\":\"2023-08-24T09:14:14+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinqsta.com\/dk\/blog\/wordpress-react\/\"},\"wordCount\":1989,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinqsta.com\/dk\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/dk\/blog\/wordpress-react\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinqsta.com\/dk\/wp-content\/uploads\/sites\/12\/2023\/06\/wordpress-react.jpg\",\"keywords\":[\"JavaScript\",\"web development\",\"webdev\"],\"inLanguage\":\"da-DK\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinqsta.com\/dk\/blog\/wordpress-react\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinqsta.com\/dk\/blog\/wordpress-react\/\",\"url\":\"https:\/\/kinqsta.com\/dk\/blog\/wordpress-react\/\",\"name\":\"S\u00e5dan opretter du et headless WordPress-site med React.js - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinqsta.com\/dk\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinqsta.com\/dk\/blog\/wordpress-react\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/dk\/blog\/wordpress-react\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinqsta.com\/dk\/wp-content\/uploads\/sites\/12\/2023\/06\/wordpress-react.jpg\",\"datePublished\":\"2023-06-01T08:52:06+00:00\",\"dateModified\":\"2023-08-24T09:14:14+00:00\",\"description\":\"Opdag, hvordan du opretter en hjemmeside ved hj\u00e6lp af React.js og Headless Wordpress med vores trin-for-trin guide til, hvordan headless CMS fungerer.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinqsta.com\/dk\/blog\/wordpress-react\/#breadcrumb\"},\"inLanguage\":\"da-DK\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinqsta.com\/dk\/blog\/wordpress-react\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"da-DK\",\"@id\":\"https:\/\/kinqsta.com\/dk\/blog\/wordpress-react\/#primaryimage\",\"url\":\"https:\/\/kinqsta.com\/dk\/wp-content\/uploads\/sites\/12\/2023\/06\/wordpress-react.jpg\",\"contentUrl\":\"https:\/\/kinqsta.com\/dk\/wp-content\/uploads\/sites\/12\/2023\/06\/wordpress-react.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinqsta.com\/dk\/blog\/wordpress-react\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinqsta.com\/dk\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React\",\"item\":\"https:\/\/kinqsta.com\/dk\/emner\/react\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"S\u00e5dan opretter du et headless WordPress-site med React.js\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinqsta.com\/dk\/#website\",\"url\":\"https:\/\/kinqsta.com\/dk\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Hurtig, sikker, premium hostingl\u00f8sninger\",\"publisher\":{\"@id\":\"https:\/\/kinqsta.com\/dk\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinqsta.com\/dk\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"da-DK\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinqsta.com\/dk\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinqsta.com\/dk\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"da-DK\",\"@id\":\"https:\/\/kinqsta.com\/dk\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinqsta.com\/dk\/wp-content\/uploads\/sites\/12\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinqsta.com\/dk\/wp-content\/uploads\/sites\/12\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/dk\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Kinsta-Danmark-122855885298660\/\",\"https:\/\/x.com\/kinsta_dk\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinqsta.com\/dk\/#\/schema\/person\/5ba7d23f58a0b812e2a85ec38b61287b\",\"name\":\"Suhail Kakar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"da-DK\",\"@id\":\"https:\/\/kinqsta.com\/dk\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/7f0e96cbbbf132c6903e26b444dbbb8b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/7f0e96cbbbf132c6903e26b444dbbb8b?s=96&d=mm&r=g\",\"caption\":\"Suhail Kakar\"},\"description\":\"Suhail is a software developer specializing in full-stack web and mobile application development. He's an active contributor to open-source projects and enjoys building Web3 applications.\",\"url\":\"https:\/\/kinqsta.com\/dk\/blog\/author\/suhailkakar\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"S\u00e5dan opretter du et headless WordPress-site med React.js - Kinsta\u00ae","description":"Opdag, hvordan du opretter en hjemmeside ved hj\u00e6lp af React.js og Headless Wordpress med vores trin-for-trin guide til, hvordan headless CMS fungerer.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinqsta.com\/dk\/blog\/wordpress-react\/","og_locale":"da_DK","og_type":"article","og_title":"S\u00e5dan opretter du et headless WordPress-site med React.js","og_description":"Opdag, hvordan du opretter en hjemmeside ved hj\u00e6lp af React.js og Headless Wordpress med vores trin-for-trin guide til, hvordan headless CMS fungerer.","og_url":"https:\/\/kinqsta.com\/dk\/blog\/wordpress-react\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Danmark-122855885298660\/","article_published_time":"2023-06-01T08:52:06+00:00","article_modified_time":"2023-08-24T09:14:14+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinqsta.com\/dk\/wp-content\/uploads\/sites\/12\/2023\/06\/wordpress-react.jpg","type":"image\/jpeg"}],"author":"Suhail Kakar","twitter_card":"summary_large_image","twitter_description":"Opdag, hvordan du opretter en hjemmeside ved hj\u00e6lp af React.js og Headless Wordpress med vores trin-for-trin guide til, hvordan headless CMS fungerer.","twitter_image":"https:\/\/kinqsta.com\/dk\/wp-content\/uploads\/sites\/12\/2023\/06\/wordpress-react.jpg","twitter_creator":"@kinsta_dk","twitter_site":"@kinsta_dk","twitter_misc":{"Skrevet af":"Suhail Kakar","Estimeret l\u00e6setid":"11 minutter"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinqsta.com\/dk\/blog\/wordpress-react\/#article","isPartOf":{"@id":"https:\/\/kinqsta.com\/dk\/blog\/wordpress-react\/"},"author":{"name":"Suhail Kakar","@id":"https:\/\/kinqsta.com\/dk\/#\/schema\/person\/5ba7d23f58a0b812e2a85ec38b61287b"},"headline":"S\u00e5dan opretter du et headless WordPress-site med React.js","datePublished":"2023-06-01T08:52:06+00:00","dateModified":"2023-08-24T09:14:14+00:00","mainEntityOfPage":{"@id":"https:\/\/kinqsta.com\/dk\/blog\/wordpress-react\/"},"wordCount":1989,"commentCount":0,"publisher":{"@id":"https:\/\/kinqsta.com\/dk\/#organization"},"image":{"@id":"https:\/\/kinqsta.com\/dk\/blog\/wordpress-react\/#primaryimage"},"thumbnailUrl":"https:\/\/kinqsta.com\/dk\/wp-content\/uploads\/sites\/12\/2023\/06\/wordpress-react.jpg","keywords":["JavaScript","web development","webdev"],"inLanguage":"da-DK","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinqsta.com\/dk\/blog\/wordpress-react\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinqsta.com\/dk\/blog\/wordpress-react\/","url":"https:\/\/kinqsta.com\/dk\/blog\/wordpress-react\/","name":"S\u00e5dan opretter du et headless WordPress-site med React.js - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinqsta.com\/dk\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinqsta.com\/dk\/blog\/wordpress-react\/#primaryimage"},"image":{"@id":"https:\/\/kinqsta.com\/dk\/blog\/wordpress-react\/#primaryimage"},"thumbnailUrl":"https:\/\/kinqsta.com\/dk\/wp-content\/uploads\/sites\/12\/2023\/06\/wordpress-react.jpg","datePublished":"2023-06-01T08:52:06+00:00","dateModified":"2023-08-24T09:14:14+00:00","description":"Opdag, hvordan du opretter en hjemmeside ved hj\u00e6lp af React.js og Headless Wordpress med vores trin-for-trin guide til, hvordan headless CMS fungerer.","breadcrumb":{"@id":"https:\/\/kinqsta.com\/dk\/blog\/wordpress-react\/#breadcrumb"},"inLanguage":"da-DK","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinqsta.com\/dk\/blog\/wordpress-react\/"]}]},{"@type":"ImageObject","inLanguage":"da-DK","@id":"https:\/\/kinqsta.com\/dk\/blog\/wordpress-react\/#primaryimage","url":"https:\/\/kinqsta.com\/dk\/wp-content\/uploads\/sites\/12\/2023\/06\/wordpress-react.jpg","contentUrl":"https:\/\/kinqsta.com\/dk\/wp-content\/uploads\/sites\/12\/2023\/06\/wordpress-react.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinqsta.com\/dk\/blog\/wordpress-react\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinqsta.com\/dk\/"},{"@type":"ListItem","position":2,"name":"React","item":"https:\/\/kinqsta.com\/dk\/emner\/react\/"},{"@type":"ListItem","position":3,"name":"S\u00e5dan opretter du et headless WordPress-site med React.js"}]},{"@type":"WebSite","@id":"https:\/\/kinqsta.com\/dk\/#website","url":"https:\/\/kinqsta.com\/dk\/","name":"Kinsta\u00ae","description":"Hurtig, sikker, premium hostingl\u00f8sninger","publisher":{"@id":"https:\/\/kinqsta.com\/dk\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinqsta.com\/dk\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"da-DK"},{"@type":"Organization","@id":"https:\/\/kinqsta.com\/dk\/#organization","name":"Kinsta","url":"https:\/\/kinqsta.com\/dk\/","logo":{"@type":"ImageObject","inLanguage":"da-DK","@id":"https:\/\/kinqsta.com\/dk\/#\/schema\/logo\/image\/","url":"https:\/\/kinqsta.com\/dk\/wp-content\/uploads\/sites\/12\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinqsta.com\/dk\/wp-content\/uploads\/sites\/12\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinqsta.com\/dk\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Kinsta-Danmark-122855885298660\/","https:\/\/x.com\/kinsta_dk","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinqsta.com\/dk\/#\/schema\/person\/5ba7d23f58a0b812e2a85ec38b61287b","name":"Suhail Kakar","image":{"@type":"ImageObject","inLanguage":"da-DK","@id":"https:\/\/kinqsta.com\/dk\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/7f0e96cbbbf132c6903e26b444dbbb8b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7f0e96cbbbf132c6903e26b444dbbb8b?s=96&d=mm&r=g","caption":"Suhail Kakar"},"description":"Suhail is a software developer specializing in full-stack web and mobile application development. He's an active contributor to open-source projects and enjoys building Web3 applications.","url":"https:\/\/kinqsta.com\/dk\/blog\/author\/suhailkakar\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinqsta.com\/dk\/wp-json\/wp\/v2\/posts\/51015","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinqsta.com\/dk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinqsta.com\/dk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/dk\/wp-json\/wp\/v2\/users\/256"}],"replies":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/dk\/wp-json\/wp\/v2\/comments?post=51015"}],"version-history":[{"count":7,"href":"https:\/\/kinqsta.com\/dk\/wp-json\/wp\/v2\/posts\/51015\/revisions"}],"predecessor-version":[{"id":51037,"href":"https:\/\/kinqsta.com\/dk\/wp-json\/wp\/v2\/posts\/51015\/revisions\/51037"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinqsta.com\/dk\/wp-json\/kinsta\/v1\/posts\/51015\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinqsta.com\/dk\/wp-json\/kinsta\/v1\/posts\/51015\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinqsta.com\/dk\/wp-json\/kinsta\/v1\/posts\/51015\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinqsta.com\/dk\/wp-json\/kinsta\/v1\/posts\/51015\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinqsta.com\/dk\/wp-json\/kinsta\/v1\/posts\/51015\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinqsta.com\/dk\/wp-json\/kinsta\/v1\/posts\/51015\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinqsta.com\/dk\/wp-json\/kinsta\/v1\/posts\/51015\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinqsta.com\/dk\/wp-json\/kinsta\/v1\/posts\/51015\/translations\/es"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinqsta.com\/dk\/wp-json\/kinsta\/v1\/posts\/51015\/translations\/se"},{"embeddable":true,"hreflang":"da","title":"Danish","href":"https:\/\/kinqsta.com\/dk\/wp-json\/kinsta\/v1\/posts\/51015\/translations\/dk"},{"href":"https:\/\/kinqsta.com\/dk\/wp-json\/kinsta\/v1\/posts\/51015\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/dk\/wp-json\/wp\/v2\/media\/51016"}],"wp:attachment":[{"href":"https:\/\/kinqsta.com\/dk\/wp-json\/wp\/v2\/media?parent=51015"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinqsta.com\/dk\/wp-json\/wp\/v2\/tags?post=51015"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinqsta.com\/dk\/wp-json\/wp\/v2\/topic?post=51015"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}