{"id":46462,"date":"2022-11-07T12:09:02","date_gmt":"2022-11-07T11:09:02","guid":{"rendered":"https:\/\/kinsta.com\/dk\/?p=46462&post_type=knowledgebase&preview_id=46462"},"modified":"2025-10-01T20:03:59","modified_gmt":"2025-10-01T19:03:59","slug":"inertia-js","status":"publish","type":"post","link":"https:\/\/kinsta.com\/dk\/blog\/inertia-js\/","title":{"rendered":"Den ultimative guide til Inertia.js"},"content":{"rendered":"

Single-page applications (SPA’er) er blevet den moderne m\u00e5de at skabe webapplikationer p\u00e5, og Inertia.js er et f\u00f8rende v\u00e6rkt\u00f8j, der g\u00f8r det muligt for udviklere at skabe SPA’er med b\u00e5de klient- og server-side rendering.<\/p>\n

I denne artikel vil vi se p\u00e5, hvordan Inertia g\u00f8r det til en leg at konstruere SPA’er, og hvordan det l\u00f8ser mange andre problemer for udviklere. Vi vil ogs\u00e5 d\u00e6kke de vigtigste funktioner i v\u00e6rkt\u00f8jet.<\/p>\n

Men f\u00f8r vi begynder, skal vi f\u00f8rst sikre os, at vi forst\u00e5r, hvordan server- og klientsideapplikationer fungerer.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Hvad er server-side rendering?<\/h2>\n

Server-side rendering (SSR) er, n\u00e5r et program kan rendere eller vise websideindhold p\u00e5 serveren i stedet for i browseren. N\u00e5r en bruger fors\u00f8ger at bes\u00f8ge example.com<\/strong>, sender browseren en anmodning til serveren og beder om alle de n\u00f8dvendige oplysninger til visning af denne specifikke webside, og serveren svarer straks ved at give browseren en fuldt gengivet side.<\/p>\n

S\u00f8gemaskinerne griber ind og indekserer de oplysninger, der leveres af serveren, f\u00f8r de n\u00e5r frem til browseren; dette kaldes s\u00f8gemaskineoptimering (SEO). Browseren opl\u00f8ser derefter JavaScript-indholdet, og websiden vises for brugeren.<\/p>\n

\"Visning
Visning af indhold, der er gengivet p\u00e5 serversiden.<\/figcaption><\/figure>\n

Problemet med SSR-tilgangen er, at det tager lang tid at indl\u00e6se en fuldt renderet side fra serveren, hvilket ikke giver en behagelig brugeroplevelse. Derfor overvejer udviklere SPA’er og rendering p\u00e5 klientsiden.<\/p>\n\n

Hvad er client-side rendering?<\/h2>\n

Client-side rendering giver browseren mulighed for at f\u00e5 alt det, den har brug for til at rendere websiden fra klientsiden i stedet for at modtage en fuldt renderet side fra serveren. N\u00e5r siden er indl\u00e6st, sender browseren ikke andre anmodninger til serveren, hvilket g\u00f8r browsing-oplevelsen ekstremt hurtig.<\/p>\n

\"Et
Visning af indhold, der er gengivet p\u00e5 klientsiden.<\/figcaption><\/figure>\n

Rendering p\u00e5 klientsiden hjalp med at skabe SPA’er, hvilket revolutionerede internettet. Du kan oprette et websted, der ikke kr\u00e6ver genindl\u00e6sning af siden, uanset hvor mange links du klikker p\u00e5. Det g\u00f8r det nemt for brugeren at navigere gennem hjemmesiden.<\/p>\n

Selv om SPA’er er fantastiske, har denne tilgang en masse kompleksitet og problemer, som vi vil d\u00e6kke i dag. Inertia l\u00f8ser de fleste af disse problemer ved effektivt at udnytte server-side frameworks. Det kombinerer de bedste funktioner fra b\u00e5de server- og klientside apps.<\/p>\n

Hvad er Inertia.js?<\/h2>\n

Inertia er ikke en JavaScript-framework<\/a>. Det er i stedet en strategi eller teknik til udvikling af SPA’er. Den g\u00f8r det muligt for udvikleren at udnytte de nuv\u00e6rende server-side frameworks til at bygge en moderne SPA uden den kompleksitet, der f\u00f8lger med den.<\/p>\n

Inertia er designet til at ledsage og ikke erstatte de frameworks, du allerede bruger. Betragt det som en hj\u00e6lpsom allierede, der hj\u00e6lper dig med at udf\u00f8re opgaverne hurtigere og mere effektivt. Den underst\u00f8tter i \u00f8jeblikket tre frontend-frameworks (Vue, React og Svelte) til klientside-rendering og to backend-rammer (Laravel og Rails) til server-side-rendering.<\/p>\n

For de fleste Laravel-udviklere<\/a> er Inertia en af de mest p\u00e5lidelige teknikker til at konstruere SPA’er, da den giver dem mulighed for at forbinde b\u00e5de frontend- og backend-frameworks.<\/p>\n

Hvordan fungerer Inertia.js?<\/h2>\n

Inertia ligner Vue Router, idet det giver dig mulighed for at flytte mellem sider uden at skulle genindl\u00e6se hele siden. Inertia fungerer dog i synkronisering med dit server-side framework. Dette er muligt med Link<\/code>, en wrapper for standard ankertagget. N\u00e5r der klikkes p\u00e5 en Link<\/code>, opfanger Inertia klikh\u00e6ndelsen og sender en XHR-foresp\u00f8rgsel til serveren, hvilket f\u00e5r serveren til at genkende, at der er tale om en Inertia-foresp\u00f8rgsel, og returnere et JSON-svar. Dette svar indeholder JavaScript-komponentens navn og data, hvorefter Inertia p\u00e5 magisk vis fjerner un\u00f8dvendige komponenter og erstatter dem med dem, der er n\u00f8dvendige for at bes\u00f8ge den nye side, og opdaterer historikstatus.<\/p>\n

Et dybt dyk ind i Inertia.js-funktionaliteten<\/h3>\n

N\u00e5r en bes\u00f8gende f\u00f8rste gang bes\u00f8ger example.com<\/strong>, udf\u00f8rer browseren en standardanmodning om en hel side, og serveren returnerer et fuldst\u00e6ndigt HTML-svar, som om Inertia ikke eksisterede. Dette HTML-svar indeholder alle webstedets aktiver (CSS, JavaScript), men det indeholder ogs\u00e5 et ekstra aktiv for Inertia, som er roden div<\/code> med data-page<\/code>-attributten, der indeholder JSON-data for den oprindelige side. Inertia bruger derefter disse JSON-data til at kickstarte frontend-framework og vise startsiden.<\/p>\n

\"Diagram,
Inertia.js: Svar p\u00e5 det f\u00f8rste sidebes\u00f8g<\/figcaption><\/figure>\n

N\u00e5r appen er startet op, vil hver rute, som brugeren bes\u00f8ger inden for det samme dom\u00e6ne ved hj\u00e6lp af Link<\/code>, v\u00e6re en XHR-foresp\u00f8rgsel med X-Inertia<\/code>-headeren. Dette fort\u00e6ller serveren, at der er tale om en Inertia-foresp\u00f8rgsel.<\/p>\n

Tilbagemeldingen vil komme som et JSON-svar med sidens indhold i stedet for et komplet HTML-svar som ved det f\u00f8rste bes\u00f8g.<\/p>\n

\"Diagram,
Inertia.js: Svar p\u00e5 efterf\u00f8lgende rutebes\u00f8g.<\/figcaption><\/figure>\n

Hvilke problemer l\u00f8ser Inertia.js?<\/h2>\n

Inertia l\u00f8ser en lang r\u00e6kke problemer for webudviklere. M\u00e5let med at skabe Inertia var at give hurtige og effektive l\u00f8sninger p\u00e5 al den kompleksitet, der f\u00f8lger med design af en SPA.<\/p>\n

SPA-kompleksiteter<\/h3>\n

Hvis udviklere skulle bygge en SPA uden Inertia, ville de v\u00e6re n\u00f8dt til at oprette REST- eller GraphQL-API’er og beskytte dem med en eller anden form for godkendelsesmetode, hvilket blandt mange andre ting ville kr\u00e6ve oprettelse af et front-end-state-management-system.<\/p>\n

Inertia blev designet til at hj\u00e6lpe udviklere med at omdanne deres serversideapplikationer, der k\u00f8rer helt p\u00e5 backend-serveren, til en JavaScript-applikation med \u00e9n side uden at skulle gennemg\u00e5 alle de kompleksiteter, der f\u00f8lger med opbygningen af SPA’er.<\/p>\n

Oprettelse af en SPA ved hj\u00e6lp af Inertia svarer til at oprette en server-side rendered app. Du opretter controllere, foretager foresp\u00f8rgsler til databasen for at f\u00e5 de n\u00f8dvendige data og returnerer derefter resultaterne til visningerne.<\/p>\n

N\u00f8glen her er, at visningerne er JavaScript-komponenter. Det betyder, at du f\u00e5r dataene fra din server, hvorefter Inertia arbejder sammen med frontend-framework for at vise siden med dataene som en JavaScript-fil, hvilket eliminerer behovet for at oprette API’er.<\/p>\n

Autentifikation<\/h3>\n

Da Inertia forsyner applikationen med data og svar fra backenden, vil den simpelthen bruge det autentifikationssystem, du har p\u00e5 serversiden. Det betyder, at du ikke beh\u00f8ver at bekymre dig om autentificering p\u00e5 klientsiden – du vil i stedet have et sessionsbaseret autentificeringssystem, der synkroniseres med dit autentificeringssystem p\u00e5 serversiden.<\/p>\n

SEO-problemer<\/h3>\n

Som tidligere forklaret for server-side rendering, opsnapper s\u00f8gemaskinerne serverens svar til browseren for at indeksere websidens HTML-indhold. I tilf\u00e6lde af en SPA vil s\u00f8gemaskinerne have sv\u00e6rt ved at identificere sidens indhold, da serveren vil svare med enten JavaScript-komponenter og JSON-data.<\/p>\n

Men Inertia l\u00f8ste dette problem ved at introducere funktionen SSR (Server-side rendering)<\/a>, som du kan tilf\u00f8je til din applikation. Inertia bruger Node.js-milj\u00f8et som en udl\u00f8ser til at konvertere JSON-datasvaret til HTML.<\/p>\n

For at illustrere dette bedre kan du forestille dig Inertia, der sidder mellem serveren og browseren og kigger p\u00e5. N\u00e5r serveren modtager en Inertia-foresp\u00f8rgsel og returnerer et JSON-svar, registrerer Inertia eksistensen af en Node.js-server, omdanner JSON-svaret til HTML og returnerer det, s\u00e5 s\u00f8gemaskinerne kan indeksere siden, som om appen ikke var en SPA.<\/p>\n

Inertia indeholder ogs\u00e5 en Head<\/code>-komponent, som giver dig mulighed for at tilf\u00f8je en titel og metadata til din side:<\/p>\n

\n<script setup>\nimport { Head } from '@inertiajs\/inertia-vue3'\n<\/script>\n\n<template>\n  <Head>\n    <title>Page Title<\/title>\n    <meta name=\"description\" content=\"Page Description\" \/>\n  <\/Head>\n<\/template>\n<\/code><\/pre>\n
Her er et andet eksempel fra Inertias onlinedokumentation<\/a>:<\/p>\n
\n\/\/ Layout.vue\n\nimport { Head } from '@inertiajs\/inertia-vue3'\n\n<Head>\n  <title>My app<\/title>\n  <meta head-key=\"description\" name=\"description\" content=\"This is the default description\" \/>\n  <link rel=\"icon\" type=\"image\/svg+xml\" href=\"\/favicon.svg\" \/>\n<\/Head>\n\n\/\/ About.vue\n\nimport { Head } from '@inertiajs\/inertia-vue3'\n\n<Head>\n  <title>About - My app<\/title>\n  <meta head-key=\"description\" name=\"description\" content=\"This is a page specific description\" \/>\n<\/Head>\n<\/code><\/pre>\n
Formularer og formularhj\u00e6lper<\/h3>\n
Det er muligt at indsende en standardformularanmodning, mens man bruger Inertia. Det vil dog resultere i en opdatering af hele siden.<\/p>\n
Inertia giver brugerne mulighed for at indgive formularforesp\u00f8rgsler ved hj\u00e6lp af Inertia, hvilket fjerner muligheden for sideopfriskning. N\u00e5r formularen er indsendt med Inertia, bliver den h\u00e5ndteret server-side, hvilket g\u00f8r det muligt for dig at omdirigere brugeren tilbage til den samme side (eller en helt anden side).<\/p>\n
Inertia g\u00f8r vores liv lettere, n\u00e5r vi opretter og indsender formularer. Her er et eksempel p\u00e5, hvordan du kan bruge det med Vue.js 3 composition API:<\/p>\n
\n<script setup>\n  import { useForm } from \"@inertiajs\/inertia-vue3\";\n\n  const form = useForm({\n    email: null,\n    password: null,\n  });\n<\/script>\n\n<template>\n  <form @submit.prevent=\"form.post('kinsta\/login')\">\n    \n    <input type=\"text\" v-model=\"form.email\" \/>\n    \n    <input type=\"password\" v-model=\"form.password\" \/>\n    \n    <button type=\"submit\">Login<\/button>\n  <\/form>\n<\/template>\n<\/code><\/pre>\n
Du kan indsende formularen med GET<\/code>, POST<\/code>, PUT<\/code>, PATCH<\/code> og DELETE<\/code>.<\/p>\n
\n<script setup>\n  import { useForm } from \"@inertiajs\/inertia-vue3\";\n\n  const form = useForm({\n    email: null,\n    password: null,\n  });\n\n  const submit = () => {\n    form.post(\"kinsta\/login\");\n  };\n<\/script>\n\n<template>\n  <form @submit.prevent=\"submit()\">\n    \n    <input type=\"text\" v-model=\"form.email\" \/>\n    \n    <input type=\"password\" v-model=\"form.password\" \/>\n    \n    <button type=\"submit\">Login<\/button>\n  <\/form>\n<\/template>\n<\/code><\/pre>\n
Inertias formularhj\u00e6lper tilbyder ogs\u00e5 et par nyttige egenskaber som f.eks. processing<\/code>-egenskaben, der bliver til true<\/code>, n\u00e5r formularen begynder at blive behandlet. Dette kan bruges til at deaktivere indsendelsesknapper, mens formularen behandles, for at forhindre flere indsendelser:<\/p>\n
\n<button type=\"submit\" :disabled=\"form.processing\">Submit<\/button>\n<\/code><\/pre>\n
Du kan ogs\u00e5 bruge preserveState<\/code>, preserveScroll<\/code> og event callbacks med formularen, hvilket vil v\u00e6re nyttigt, n\u00e5r du tilf\u00f8jer yderligere muligheder til formularen:<\/p>\n
\nform.post('kinsta\/login, {\n  preserveScroll: true,\n  onSuccess: () => form.reset('password'),\n})\n<\/code><\/pre>\n
Huskelse af tilstand med Inertia.js<\/h3>\n
Lad os sige, at en bruger udfylder en formular p\u00e5 dit websted og beslutter sig for at navigere v\u00e6k til en anden side, f\u00f8r han sender den. N\u00e5r de vender tilbage til formularens side, vil brugerens formularinput blive nulstillet.<\/p>\n
Heldigvis tilbyder Inertia funktionen useRemember<\/code>, som giver dig mulighed for at gemme brugerens formularinput i historikstatus og gendanne dem ved historiknavigation.<\/p>\n
Du kan bruge denne funktion ved at importere den fra Inertia og anvende den p\u00e5 din formular:<\/p>\n
\nimport { useRemember } from '@inertiajs\/inertia-vue3'\n\nexport default {\n  setup() {\n    const form = useRemember({\n        first_name: null,\n        last_name: null,\n    })\n\n    return { form }\n  },\n}\n<\/code><\/pre>\n
Hvis du har en side med mange formularer, der bruger funktionen useRemember<\/code>, skal hver komponent have en unik n\u00f8gle, s\u00e5 Inertia ved, hvilke data der skal gendannes i hver komponent:<\/p>\n
\nconst form = useRemember({\n        first_name: null,\n        last_name: null,\n    }, 'Users\/Create')\n<\/code><\/pre>\n
Vi beh\u00f8ver ikke at bruge useRemember<\/code>-funktionen, n\u00e5r vi bruger Inertias formularhj\u00e6lper. Inertia vil automatisk huske formularinputets tilstand, s\u00e5 vi skal blot angive en unik identifikator:<\/p>\n
\nimport { useForm } from '@inertiajs\/inertia-vue3'\n\nconst form = useForm('CreateUser', data)\n<\/code><\/pre>\n
Det gode ved denne funktionalitet er, at du kan huske alle data i din applikation manuelt. Dette kan ogs\u00e5 v\u00e6re nyttigt til at videregive data fra en dybt indlejret komponent til hovedkomponenten:<\/p>\n
\nimport { Inertia } from '@inertiajs\/inertia'\n\n\/\/ DeeplyNestedComponent.vue\nInertia.remember(data, 'my-key')\n\n\/\/ MainComponent.vue\nlet data = Inertia.restore('my-key')\n<\/code><\/pre>\n
Filoverf\u00f8rsler<\/h3>\n
Inertia registrerer, om formularen indeholder filer, og hvis det er tilf\u00e6ldet, transformerer foresp\u00f8rgselsdataene til formData<\/code>-objektet, hvilket altid er p\u00e5kr\u00e6vet. S\u00e5 hvis du har en formular, der indeholder et navn og en avatar, vil Inertia behandle formularen som multipart\/form-data<\/code>.<\/p>\n
Validering og fejl<\/h3>\n
N\u00e5r en bruger indsender en formular med forkerte v\u00e6rdier, og den sendes til serveren til validering, returnerer du brugeren til formularens side med et blink af valideringsfejl i sessionen. Inertia opfanger fejl fra sessionen og gemmer dem som sideprops.<\/p>\n
Da props er reaktive, vises de, n\u00e5r indsendelsen af formularen er afsluttet. For at Inertia kan opdage eksistensen af fejl, holder den \u00f8je med page.props.errors<\/code>.<\/p>\n
N\u00e5r den har fundet fejl, leverer den derefter en onError()<\/code> callback i stedet for onSuccess()<\/code>.<\/p>\n
Her er et eksempel med Vue 3 for at hj\u00e6lpe dig med at forst\u00e5 konceptet:<\/p>\n
\nconst submit = () => {\n    form.post(\"kinsta\/login\", {\n        onError: () => {\n            return \"Hi! , the server returned an error and Inertia saved it as a prop. Do as you like with me\"\n        },\n        onSuccess: () => {\n            return \"Wohoo!!\"\n        }\n    }\n    );\n  };\n<\/code><\/pre>\n
Visning af fejl er s\u00e5 let som at definere dem som props og vise dem betinget i din HTML:<\/p>\n
\n<script setup>\n  defineProps({\n    errors: Object,\n  });\n\n\/\/\n<\/script>\n\n<template>\n  <form @submit.prevent=\"submit()\">\n    \/\/\n    <div v-if=\"errors.email\">{{ errors.email }}<\/div>\n  <\/form>\n<\/template>\n<\/code><\/pre>\n
N\u00e5r du bruger Inertia, beh\u00f8ver du ikke at bekymre dig om gamle inputdata i tilf\u00e6lde af fejl. N\u00e5r Inertia registrerer, at brugeren er blevet omdirigeret til siden med fejl, bevarer den automatisk komponentens gamle tilstand for POST<\/code>, PUT<\/code>, PATCH<\/code> og DELETE<\/code>.<\/p>\n
Delvise reloads med Inertia.js<\/h3>\n
Inertias funktionalitet til delvis genindl\u00e6sning er ganske enkelt fremragende, da den kun genindl\u00e6ser en udvalgt komponent p\u00e5 siden i stedet for at hente hele datas\u00e6ttet fra serveren igen. Dette tager din applikationsoptimering til det n\u00e6ste niveau. Du kan ogs\u00e5 bes\u00f8ge f\u00f8lgende link for at f\u00e5 mere at vide om hvordan du optimerer din Laravel-applikations ydeevne<\/a>.<\/p>\n
Delvise genindl\u00e6sninger kan udf\u00f8res ved hj\u00e6lp af Inertia’s only<\/code> egenskab:<\/p>\n
\nimport { Inertia } from '@inertiajs\/inertia'\n\nInertia.visit(url, {\n  only: ['users'],\n})\n<\/code><\/pre>\n
Eksterne omdirigeringer med Inertia.js<\/h3>\n
Underdom\u00e6ne-routing, eller ekstern omdirigering, er en af de mest frustrerende udfordringer med SPA’er. Det er irrationelt at forvente, at din applikation forbliver en single-page applikation, mens du ogs\u00e5 bes\u00f8ger et andet dom\u00e6ne.<\/p>\n
Det kan v\u00e6re n\u00f8dvendigt at omdirigere en Inertia-foresp\u00f8rgsel til et eksternt websted eller endog et andet ikke-Inertia-slutpunkt i din app. Dette er muligt gennem et server-side-initieret window.location<\/code> bes\u00f8g:<\/p>\n
\nreturn Inertia::location($url);\n<\/code><\/pre>\n
Hvis du \u00e5bner konsollen under afpr\u00f8vning af dette, vil du opdage, at det returnerer 409 conflict<\/code>. Dette svar indeholder URL’en i X-Inertia-Location<\/code>-headeren, som Inertia vil registrere p\u00e5 klientsiden og automatisk udf\u00f8re bes\u00f8get.<\/p>\n
S\u00e5dan arbejder du med Inertia.js<\/h2>\n
At arbejde med Inertia svarer til at arbejde med en server-side applikation, med den undtagelse at det er en fuldt reaktiv single-page applikation. Du b\u00f8r v\u00e6re i stand til at definere dine ruter, tilpasse controllere og returnere en visning, som Inertia skal sende til din frontend-framework.<\/p>\n
Laravel-ruter og Inertia.js<\/h3>\n
Laravel-routing er ikke noget, du \u00f8nsker at opgive, n\u00e5r du udvikler din applikation; det giver dig mulighed for hurtigt at konstruere de mest komplekse ruter, og der er masser af gratis og betalte Laravel-ressourcer<\/a> derude, der kan hj\u00e6lpe dig med at l\u00e6re mere om Laravel og hvordan routing fungerer.<\/p>\n
Det smukke her er, at du ikke beh\u00f8ver Vue Router eller React Router for at udf\u00f8re simpel klient-side routing, fordi Inertia har sit eget routing-system, der fungerer med Laravel-routing. Hvis jobbet ikke kr\u00e6ver nogen backend-data, kan du bruge router-hj\u00e6lperen til at route direkte til en komponent.<\/p>\n
\nRoute::inertia('\/home', 'HomeComponent');\n<\/code><\/pre>\n
\npublic function index()\n    {\n    return Inertia::render('Users\/Index', [\n        'users' => User::all();\n        'create_url' => URL::route('users.create'),\n    ]);\n}\n<\/code><\/pre>\n
F\u00f8r vi g\u00e5r videre, vil vi gerne pr\u00e6sentere dig for DevKinsta<\/a>, et kraftfuldt v\u00e6rkt\u00f8j til udviklere, designere og bureauer, der g\u00f8r det muligt for dem at konstruere WordPress-webapps med en eller flere sider. Heldigvis kan WordPress integreres med Laravel ved hj\u00e6lp af Corcel-pakken<\/a>. Hvis du bygger en Laravel-app med WordPress-integration, skal du tjekke Kinsta APM Tool<\/a> for ekstraordin\u00e6r overv\u00e5gning af ydeevne.<\/p>\n
Omdirigerer<\/h3>\n
Du b\u00f8r altid omdirigere brugeren til den korrekte sti, der svarer til den oprindelige anmodning. Hvis en bruger f.eks. sender til store<\/code> endpoint for at indsende et indl\u00e6g, skal du s\u00f8rge for at omdirigere kunden til GET<\/code> endpoint m\u00e5ske til indl\u00e6gsruten.<\/p>\n
\npublic function store()\n{\n    Post::create(\n        Request::validate([\n            'title' => ['required'],\n            'body' => ['required'],\n        ])\n    );\n\n    \/\/ redirect the user to the posts show page\n    return Redirect::route('posts.show');\n}\n<\/code><\/pre>\n
Ulemper ved at bruge Inertia.js<\/h2>\n
Indtil videre har vi fokuseret p\u00e5 de mange fordele ved at bruge Inertia. Men som med ethvert v\u00e6rkt\u00f8j har Inertia ogs\u00e5 et par ulemper.<\/p>\n