Single-side søknaden
Fordi SPA er en utvikling bort fra den statsløse side-tegne modell som nettlesere opprinnelig ble laget for, noen nye utfordringer har dukket opp. Mulige løsninger (av varierende kompleksitet, omfang, og forfatteren kontroll) inkluderer:
- Klient-side JavaScript-biblioteker.
- Server-side web-rammeverk som spesialiserer seg i SPA-modell.
- utviklingen av nettlesere og HTML5-spesifikasjonen, som er designet til SPA-modell.,
Søk-motor optimizationEdit
på Grunn av mangel på kjøring av JavaScript på søkeroboter av noen populære Web søkemotorer, SEO (Search engine optimization) har historisk presentert et problem for offentlige møter nettsteder som ønsker å vedta SPA-modell.
Mellom 2009 og 2015, Google Webmaster Central foreslått og deretter anbefales en «AJAX gjennomgang ordningen» ved hjelp av en innledende utropstegn i fragment identifikatorer for stateful AJAX sider (#!)., Spesiell atferd må iverksettes av SPA-området for å tillate utvinning av relevante metadata av søkemotoren»s-søkeroboten. For søkemotorer som ikke støtter denne URL-hash-ordningen, den kryptert Nettadresser av SPA forbli usynlig. Disse «hash-bang» Uri har vært ansett som problematisk av en rekke forfattere, inkludert Jeni Tennison på W3C fordi de lager sider utilgjengelige for de som ikke har JavaScript aktivert i nettleseren. De kan også bryte HTTP referer overskrifter som nettlesere er ikke tillatt å sende fragment identifikator i den Referer topptekst., I 2015, Google fraråder sine hash-bang AJAX gjennomgang forslaget.
Alternativt, programmer kan gjengi den første siden belastningen på serveren og påfølgende side-oppdateringer på klienten. Dette er tradisjonelt vanskelig, fordi gjengivelse koden kanskje må være skrevet på et annet språk eller en ramme på server og klient. Ved hjelp av logikk-mindre maler, cross-kompilering fra ett språk til et annet, eller å bruke det samme språket på serveren og klienten kan bidra til å øke mengden av kode som kan være felles.,
I 2018, Google introduserte dynamisk gjengivelse som et annet alternativ for nettsteder som ønsker å tilby søkeroboter et ikke-JavaScript tung versjon av en side for indeksering formål. Dynamisk gjengivelse veksler mellom en versjon av en side som er gjengitt klient-side og en pre-rendret versjon for spesifikke brukeren agenter. Denne tilnærmingen innebærer web-server for å oppdage søkeroboter (via user agent) og legge dem til en gjengivelse, som de er så serveres en enklere versjon av HTML-innhold.,
Fordi SEO kompatibilitet er ikke uvesentlig i SPAs, det er verdt å merke seg at SPAs er vanligvis ikke brukes i en sammenheng hvor søkemotor indeksering er enten et krav, eller ønskelig. Bruk tilfeller inkluderer programmer som overflaten private data skjult bak et system for godkjenning. I de tilfeller hvor disse applikasjonene er forbruker produkter, som ofte er en klassisk «side tegne» – modellen brukes for programmer destinasjonssiden og markedsføring av nettstedet ditt, noe som gir nok meta data for program skal vises som et treff på et søk på søkemotoren., Blogger, støtte fora og andre tradisjonelle side tegne gjenstander ofte sitte rundt et SPA som kan frø søkemotorer med relevante vilkår.
en Annen metode som brukes av server-sentriske web-rammeverk som Java-basert ItsNat er til å gjengi alle hypertext på serveren ved å bruke det samme språket og templating-teknologi. I denne tilnærmingen, server vet med presisjon DOM staten på klienten, noen stor eller liten side oppdatering kreves er generert i serveren, og transporteres med Ajax, nøyaktig JavaScript-kode for å få klienten side til den nye staten gjennomføring av DOM-metoder., Utviklere kan bestemme hvilken side som stater må være kan gjennomsøke av web edderkopper for SEO og være i stand til å generere de nødvendige staten ved belastning tid å generere vanlig HTML i stedet for JavaScript. I tilfelle av ItsNat rammeverk, dette er automatisk fordi ItsNat holder klienten DOM treet i serveren som en Java W3C DOM-treet; gjengivelse av denne DOM treet i serveren genererer vanlig HTML ved innlasting og JavaScript DOM handlinger for Ajax forespørsler., Denne dualiteten er svært viktig for SEO fordi utviklere kan bygge med samme Java-kode og ren HTML-basert templating ønsket DOM staten server; på side legg i tid, vanlig HTML-koden er generert av ItsNat å gjøre denne DOM state-SEO-kompatibel.
Som i versjon 1.,3, ItsNat gir en ny statsløse modus, og klienten DOM er ikke holdt på serveren, fordi, med statsløse modus klient, DOM staten er delvis eller fullstendig rekonstruert på serveren ved behandling av noen Ajax forespørsel basert på nødvendige data som sendes av klienten meddeler server av dagens DOM staten; statsløse modus kan også SEO-kompatibel SEO fordi kompatibilitet skjer ved innlasting av den første siden upåvirket av stateful eller statsløse moduser., En annen mulig valg rammer som PreRender, Puppeteer, Rendertron som enkelt kan integreres i ethvert nettsted som mellomvare med web-server konfigurasjon slik at bot forespørsler (google bot og andre) til å bli servert av mellomvare, mens ikke-bot forespørsler serveres som vanlig. Disse rammeverkene, cache relevante nettsider med jevne mellomrom for å tillate nyeste versjonene være tilgjengelig for søkemotorer. Disse rammeverkene har blitt offisielt godkjent av google.
Det er et par måter å gjøre det ser ut som om nettstedet kan gjennomsøke., Både innebære å opprette egne HTML-sider som kan speile innholdet på SPAET. Serveren kan lage en HTML-basert versjon av nettstedet og leverer det som er til søkerobotene, eller det er mulig å bruke en hodeløs nettleser som PhantomJS å kjøre JavaScript-program og-utgang og den resulterende HTML.
Begge disse krever ganske mye arbeid, og kan ende opp med å gi en vedlikehold hodepine for store komplekse nettsteder. Det er også potensielle SEO fallgruver. Hvis server-generert HTML er ansett for å være for forskjellig fra SPA-innhold, så vil området bli straffet., Kjører PhantomJS til utgang HTML-kan forsinke responsen hastigheten på sidene, noe som søkemotorene – Google i særdeleshet – nedgradere rangeringen.
Klient/server-kode partitioningEdit
En måte å øke mengden av kode som kan deles mellom servere og klienter på, er å bruke en logikk-mindre mal språk som Bart eller Styret. Slike maler kan gjengis fra ulike vert språk som Ruby på serveren, og JavaScript på klienten., Men, bare å dele maler som vanligvis krever duplisering av forretningslogikk brukes til å velge den riktige maler og fylle dem med data. Gjengivelse fra maler kan ha negative ytelse effekter når du bare oppdaterer en liten del av side—for eksempel verdien av en ordbok innenfor et stort mal. Å erstatte en hel mal kan også forstyrre en bruker»s utvalg eller markøren, hvor bare oppdaterer den endrede verdien kan ikke., For å unngå disse problemene, programmer kan bruke UI data bindinger eller kornet DOM-manipulasjon for å bare oppdatere de aktuelle deler av siden, i stedet for re-gjengivelse hele maler.
Nettleser historyEdit
Med en SPA som det per definisjon i en enkelt side», modellen bryter browser»s design for siden historie operering ved bruk av «forward» – eller «tilbake» – knappene., Dette gir en brukervennlighet hinder når en bruker trykker på tilbake-knappen, forventer den forrige skjermen staten i BOBLEBADET, men i stedet, programmet»s enkelt side losser og forrige side i nettleseren»s historie er presentert.
Den tradisjonelle løsningen for SPAs har vært å endre nettleseren din URL»s hash-fragment-id i samsvar med den gjeldende skjermen staten. Dette kan oppnås med JavaScript, og fører til URL-logg hendelser til å bli bygget opp i nettleseren., Så lenge SPA er i stand til å gjenopplive den samme skjermen staten fra informasjon som finnes i URL-hash, forventet tilbake-knappen atferd er beholdt.
for ytterligere Å løse dette problemet, HTML5-spesifikasjonen har innført pushState og replaceState gir programmatisk tilgang til den faktiske URL-adressen og-nettleseren historie.
AnalyticsEdit
analyseverktøy som Google Analytics stole tungt på hele det nye sidene dine lastes inn i nettleseren, initiert av en ny side lastes. SPAs ikke arbeider på denne måten.,
Etter at den første siden lastes inn, vil alle etterfølgende side og innhold endringer håndteres internt av programmet, som skal rett og slett kalle en funksjon for å oppdatere analytics-pakken. Å unnlate å ringe sa funksjon, nettleseren aldri utløser en ny side lastes, ingenting blir lagt til nettleserens historikk, og analytics-pakken har ingen anelse om hvem som gjør hva på nettstedet.
Legge til side lastes inn til en SPAEdit
Det er mulig å legge til side legg hendelser til et SPA med HTML5 historie API; dette vil bidra til å integrere analytics., Vanskeligheten kommer i å håndtere dette, og sørge for at alt blir spores riktig – dette innebærer å sjekke for manglende rapporter og doble oppføringer.Noen rammer som gir open source analytics integrasjoner å ta opp de fleste av de store analytics leverandører. Utviklere kan integrere dem inn i programmet og sørge for at alt fungerer som det skal, men det er ingen grunn til å gjøre alt fra scratch.
Hastighet for første loadEdit
Single-Side-Programmer har en tregere første side belastning enn server-baserte applikasjoner., Dette er fordi den første lasten har for å få ned de rammer og program-koden før rendering nødvendig vis som HTML-kode i nettleseren. En server-basert program, har bare for å presse ut den nødvendige HTML til leseren å redusere ventetid og laste ned tiden.
Påskynde side loadEdit
Det er noen måter å fremskynde den første belastningen av en SPA, for eksempel en tung tilnærming til å caching og lat-lasting-moduler ved behov., Men det er ikke mulig å komme bort fra det faktum at det er behov for å laste ned den framework, i det minste noen av programkoden, og vil mest sannsynlig treffe en API for data før vise noe i nettleseren. Dette er en «betale meg nå, eller betale meg senere» trade-off scenario. Spørsmålet om ytelse og vent-tider er fortsatt en beslutning om at utbygger må gjøre.