Enkelsidigt program
eftersom SPA är en utveckling bort från den statslösa sidan-redraw-modellen som webbläsare ursprungligen utformades för, har några nya utmaningar uppstått. Möjliga lösningar (av varierande komplexitet, fullständighet och författarkontroll) inkluderar:
- JavaScript-bibliotek på klientsidan.
- webbramar på serversidan som är specialiserade på SPA-modellen.
- utvecklingen av webbläsare och HTML5-specifikationen, utformad för SPA-modellen.,
search-engine optimizationEdit
på grund av bristen på JavaScript utförande på sökrobotar av några populära sökmotorer, SEO (sökmotoroptimering) har historiskt presenterat ett problem för offentliga inför webbplatser som vill anta SPA-modellen.
Mellan 2009 och 2015 föreslog Google Webmaster Central och rekommenderade sedan ett ”AJAX-genomsökningsschema”med ett första utropstecken i fragmentidentifierare för stateful Ajax-sidor (#!)., Särskilt beteende måste genomföras av SPA-webbplatsen för att möjliggöra utvinning av relevanta metadata av sökmotorns sökrobot. För sökmotorer som inte stöder detta hash-schema för webbadresser förblir de hashade webbadresserna för SPA osynliga. Dessa” hash-bang ” Uri har ansetts vara problematiska av ett antal författare, inklusive Jeni Tennison på W3C eftersom de gör sidor otillgängliga för dem som inte har JavaScript aktiverat i sin webbläsare. De bryter också HTTP referenshuvuden eftersom webbläsare inte får skicka fragmentidentifieraren i Referenshuvudet., I 2015, Google föråldrade deras hash-bang Ajax krypa förslag.
alternativt kan Program göra den första sidladdningen på servern och efterföljande siduppdateringar på klienten. Detta är traditionellt svårt, eftersom renderingskoden kan behöva skrivas på ett annat språk eller ramverk på servern och i klienten. Med hjälp av logiska mallar, korssammanställning från ett språk till ett annat, eller med samma språk på servern och klienten kan bidra till att öka mängden kod som kan delas.,
i 2018 introducerade Google dynamisk rendering som ett annat alternativ för webbplatser som vill erbjuda sökrobotar en icke-JavaScript tung version av en sida för indexering. Dynamisk rendering växlar mellan en version av en sida som återges klientsidan och en förrenderad version för specifika användaragenter. Detta tillvägagångssätt innebär att din webbserver upptäcker sökrobotar (via användaragenten) och dirigerar dem till en renderare, från vilken de sedan serveras en enklare version av HTML-innehåll.,
eftersom SEO-Kompatibilitet inte är trivial i Spa, är det värt att notera att spa vanligtvis inte används i ett sammanhang där sökmotorindexering är antingen ett krav eller önskvärt. Använd kundcase inkluderar program som visar privata data dolda bakom ett autentiseringssystem. I de fall där dessa program är konsumentprodukter, används ofta en klassisk ”page redraw” – modell för applikationernas målsida och marknadsföringsplats, vilket ger tillräckligt med metadata för att programmet ska visas som en träff i en sökmotorfråga., Bloggar, supportforum, och andra traditionella sidan rita artefakter sitter ofta runt SPA som kan utsäde sökmotorer med relevanta villkor.
en annan metod som används av servercentrerade webbramar som Java-baserade ItsNat är att göra någon hypertext på servern med samma språk och mallteknik. I detta tillvägagångssätt vet servern med precision DOM-staten på klienten, alla stora eller små siduppdateringar som krävs genereras i servern och transporteras av Ajax, den exakta JavaScript-koden för att få klientsidan till den nya staten som utför DOM-metoder., Utvecklare kan bestämma vilka sidstater som måste genomsökas av webbspindlar för SEO och kunna generera det önskade tillståndet vid laddningstid som genererar vanlig HTML istället för JavaScript. I fallet med itsnat ramverket, detta är automatiskt eftersom ItsNat håller klienten dom träd i servern som en Java W3C DOM träd; rendering av denna DOM träd i servern genererar vanlig HTML vid laddningstid och JavaScript DOM åtgärder för Ajax förfrågningar., Denna dualitet är mycket viktigt för SEO eftersom utvecklare kan bygga med samma Java-kod och ren HTML-baserad mall den önskade DOM-staten i servern; vid sidladdningstid genereras konventionell HTML av ItsNat vilket gör denna DOM state SEO-kompatibel.
Från och med version 1.,3, itsnat ger en ny statslös läge, och klienten DOM hålls inte på servern eftersom, med statslösa läge klienten, DOM state är delvis eller helt rekonstrueras på servern vid behandling av någon Ajax begäran baserat på nödvändiga uppgifter som skickas av klienten informera servern om den aktuella DOM staten; statslösa läget kan också vara SEO-kompatibel eftersom SEO kompatibilitet händer vid laddningstiden för den ursprungliga sidan opåverkad av stateful eller statslösa lägen., Ett annat möjligt val är ramar som PreRender, Puppeteer, Rendertron som enkelt kan integreras i alla webbplatser som ett mellanprogram med webbserverkonfiguration som möjliggör botförfrågningar (google bot och andra) att betjänas av middleware medan icke-bot-förfrågningar serveras som vanligt. Dessa ramar cache de relevanta webbplatssidorna regelbundet så att de senaste versionerna vara tillgängliga för sökmotorer. Dessa ramar har officiellt godkänts av google.
det finns ett par lösningar för att få det att se ut som om webbplatsen är genomsökbar., Båda innebär att skapa separata HTML-sidor som speglar innehållet i SPA. Servern kan skapa en HTML – baserad version av webbplatsen och leverera det till sökrobotar, eller det är möjligt att använda en huvudlös webbläsare som PhantomJS för att köra JavaScript-programmet och mata ut den resulterande HTML.
båda kräver en hel del ansträngning, och kan sluta ge underhåll huvudvärk för de stora komplexa platserna. Det finns också potentiella SEO fallgropar. Om SERVERGENERERAD HTML anses vara för annorlunda än SPA-innehållet, kommer Webbplatsen att straffas., Att köra PhantomJS för att mata ut HTML kan sakta ner sidans svarshastighet, vilket är något för vilka sökmotorer – i synnerhet Google-nedgraderar rankingen.
Client/server code partitioningEdit
ett sätt att öka mängden kod som kan delas mellan servrar och klienter är att använda en logisk-mindre mallspråk som mustasch eller styret. Sådana mallar kan renderas från olika värdspråk, till exempel Ruby på servern och JavaScript i klienten., Men bara dela mallar kräver vanligtvis dubbelarbete av affärslogik som används för att välja rätt mallar och fylla dem med data. Rendering från mallar kan ha negativa prestandaeffekter när endast uppdatera en liten del av sidan—till exempel värdet av en textinmatning i en stor mall. Byte av en hel mall kan också störa en användares val eller markörposition, där uppdatering endast det ändrade värdet kanske inte., För att undvika dessa problem kan applikationer använda GRÄNSSNITTSDATABINDNINGAR eller granulär DOM-manipulation för att bara uppdatera lämpliga delar av sidan istället för att återge hela mallar.
Browser historyEdit
med ett SPA är, per definition, ”en enda sida”, bryter modellen webbläsaren”s design för sidhistorik navigering med hjälp av ”framåt” eller ”tillbaka” knapparna., Detta medför ett användbarhetshinder när en användare trycker på bakåtknappen och förväntar sig föregående skärmtillstånd inom SPA, men istället lossas applikationen”s enda sida och föregående sida i webbläsarens historia presenteras.
den traditionella lösningen för Spa har varit att ändra webbläsarens URL”s hash fragment identifier i enlighet med det aktuella skärmtillståndet. Detta kan uppnås med JavaScript, och orsakar URL historia händelser som ska byggas upp i webbläsaren., Så länge SPA kan återuppliva samma skärmtillstånd från information som finns i URL-hashen, behålls det förväntade bakåtknappsbeteendet.
för att ytterligare ta itu med problemet har HTML5-specifikationen infört pushState och replaceState som ger programmatisk åtkomst till den faktiska URL-och webbläsarhistoriken.
AnalyticsEdit
analysverktyg som Google Analytics är starkt beroende av att hela nya sidor laddas i webbläsaren, initierat av en ny sidbelastning. Spa fungerar inte så här.,
efter den första sidbelastningen hanteras alla efterföljande sid-och innehållsförändringar internt av programmet, vilket helt enkelt ska anropa en funktion för att uppdatera analytics-paketet. Misslyckas med att ringa nämnda funktion utlöser webbläsaren aldrig en ny sidbelastning, ingenting läggs till i webbläsarhistoriken och analytics-paketet har ingen aning om vem som gör vad på webbplatsen.
lägga till sidbelastningar till en SPAEdit
det är möjligt att lägga till sidladdningshändelser till ett SPA med hjälp av HTML5 history API; detta kommer att bidra till att integrera analytics., Svårigheten kommer att hantera detta och se till att allt spåras korrekt – det handlar om att kontrollera saknade rapporter och dubbla poster.Vissa ramverk tillhandahåller integreringar med öppen källkod som riktar sig till de flesta av de stora analysleverantörerna. Utvecklare kan integrera dem i programmet och se till att allt fungerar korrekt, men det finns ingen anledning att göra allt från början.
hastighet för initial loadEdit
enkelsidiga program har en långsammare förstasidig belastning än serverbaserade program., Detta beror på att den första belastningen måste ta ner ramverket och applikationskoden innan du gör den önskade vyn som HTML i webbläsaren. En serverbaserad applikation måste bara trycka ut den nödvändiga HTML-koden till webbläsaren, vilket minskar latensen och nedladdningstiden.
påskynda sidan loadEdit
det finns några sätt att påskynda den ursprungliga belastningen på ett SPA, till exempel en tung inställning till caching och lata laddningsmoduler när det behövs., Men det är inte möjligt att komma bort från det faktum att det behöver ladda ner ramverket, åtminstone en del av applikationskoden, och kommer sannolikt att slå ett API för data innan du visar något i webbläsaren. Detta är en ”betala mig nu, eller betala mig senare” avvägningsscenario. Frågan om prestanda och väntetider är fortfarande ett beslut som utvecklaren måste göra.