Vad \u00e4r serverbaserad rendering?<\/h2>\n
Serverside-rendering (SSR) \u00e4r n\u00e4r en applikation kan rendera eller visa webbsidans inneh\u00e5ll p\u00e5 servern i st\u00e4llet f\u00f6r i webbl\u00e4saren. N\u00e4r en anv\u00e4ndare f\u00f6rs\u00f6ker bes\u00f6ka example.com<\/strong> g\u00f6r webbl\u00e4saren en f\u00f6rfr\u00e5gan till servern och ber om all n\u00f6dv\u00e4ndig information f\u00f6r att visa den specifika webbsidan. Servern svarar omedelbart genom att ge webbl\u00e4saren en fullst\u00e4ndigt renderad sida.<\/p>\n S\u00f6kmotorer ingriper och indexerar information som tillhandah\u00e5lls av servern innan den n\u00e5r webbl\u00e4saren; detta kallas s\u00f6kmotoroptimering (SEO). Webbl\u00e4saren l\u00f6ser sedan upp JavaScript-inneh\u00e5llet och webbsidan visas f\u00f6r anv\u00e4ndaren.<\/p>\n Problemet med SSR-metoden \u00e4r att det tar l\u00e5ng tid att ladda in en fullt renderad sida fr\u00e5n servern. Detta skapar inte en trevlig anv\u00e4ndarupplevelse. Det \u00e4r d\u00e4rf\u00f6r som utvecklare \u00f6verv\u00e4ger SPA: er och rendering p\u00e5 klientsidan.<\/p>\n\n Klientside-rendering g\u00f6r att webbl\u00e4saren f\u00e5r allt som den beh\u00f6ver f\u00f6r att rendera webbsidan fr\u00e5n klientsidan i st\u00e4llet f\u00f6r att ta emot en helt renderad sida fr\u00e5n servern. N\u00e4r sidan \u00e4r laddad s\u00e5 skickar webbl\u00e4saren inga andra f\u00f6rfr\u00e5gningar till servern. Detta g\u00f6r att surfupplevelsen blir extremt snabb.<\/p>\n Rendering p\u00e5 klientsidan bidrog till skapandet av SPA: er och revolutionerade webben. Du kan skapa en webbplats som inte kr\u00e4ver att sidan laddas om. Detta g\u00e4ller oavsett hur m\u00e5nga l\u00e4nkar som du klickar p\u00e5. Det g\u00f6r det enkelt f\u00f6r anv\u00e4ndaren att navigera p\u00e5 webbplatsen.<\/p>\n \u00c4ven om SPA: er \u00e4r fantastiska s\u00e5 har detta tillv\u00e4gag\u00e5ngss\u00e4tt en hel del komplexitet och problem som vi kommer att ta upp idag. Inertia tar itu med majoriteten av dessa problem genom att effektivt utnyttja serverside-ramverk. Den kombinerar de b\u00e4sta egenskaperna hos b\u00e5de server- och klientsidiga appar.<\/p>\n Inertia \u00e4r inte ett ramverk f\u00f6r JavaScript<\/a>. Det \u00e4r ist\u00e4llet en strategi eller teknik f\u00f6r att utveckla SPA: er. Den g\u00f6r det m\u00f6jligt f\u00f6r utvecklaren att anv\u00e4nda nuvarande serverbaserade ramverk f\u00f6r att bygga ett modernt SPA. Detta kan g\u00f6ras utan den vanliga komplexiteten.<\/p>\n Inertia har utformats f\u00f6r att f\u00f6lja med, inte ers\u00e4tta, de ramverk som du redan anv\u00e4nder. Se det som en hj\u00e4lpsam allierad som hj\u00e4lper dig att utf\u00f6ra uppgifter snabbare och effektivare. Det st\u00f6der f\u00f6r n\u00e4rvarande tre frontend-ramverk (Vue, React och Svelte) f\u00f6r rendering p\u00e5 klientsidan. Det st\u00f6der \u00e4ven tv\u00e5 backend-ramverk (Laravel och Rails) f\u00f6r rendering p\u00e5 serversidan.<\/p>\n F\u00f6r de flesta Laravel-utvecklare<\/a>\u00a0s\u00e5 \u00e4r Inertia en av de mest tillf\u00f6rlitliga teknikerna f\u00f6r att konstruera SPA:er. Detta beror p\u00e5 att den g\u00f6r det m\u00f6jligt att b\u00e5de ansluta frontend- och backend-ramverk.<\/p>\n Inertia liknar Vue Router i det avseendet att det g\u00f6r det m\u00f6jligt att flytta mellan sidor utan att beh\u00f6va ladda om hela sidan. Ramverket fungerar dock i synk med ditt ramverk p\u00e5 serversidan. Detta \u00e4r m\u00f6jligt tack vare\u00a0 N\u00e4r en bes\u00f6kare bes\u00f6ker example.com<\/strong> f\u00f6r f\u00f6rsta g\u00e5ngen s\u00e5 utf\u00f6r webbl\u00e4saren en vanlig helsidesf\u00f6rfr\u00e5gan. Servern returnerar ett fullst\u00e4ndigt HTML-svar som om Inertia inte fanns. HTML-svaret inneh\u00e5ller alla webbplatstillg\u00e5ngar (CSS, JavaScript), men inneh\u00e5ller \u00e4ven en extra tillg\u00e5ng f\u00f6r Inertia. Tillg\u00e5ngen \u00e4r roten N\u00e4r appen v\u00e4l har startat upp s\u00e5 kommer varje s\u00f6kv\u00e4g som anv\u00e4ndaren bes\u00f6ker inom samma dom\u00e4n med hj\u00e4lp av \u00c5terkopplingen kommer att komma som ett JSON-svar med sidans inneh\u00e5ll, snarare \u00e4n ett fullst\u00e4ndigt HTML-svar som vid det f\u00f6rsta bes\u00f6ket.<\/p>\n Inertia l\u00f6ser ett stort antal problem f\u00f6r webbutvecklare. M\u00e5let med att skapa Inertia var att ge snabba och effektiva l\u00f6sningar p\u00e5 all den komplexitet som f\u00f6ljer med utformningen av en SPA.<\/p>\n Om utvecklare skulle bygga en SPA utan Inertia s\u00e5 skulle de beh\u00f6va skapa REST- eller GraphQL-API: er. De skulle sedan beh\u00f6va skydda dem med n\u00e5gon form av autentiseringsmetod. Som ett resultat av detta s\u00e5 skulle det kr\u00e4vas att man skapar ett system f\u00f6r tillst\u00e5ndshantering i frontend, bland m\u00e5nga andra saker.<\/p>\n Inertia utformades f\u00f6r att hj\u00e4lpa utvecklare att omvandla sina serverbaserade applikationer som k\u00f6rs p\u00e5 backend-servern till en JavaScript-applikation med en enda sida. Detta utan att beh\u00f6va g\u00e5 igenom alla de komplexa problem som f\u00f6ljer med att bygga SPA: er.<\/p>\n Att skapa en SPA med hj\u00e4lp av Inertia liknar skapandet av en serverside-rendered app. Du skapar kontrollanter, g\u00f6r f\u00f6rfr\u00e5gningar till databasen f\u00f6r att f\u00e5 de n\u00f6dv\u00e4ndiga uppgifterna och returnerar sedan resultaten till vyerna.<\/p>\n Nyckeln h\u00e4r \u00e4r att vyerna \u00e4r JavaScript-komponenter. Detta inneb\u00e4r att du h\u00e4mtar data fr\u00e5n servern och att Inertia sedan samarbetar med frontend-ramverket f\u00f6r att visa sidan med data som en JavaScript-fil. Detta eliminerar behovet av att skapa API: er.<\/p>\n Eftersom Inertia f\u00f6rser applikationen med data och svar fr\u00e5n backend s\u00e5 kommer den helt enkelt att anv\u00e4nda det autentiseringssystem som du har p\u00e5 serversidan. Detta inneb\u00e4r att du inte beh\u00f6ver oroa dig f\u00f6r autentisering p\u00e5 klientsidan. Du har ist\u00e4llet ett sessionsbaserat autentiseringssystem som synkroniseras med ditt autentiseringssystem p\u00e5 serversidan.<\/p>\n Vi f\u00f6rklarade detta tidigare ang\u00e5ende serverside-rendering men kan ta det igen. S\u00f6kmotorerna avlyssnar serverns svar till webbl\u00e4saren f\u00f6r att indexera webbsidans HTML-inneh\u00e5ll. N\u00e4r det g\u00e4ller SPA s\u00e5 s\u00e5 kommer s\u00f6kmotorerna att ha sv\u00e5rt att identifiera sidans inneh\u00e5ll. Detta beror p\u00e5 att servern antingen svarar med JavaScript-komponenter eller JSON-data.<\/p>\n Men Inertia l\u00f6ste detta problem genom att inf\u00f6ra funktionen f\u00f6r serverside-rendering (SSR)<\/a> som du kan l\u00e4gga till i din applikation. Inertia anv\u00e4nder Node.js-milj\u00f6n som en utl\u00f6sare f\u00f6r att konvertera JSON-datasvaret till HTML.<\/p>\n F\u00f6r att illustrera detta b\u00e4ttre s\u00e5 kan du t\u00e4nka dig att Inertia sitter mellan servern och webbl\u00e4saren och tittar p\u00e5. N\u00e4r servern tar emot en Inertia-f\u00f6rfr\u00e5gan och returnerar ett JSON-svar s\u00e5 uppt\u00e4cker Inertia att det finns en Node.js-server. Ramverket omvandlar JSON-svaret till HTML och returnerar det, vilket g\u00f6r att s\u00f6kmotorerna kan indexera sidan som om applikationen inte vore en SPA.<\/p>\n Inertia tillhandah\u00e5ller \u00e4ven en H\u00e4r \u00e4r ett annat exempel fr\u00e5n Inertias online-dokumentation<\/a>:<\/p>\n Det \u00e4r m\u00f6jligt att skicka in ett standardformul\u00e4r n\u00e4r man anv\u00e4nder Inertia. Om du g\u00f6r detta s\u00e5 kommer dock hela sidan att uppdateras.<\/p>\n Inertia g\u00f6r det m\u00f6jligt f\u00f6r anv\u00e4ndarna att g\u00f6ra formul\u00e4rf\u00f6rfr\u00e5gningar med hj\u00e4lp av Inertia. Som ett resultat s\u00e5 beh\u00f6ver sidan inte uppdateras. N\u00e4r formul\u00e4ret skickas in med Inertia s\u00e5 hanteras det p\u00e5 serversidan. Detta g\u00f6r att du kan omdirigera anv\u00e4ndaren tillbaka till samma sida (eller en helt annan sida).<\/p>\n Inertia g\u00f6r v\u00e5ra liv enklare n\u00e4r vi skapar och skickar in formul\u00e4r. H\u00e4r \u00e4r ett exempel p\u00e5 hur du kan anv\u00e4nda det med Vue.js 3 composition API:<\/p>\n Du kan skicka in formul\u00e4ret med Inertias formul\u00e4rhj\u00e4lpare erbjuder \u00e4ven n\u00e5gra anv\u00e4ndbara egenskaper, exempelvis egenskapen Du kan \u00e4ven anv\u00e4nda L\u00e5t oss s\u00e4ga att en anv\u00e4ndare fyller i ett formul\u00e4r p\u00e5 din webbplats och best\u00e4mmer sig f\u00f6r att navigera vidare till en annan sida innan han eller hon skickar in formul\u00e4ret. N\u00e4r de \u00e5terv\u00e4nder till formul\u00e4rsidan s\u00e5 kommer anv\u00e4ndarens formul\u00e4rinmatning att \u00e5terst\u00e4llas.<\/p>\n Som tur \u00e4r s\u00e5 har Inertia funktionen Du kan anv\u00e4nda den h\u00e4r funktionen genom att importera den fr\u00e5n Inertia och till\u00e4mpa den p\u00e5 ditt formul\u00e4r:<\/p>\n Om du har en sida med m\u00e5nga formul\u00e4r som anv\u00e4nder funktionen Vi beh\u00f6ver inte anv\u00e4nda funktionen Det fina med den h\u00e4r funktionen \u00e4r att du kan komma ih\u00e5g alla data i din applikation manuellt. Detta kan \u00e4ven vara anv\u00e4ndbart f\u00f6r att \u00f6verf\u00f6ra data fr\u00e5n en djupt inb\u00e4ddad komponent till huvudkomponenten:<\/p>\n Inertia uppt\u00e4cker om formul\u00e4ret inneh\u00e5ller filer och omvandlar i s\u00e5 fall f\u00f6rfr\u00e5gningsdata till Vi t\u00e4nker oss att en anv\u00e4ndare skickar in ett formul\u00e4r med felaktiga v\u00e4rden och det skickas till servern f\u00f6r validering. D\u00e5 returnerar du anv\u00e4ndaren till formul\u00e4rsidan med en flash av valideringsfel i sessionen. Inertia f\u00e5ngar upp fel fr\u00e5n sessionen och sparar dem som sidprops.<\/p>\n Eftersom props \u00e4r reaktiva s\u00e5 visas de n\u00e4r formul\u00e4rs\u00e4ndningen \u00e4r klar. F\u00f6r att Inertia ska kunna uppt\u00e4cka f\u00f6rekomsten av fel s\u00e5 h\u00e5ller den ett \u00f6ga p\u00e5 N\u00e4r den har hittat fel s\u00e5 ger den sedan en H\u00e4r \u00e4r ett exempel med Vue 3 f\u00f6r att hj\u00e4lpa dig att f\u00f6rst\u00e5 konceptet:<\/p>\n Det \u00e4r lika enkelt att visa fel som att definiera dem som props och visa dem villkorligt i din HTML:<\/p>\n N\u00e4r du anv\u00e4nder Inertia s\u00e5 beh\u00f6ver du inte oroa dig f\u00f6r gammal inmatningsdata vid eventuella fel. N\u00e4r Inertia uppt\u00e4cker att anv\u00e4ndaren har omdirigerats till sidan med fel, bevarar den automatiskt komponentens gamla tillst\u00e5nd f\u00f6r Inertias funktionalitet f\u00f6r partiell omladdning \u00e4r utm\u00e4rkt eftersom det bara laddar om en vald komponent p\u00e5 sidan. Det h\u00e4mtar allts\u00e5 inte hela datam\u00e4ngden fr\u00e5n servern igen. Detta tar din applikationsoptimering till n\u00e4sta niv\u00e5. Du kan \u00e4ven bes\u00f6ka f\u00f6ljande l\u00e4nk f\u00f6r att l\u00e4ra dig mer om hur du optimerar din Laravel-applikation\u2019s prestanda<\/a>.<\/p>\n Partiell omladdning kan utf\u00f6ras genom att anv\u00e4nda Inertia\u2019s egenskap Underdom\u00e4ner, eller externa omdirigeringar, \u00e4r en av de mest frustrerande utmaningarna med SPA: er. Det \u00e4r irrationellt att f\u00f6rv\u00e4nta sig att din applikation ska f\u00f6rbli en enkelsides-applikation samtidigt som du bes\u00f6ker en annan dom\u00e4n.<\/p>\n Det kan vara n\u00f6dv\u00e4ndigt att omdirigera en Inertia-f\u00f6rfr\u00e5gan till en extern webbplats. Till och med till en annan slutpunkt som inte tillh\u00f6r Inertia i din app. Detta \u00e4r m\u00f6jligt genom ett serverinitierat bes\u00f6k p\u00e5 Om du \u00f6ppnar konsolen n\u00e4r du testar detta s\u00e5 kommer du att se att den returnerar Att arbeta med Inertia liknar arbetet med en applikation p\u00e5 serversidan. Undantaget \u00e4r att det \u00e4r en helt reaktiv enkelsidesapplikation. Du b\u00f6r kunna definiera dina routes, anpassa kontrollanter och returnera en vy som Inertia kan skicka till ditt frontend-ramverk.<\/p>\n Laravel-routing \u00e4r inget som du b\u00f6r ge upp n\u00e4r du utvecklar din applikation. Det g\u00f6r att du snabbt kan konstruera de mest komplexa routes, och det finns gott om kostnadsfria och betalda Laravel-resurser<\/a> d\u00e4r ute som kan hj\u00e4lpa dig att l\u00e4ra dig mer om Laravel och hur routing fungerar.<\/p>\n Det fina h\u00e4r \u00e4r att du inte beh\u00f6ver Vue Router eller React Router f\u00f6r att utf\u00f6ra enkel routing p\u00e5 klientsidan. Inertia har n\u00e4mligen sitt eget routing-system som fungerar med Laravel-routing. Om jobbet inte kr\u00e4ver n\u00e5gra backend-data s\u00e5 kan du anv\u00e4nda routerhj\u00e4lpen f\u00f6r att dirigera direkt till en komponent.<\/p>\n Innan vi g\u00e5r vidare s\u00e5 vill vi presentera DevKinsta<\/a>. Det \u00e4r ett kraftfullt verktyg f\u00f6r utvecklare, designers och agenturer som g\u00f6r det m\u00f6jligt att skapa WordPress-webbappar med en eller flera sidor. WordPress kan lyckligtvis integreras med Laravel med hj\u00e4lp av Corcel<\/a>-paketet. Om du bygger en Laravel-app med WordPress-integrering, kolla in Kinsta APM-verktyget<\/a> f\u00f6r en extraordin\u00e4r prestanda\u00f6vervakning.<\/p>\n Du b\u00f6r alltid omdirigera anv\u00e4ndaren till r\u00e4tt s\u00f6kv\u00e4g som motsvarar det ursprungliga beg\u00e4randet. Om en anv\u00e4ndare exempelvis skickar in ett inl\u00e4gg till Hittills har vi fokuserat p\u00e5 flera f\u00f6rdelar med att anv\u00e4nda Inertia. Men som med alla verktyg s\u00e5 har Inertia ocks\u00e5 nackdelar.<\/p>\n F\u00f6r att svara p\u00e5 fr\u00e5gan om du b\u00f6r anv\u00e4nda Inertia eller inte \u00e4r svaret ja. Iallafall om du vill bygga en enkelsidig, serverbaserad, SEO-driven modern app.<\/p>\n Du kan l\u00e4ra dig mer genom att bes\u00f6ka den officiella webbplatsen f\u00f6r Inertia.js<\/a> och l\u00e4sa dokumentationen.<\/p>\n\n Klientbaserade appar och SPA: er blir alltmer popul\u00e4ra i takt med att webbtekniken utvecklas. Traditionella serverbaserade program har b\u00f6rjat falla bort. Nu \u00e4r det med andra ord viktigare \u00e4n n\u00e5gonsin att ha r\u00e4tt verktyg till hands.<\/p>\n Inertia \u00e4r ett fantastiskt modernt tillv\u00e4gag\u00e5ngss\u00e4tt eller en l\u00f6sning f\u00f6r utvecklare p\u00e5 serversidan f\u00f6r att bygga enkelsidiga appar. Det l\u00f6ser s\u00e5 m\u00e5nga problem och sparar s\u00e5 mycket tid.<\/p>\n Som vi diskuterade i v\u00e5r artikel s\u00e5 har Inertia numera st\u00f6d f\u00f6r serverside-rendering. Detta tar verktyget till en helt ny niv\u00e5 genom att l\u00e5ta utvecklare skapa SEO-drivna SPA: er.<\/p>\n Inertia f\u00e5r \u00e4ven mycket k\u00e4rlek fr\u00e5n sitt community. Utvecklingsarbetet sponsras av Laravel Forge, Laracasts och ett antal andra fina organisationer. Som ett resultat av detta s\u00e5 \u00e4r Inertia ett p\u00e5litligt verktyg. Det kommer att f\u00f6rb\u00e4ttras och underh\u00e5llas i framtiden f\u00f6r Laravel-utvecklare<\/a>, s\u00e4rskilt eftersom efterfr\u00e5gan p\u00e5 Laravel-kodare<\/a> forts\u00e4tter att \u00f6ka.<\/p>\n![\"Visning](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/09\/server-side-rendering-diagram.png\")
Vad \u00e4r Klientside rendering?<\/h2>\n
![\"Visning](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/09\/client-side-rendering-diagram.png\")
Vad \u00e4r Inertia.js?<\/h2>\n
Hur fungerar Inertia.js?<\/h2>\n
Link<\/code>, en wrapper f\u00f6r den vanliga ankartaggen. N\u00e4r man klickar p\u00e5 Link<\/code>\u00a0s\u00e5 f\u00e5ngar Inertia upp klickh\u00e4ndelsen och skickar en XHR-f\u00f6rfr\u00e5gan till servern. Som ett resultat s\u00e5 k\u00e4nner servern igen att detta \u00e4r en Inertia-f\u00f6rfr\u00e5gan och returnerar ett JSON-svar. Svaret inneh\u00e5ller JavaScript-komponentens namn och data. Efter detta s\u00e5 tar Inertia p\u00e5 magisk v\u00e4g bort on\u00f6diga komponenter och ers\u00e4tter dem med de som kr\u00e4vs f\u00f6r att bes\u00f6ka den nya sidan och uppdaterar historikstatusen.<\/p>\nEn djupdykning i Inertia.js funktionalitet<\/h3>\n
div<\/code> med attributet data-page<\/code> som inneh\u00e5ller JSON-data f\u00f6r den f\u00f6rsta sidan. Inertia anv\u00e4nder sedan dessa JSON-data f\u00f6r att starta frontend-ramverket och visa den f\u00f6rsta sidan.<\/p>\n![\"Inertia.js:](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/09\/Inertia-visit-initial-page.png\")
Link<\/code> att vara en XHR-f\u00f6rfr\u00e5gan med X-Inertia<\/code> -huvudet. Detta talar om f\u00f6r servern att detta \u00e4r en Inertia-f\u00f6rfr\u00e5gan.<\/p>\n![\"Inertia.js:](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/09\/Inertia-visit-route-in-the-same-domain.png\")
Vilka problem l\u00f6ser Inertia.js?<\/h2>\n
SPA-komplexitet<\/h3>\n
Autentisering<\/h3>\n
SEO-fr\u00e5gor<\/h3>\n
Head<\/code> -komponent som g\u00f6r det m\u00f6jligt att l\u00e4gga till en titel och metadata till din sida:<\/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\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>\nFormul\u00e4r och Formul\u00e4rhj\u00e4lpare<\/h3>\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>\nGET<\/code>, POST<\/code>, PUT<\/code>, PATCH<\/code> och 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>\nprocessing<\/code>. Den f\u00f6rvandlas till true<\/code> n\u00e4r formul\u00e4ret b\u00f6rjar bearbetas. Detta kan anv\u00e4ndas f\u00f6r att inaktivera inl\u00e4mningsknapparna medan formul\u00e4ret bearbetas f\u00f6r att f\u00f6rhindra flera inl\u00e4mningar:<\/p>\n\n<button type=\"submit\" :disabled=\"form.processing\">Submit<\/button>\n<\/code><\/pre>\npreserveState<\/code>, preserveScroll<\/code> och event callbacks med formul\u00e4ret. Detta kan vara till hj\u00e4lp n\u00e4r du l\u00e4gger till ytterligare alternativ till formul\u00e4ret:<\/p>\n\nform.post('kinsta\/login, {\n preserveScroll: true,\n onSuccess: () => form.reset('password'),\n})\n<\/code><\/pre>\nMinns tillst\u00e5nd med Inertia.js<\/h3>\n
useRemember<\/code>. Den g\u00f6r att du kan spara anv\u00e4ndarens formul\u00e4rinmatningar i historiktillst\u00e5ndet och \u00e5terst\u00e4lla dem vid historisk navigering.<\/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>\nuseRemember<\/code>\u00a0s\u00e5 m\u00e5ste varje komponent ha en unik nyckel. D\u00e5 vet Inertia vilka data som ska \u00e5terst\u00e4llas i varje komponent:<\/p>\n\nconst form = useRemember({\n first_name: null,\n last_name: null,\n }, 'Users\/Create')\n<\/code><\/pre>\nuseRemember<\/code> n\u00e4r vi anv\u00e4nder Inertia\u2019s formul\u00e4rhj\u00e4lpare. Inertia kommer att komma ih\u00e5g formul\u00e4rinmatningens tillst\u00e5nd automatiskt, s\u00e5 vi beh\u00f6ver bara ange en unik identifierare:<\/p>\n\nimport { useForm } from '@inertiajs\/inertia-vue3'\n\nconst form = useForm('CreateUser', data)\n<\/code><\/pre>\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>\nUppladdning av filer<\/h3>\n
formData<\/code> -objektet, vilket alltid kr\u00e4vs. Om du har ett formul\u00e4r som inneh\u00e5ller ett namn och en avatar s\u00e5 behandlar Inertia formul\u00e4ret som multipart\/form-data<\/code>.<\/p>\nValidering och fel<\/h3>\n
page.props.errors<\/code>.<\/p>\nonError()<\/code>-callback i st\u00e4llet f\u00f6r onSuccess()<\/code>.<\/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\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>\nPOST<\/code>, PUT<\/code>, PATCH<\/code> och DELETE<\/code>.<\/p>\nPartiell omdirigering med Inertia.js<\/h3>\n
only<\/code>:<\/p>\n\nimport { Inertia } from '@inertiajs\/inertia'\n\nInertia.visit(url, {\n only: ['users'],\n})\n<\/code><\/pre>\nExterna omdirigeringar med Inertia.js<\/h3>\n
window.location<\/code>:<\/p>\n\nreturn Inertia::location($url);\n<\/code><\/pre>\n409 conflict<\/code>. Svaret inneh\u00e5ller webbadressen i X-Inertia-Location<\/code>-huvudet, vilket Inertia kommer att uppt\u00e4cka p\u00e5 klientsidan och utf\u00f6ra bes\u00f6ket automatiskt.<\/p>\nHur man arbetar med Inertia.js<\/h2>\n
Laravel-routes och Inertia.js<\/h3>\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>\nOmdirigeringar<\/h3>\n
store<\/code>-slutpunkten, se till att omdirigera kunden till GET<\/code>-slutpunkten och kanske till post-routen.<\/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>\nNackdelar med att anv\u00e4nda Inertia.js<\/h2>\n
\n
B\u00f6r du anv\u00e4nda Inertia.js?<\/h2>\n
Sammanfattning<\/h2>\n