{"id":201,"date":"2021-02-09T20:00:03","date_gmt":"2021-02-09T19:00:03","guid":{"rendered":"https:\/\/wp.klementin.dk\/?p=201"},"modified":"2022-02-08T16:30:33","modified_gmt":"2022-02-08T15:30:33","slug":"spa-hvad-er-det","status":"publish","type":"post","link":"https:\/\/wp.klementin.dk\/index.php\/2021\/02\/09\/spa-hvad-er-det\/","title":{"rendered":"SPA \u2013 Hvad er det?"},"content":{"rendered":"\n

Arbejder du med teknologi til dagligt har du med garanti h\u00f8rt udtrykket “SPA” eller “Single-page application” men hvad er det? Og er det brugbart for dig?<\/p>\n\n\n\n

<\/div>\n\n\n\n

En SPA er som navnet antyder en applikation eller rettere en hjemmeside der kun har \u00e9n side i mods\u00e6tning til de traditionelle hjemmesider hvor browseren skal opdatere, hver gang du klikker p\u00e5 et link eller en knap. Med en SPA indl\u00e6ser browseren alt det indhold den skal bruge f\u00f8rste gang du kommer ind p\u00e5 hjemmesiden herefter, vil den kun udskifte dataen og alts\u00e5 ikke opdatere siden med et traditionelt page refresh. Dette giver en langt mere flydende og glidende brug af hjemmesiden.<\/p>\n\n\n\n

Du ved det m\u00e5ske ikke, men du bruger faktisk hjemmesider der er lavet som SPA hver eneste dag, ja medmindre du da hverken bruger Facebook, Gmail, Google Maps, Youtube eller Google Docs eller en af de utallige andre google services. Og ja, vores egen klementin.dk hjemmeside er naturligvis ogs\u00e5 en SPA, og den bes\u00f8ger du jo hver dag, og hvis ikke s\u00e5 burde du starte, vi poster en masse sp\u00e6ndende content \ud83d\ude09.<\/p>\n\n\n\n

<\/div>\n\n\n\n

De store er rykket over<\/h2>\n\n\n\n

Som n\u00e6vnt ovenfor er de fleste store spillere p\u00e5 markedet rykket over til at bruge SPA. Dette skyldes i h\u00f8j grad brugervenligheden ved en SPA hjemmeside men mest af alt skyldes det at en side som f.eks. Facebook har et v\u00e6ld af funktioner. Der er en chat, der er notifikationer der skal opdateres, der er en v\u00e6g der indl\u00e6ser indhold. Alle disse funktioner skal gerne k\u00f8re uafh\u00e6ngigt af hinanden og gerne p\u00e5 samme tid. Derfor er det rigtig godt at bruge en teknologi, hvor siden kun skal indl\u00e6ses \u00e9n gang og herefter kan de forskellige delkomponenter blot blive opdateret n\u00e5r der er behov for det. <\/p>\n\n\n\n

Det samme g\u00f8r sig g\u00e6ldende for f.eks. Google Docs. De ville aldrig kunne give en f\u00f8lelse af at du sidder i et word dokument hvis ikke det var for teknologien bag – SPA.<\/p>\n\n\n\n

Det er naturligvis ikke kun store sider med et v\u00e6ld af funktioner som f.eks. Facebook der kan f\u00e5 nytte af at bruge en SPA en simpel webshop kan ogs\u00e5 blive virkelig l\u00e6kker at bruge som SPA et godt eksempel er motatos.dk<\/a> som er lavet som en SPA og k\u00f8re fantastisk godt.<\/p>\n\n\n\n

<\/div>\n\n\n\n

Kan nemt laves til en app<\/h2>\n\n\n\n

Har du f\u00f8rst lavet en SPA og lavet den rigtigt, s\u00e5 kan du ret nemt konvertere din hjemmeside til en 1 til 1 app. N\u00e5r vi siger lavet rigtigt, s\u00e5 betyder det at alt data der skal ind p\u00e5 din hjemmeside skal komme fra s\u00e5kaldte API kald, der henter data udefra og ligger den p\u00e5 brugergr\u00e6nsefladen. Grunden til at det skal v\u00e6re lavet s\u00e5ledes er at en app ikke kan l\u00e6se eksempelvis PHP som mange hjemmesider er lavet i. Den kan til geng\u00e6ld godt l\u00e6se javascript som en korrekt SPA hjemmeside laves i.<\/p>\n\n\n\n

Blot fordi du kan lave din hjemmeside til en app betyder det naturligvis ikke at det er n\u00f8dvendigt at g\u00f8re det. Har du en relativt lille webshop eksempelvis vil du formentlig ikke vinde meget ved at f\u00e5 en og en hjemmeside.<\/p>\n\n\n\n

<\/div>\n\n\n\n

Alt er (m\u00e5ske) ikke fryd og gammen<\/h2>\n\n\n\n

Selvom det m\u00e5ske kunne lyde som om at en SPA hjemmeside et det du har ledt efter lige siden du blev website ejer s\u00e5 skal du m\u00e5ske liiiige holde lidt igen.<\/p>\n\n\n\n

Der er nogle f\u00e5 bekymringer du b\u00f8r forholde dig til hvis du overvejer at f\u00e5 dig en SPA hjemmeside.<\/p>\n\n\n\n

<\/div>\n\n\n\n

SEO<\/h4>\n\n\n\n

Nogle mener at Google ikke kan l\u00e6se en SPA hjemmeside korrekt, og andre mener at det fint virker. Vi er i den sidste kategori vi har ikke selv haft nogle problemer med google som fint finder alle vores links og indeksere dem korrekt. <\/p>\n\n\n\n

Er SEO dog absolut alfa & omega for dig s\u00e5 b\u00f8r du nok vente et par \u00e5r med at kaste din k\u00e6rlighed p\u00e5 SPA indtil vi er 100% sikre p\u00e5 at Google kan l\u00e6se siden korrekt.<\/p>\n\n\n\n

Kan du ikke vente et par \u00e5r kan du ogs\u00e5 g\u00f8re brug af s\u00e5kaldt SSR-teknologi der g\u00f8r at SEO skulle v\u00e6re lidt mere p\u00e5lideligt p\u00e5 en SPA. Vi vil ikke g\u00e5 i dybden med SSR her da det er en teknisk snak, er du interesseret i at h\u00f8re mere om det s\u00e5 tag dog endelig fat i os og s\u00e5 vil vi elske at fort\u00e6lle dig om det.<\/p>\n\n\n\n

<\/div>\n\n\n\n

F\u00f8rste gang siden indl\u00e6ses kan det tage lidt tid<\/h4>\n\n\n\n

Som n\u00e6vnt indl\u00e6ses alt indhold f\u00f8rste gang en bruger bes\u00f8ger din side, derfor kan f\u00f8rste indl\u00e6sning v\u00e6re lidt langsom, de fleste sider vil dog loade p\u00e5 maks et par sekunder s\u00e5 der er i den grad noget man kan leve med i forhold til at oplevelsen af siden bliver s\u00e5 meget bedre n\u00e5r brugeren interagerer med den.<\/p>\n\n\n\n

<\/div>\n\n\n\n

De gamle browsere vil ikke kunne lide dig<\/h4>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/div>\n\n\n\n

De gamle browsere som f.eks. Internet explorer som der desv\u00e6rre er nogle der bruger, dog ikke s\u00e5 mange endnu. Vil ikke kunne l\u00e6se din side korrekt, ja faktisk m\u00e5ske overhovedet ikke.<\/p>\n\n\n\n

Derudover vil der i andre browsere ogs\u00e5 kunne opleves problemer da din hjemmeside vil v\u00e6re skrevet i javascript udelukkende, og browsere har det med at se forskelligt p\u00e5 javascript. Med det sagt kan du dog roligt regne med at hvis du tester din hjemmeside ordentligt inden den bliver publiceret, s\u00e5 burde alt v\u00e6re fint i alle browsere undtagen IE.<\/p>\n\n\n\n

<\/div>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/div>\n\n\n\n

If\u00f8lge statcounter.com<\/a> er chrome klart den mest benyttede browser mens IE ligger i den anden ende af skalaen med h\u00f8jst 2.16% brug i hele 2020. I januar 2021 er den nede p\u00e5 0.86%<\/p>\n\n\n\n

<\/div>\n\n\n\n

Konklusion<\/h2>\n\n\n\n

SPA kan mange ting som en traditionel hjemmeside ikke kan. Teknologien er dog stadig ogs\u00e5 ung hvilket g\u00f8r at der kan v\u00e6re nogle babysygdomme, s\u00e5 konklusionen fra vores side er at hvis du alligevel skal have en ny hjemmeside nu, s\u00e5 kan du sagtens overveje en SPA. Har du ikke brug for en ny side lige nu s\u00e5 kan du ogs\u00e5 sagtens vente et par \u00e5r. Teknologien bliver kun mere moden!<\/p>\n","protected":false},"excerpt":{"rendered":"

Arbejder du med teknologi til dagligt har du med garanti h\u00f8rt udtrykket “SPA” eller “Single-page application” men hvad er det? Og er det brugbart for dig? En SPA er som navnet antyder en applikation eller rettere en hjemmeside der kun har \u00e9n side i mods\u00e6tning til de traditionelle hjemmesider hvor browseren skal opdatere, hver gang… L\u00e6s mere SPA – Hvad er det?<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-201","post","type-post","status-publish","format-standard","hentry","category-blog","entry"],"yoast_head":"\nSPA - Hvad er det? - Klementin<\/title>\n<meta name=\"description\" content=\"Hvad er en SPA eller en single page application? F\u00e5r du en hurtig hjemmeside med en SPA? Og virker SPA med SEO? F\u00e5 svarene her.\" \/>\n<meta name=\"robots\" content=\"noindex, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"da_DK\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"SPA - Hvad er det? - Klementin\" \/>\n<meta property=\"og:description\" content=\"Hvad er en SPA eller en single page application? F\u00e5r du en hurtig hjemmeside med en SPA? Og virker SPA med SEO? F\u00e5 svarene her.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wp.klementin.dk\/index.php\/2021\/02\/09\/spa-hvad-er-det\/\" \/>\n<meta property=\"og:site_name\" content=\"Klementin\" \/>\n<meta property=\"article:published_time\" content=\"2021-02-09T19:00:03+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-02-08T15:30:33+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wp.klementin.dk\/wp-content\/uploads\/2021\/02\/ie-meme.jpg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Estimeret l\u00e6setid\">\n\t<meta name=\"twitter:data1\" content=\"5 minutter\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/wp.klementin.dk\/#website\",\"url\":\"https:\/\/wp.klementin.dk\/\",\"name\":\"Klementin\",\"description\":\"Endnu en WordPress-blog\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/wp.klementin.dk\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"da-DK\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/wp.klementin.dk\/index.php\/2021\/02\/09\/spa-hvad-er-det\/#primaryimage\",\"inLanguage\":\"da-DK\",\"url\":\"https:\/\/wp.klementin.dk\/wp-content\/uploads\/2021\/02\/ie-meme.jpg\",\"width\":700,\"height\":730},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/wp.klementin.dk\/index.php\/2021\/02\/09\/spa-hvad-er-det\/#webpage\",\"url\":\"https:\/\/wp.klementin.dk\/index.php\/2021\/02\/09\/spa-hvad-er-det\/\",\"name\":\"SPA - Hvad er det? - Klementin\",\"isPartOf\":{\"@id\":\"https:\/\/wp.klementin.dk\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/wp.klementin.dk\/index.php\/2021\/02\/09\/spa-hvad-er-det\/#primaryimage\"},\"datePublished\":\"2021-02-09T19:00:03+00:00\",\"dateModified\":\"2022-02-08T15:30:33+00:00\",\"author\":{\"@id\":\"https:\/\/wp.klementin.dk\/#\/schema\/person\/37d7eb75ab11d3b7de9c5c2993ea2483\"},\"description\":\"Hvad er en SPA eller en single page application? F\\u00e5r du en hurtig hjemmeside med en SPA? Og virker SPA med SEO? F\\u00e5 svarene her.\",\"inLanguage\":\"da-DK\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/wp.klementin.dk\/index.php\/2021\/02\/09\/spa-hvad-er-det\/\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/wp.klementin.dk\/#\/schema\/person\/37d7eb75ab11d3b7de9c5c2993ea2483\",\"name\":\"Patrick Hansen\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/wp.klementin.dk\/#personlogo\",\"inLanguage\":\"da-DK\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/961857b54f05b93012a87317bf02d7219e5f5be02594fab2cb20942e12a5d84a?s=96&d=mm&r=g\",\"caption\":\"Patrick Hansen\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","acf":{"list_image":{"ID":708,"id":708,"title":"Spa sm\u00e5t-min","filename":"Spa-smaat-min.png","filesize":34964,"url":"https:\/\/wp.klementin.dk\/wp-content\/uploads\/2021\/02\/Spa-smaat-min.png","link":"https:\/\/wp.klementin.dk\/index.php\/2021\/02\/09\/spa-hvad-er-det\/spa-smaat-min\/","alt":"","author":"2","description":"","caption":"","name":"spa-smaat-min","status":"inherit","uploaded_to":201,"date":"2022-02-08 15:30:21","modified":"2022-02-08 15:30:21","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/wp.klementin.dk\/wp-includes\/images\/media\/default.png","width":1000,"height":1000,"sizes":{"thumbnail":"https:\/\/wp.klementin.dk\/wp-content\/uploads\/2021\/02\/Spa-smaat-min-150x150.png","thumbnail-width":150,"thumbnail-height":150,"medium":"https:\/\/wp.klementin.dk\/wp-content\/uploads\/2021\/02\/Spa-smaat-min-300x300.png","medium-width":300,"medium-height":300,"medium_large":"https:\/\/wp.klementin.dk\/wp-content\/uploads\/2021\/02\/Spa-smaat-min-768x768.png","medium_large-width":750,"medium_large-height":750,"large":"https:\/\/wp.klementin.dk\/wp-content\/uploads\/2021\/02\/Spa-smaat-min.png","large-width":750,"large-height":750,"1536x1536":"https:\/\/wp.klementin.dk\/wp-content\/uploads\/2021\/02\/Spa-smaat-min.png","1536x1536-width":1000,"1536x1536-height":1000,"2048x2048":"https:\/\/wp.klementin.dk\/wp-content\/uploads\/2021\/02\/Spa-smaat-min.png","2048x2048-width":1000,"2048x2048-height":1000,"post-thumbnail":"https:\/\/wp.klementin.dk\/wp-content\/uploads\/2021\/02\/Spa-smaat-min.png","post-thumbnail-width":1000,"post-thumbnail-height":1000}},"big_image":{"ID":709,"id":709,"title":"Spa stort-min","filename":"Spa-stort-min.png","filesize":20840,"url":"https:\/\/wp.klementin.dk\/wp-content\/uploads\/2021\/02\/Spa-stort-min.png","link":"https:\/\/wp.klementin.dk\/index.php\/2021\/02\/09\/spa-hvad-er-det\/spa-stort-min\/","alt":"","author":"2","description":"","caption":"","name":"spa-stort-min","status":"inherit","uploaded_to":201,"date":"2022-02-08 15:30:29","modified":"2022-02-08 15:30:29","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/wp.klementin.dk\/wp-includes\/images\/media\/default.png","width":1660,"height":600,"sizes":{"thumbnail":"https:\/\/wp.klementin.dk\/wp-content\/uploads\/2021\/02\/Spa-stort-min-150x150.png","thumbnail-width":150,"thumbnail-height":150,"medium":"https:\/\/wp.klementin.dk\/wp-content\/uploads\/2021\/02\/Spa-stort-min-300x108.png","medium-width":300,"medium-height":108,"medium_large":"https:\/\/wp.klementin.dk\/wp-content\/uploads\/2021\/02\/Spa-stort-min-768x278.png","medium_large-width":750,"medium_large-height":271,"large":"https:\/\/wp.klementin.dk\/wp-content\/uploads\/2021\/02\/Spa-stort-min-1024x370.png","large-width":750,"large-height":271,"1536x1536":"https:\/\/wp.klementin.dk\/wp-content\/uploads\/2021\/02\/Spa-stort-min-1536x555.png","1536x1536-width":1536,"1536x1536-height":555,"2048x2048":"https:\/\/wp.klementin.dk\/wp-content\/uploads\/2021\/02\/Spa-stort-min.png","2048x2048-width":1660,"2048x2048-height":600,"post-thumbnail":"https:\/\/wp.klementin.dk\/wp-content\/uploads\/2021\/02\/Spa-stort-min-1568x567.png","post-thumbnail-width":1568,"post-thumbnail-height":567}},"sub_title":"Og hvad kan det g\u00f8re for din hjemmeside?","reading_time":"6"},"seo":{"title":"SPA - Hvad er det? - Klementin","description":"Hvad er en SPA eller en single page application? F\u00e5r du en hurtig hjemmeside med en SPA? Og virker SPA med SEO? F\u00e5 svarene her."},"_links":{"self":[{"href":"https:\/\/wp.klementin.dk\/index.php\/wp-json\/wp\/v2\/posts\/201","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wp.klementin.dk\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wp.klementin.dk\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wp.klementin.dk\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/wp.klementin.dk\/index.php\/wp-json\/wp\/v2\/comments?post=201"}],"version-history":[{"count":11,"href":"https:\/\/wp.klementin.dk\/index.php\/wp-json\/wp\/v2\/posts\/201\/revisions"}],"predecessor-version":[{"id":711,"href":"https:\/\/wp.klementin.dk\/index.php\/wp-json\/wp\/v2\/posts\/201\/revisions\/711"}],"wp:attachment":[{"href":"https:\/\/wp.klementin.dk\/index.php\/wp-json\/wp\/v2\/media?parent=201"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wp.klementin.dk\/index.php\/wp-json\/wp\/v2\/categories?post=201"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wp.klementin.dk\/index.php\/wp-json\/wp\/v2\/tags?post=201"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}