Toepassing met één pagina
omdat de SPA een evolutie is verwijderd van het staatloze paginahertekenmodel waarvoor browsers oorspronkelijk waren ontworpen, zijn er enkele nieuwe uitdagingen ontstaan. Mogelijke oplossingen (van verschillende complexiteit, volledigheid en auteurscontrole) zijn:
- Client-side JavaScript libraries.
- server-side web frameworks die gespecialiseerd zijn in het SPA-model.
- de evolutie van browsers en de HTML5-specificatie, ontworpen voor het SPA-model.,
Search-engine optimizationEdit
vanwege het ontbreken van JavaScript uitvoering op crawlers van sommige populaire web zoekmachines, SEO (Search engine optimization) heeft historisch gezien een probleem voor het publiek geconfronteerd websites die willen het SPA-model te nemen.
tussen 2009 en 2015 heeft Google Webmaster Central een “Ajax crawling scheme” voorgesteld en vervolgens aanbevolen met behulp van een eerste uitroepteken in fragment-identifiers voor stateful Ajax-pagina ‘ s (#!)., Speciaal gedrag moet worden geïmplementeerd door de SPA site om extractie van relevante metadata door de zoekmachine ‘ s crawler. Voor zoekmachines die dit url-hashschema niet ondersteunen, blijven de gehashte URL ‘ s van de SPA onzichtbaar. Deze “hash-bang” URI ’s zijn als problematisch beschouwd door een aantal schrijvers, waaronder Jeni Tennison bij de W3C omdat ze pagina’ s ontoegankelijk maken voor degenen die geen JavaScript geactiveerd hebben in hun browser. Ze breken ook HTTP referer headers als browsers zijn niet toegestaan om de fragment identifier in de Referer header te sturen., In 2015, Google afgekeurd hun hash-bang Ajax crawling voorstel.
als alternatief kunnen toepassingen de eerste paginabelasting op de server en daaropvolgende paginaupdates op de client genereren. Dit is van oudsher moeilijk, omdat de rendering code misschien in een andere taal of framework geschreven moet worden op de server en in de client. Het gebruik van logic-less templates, cross-compileren van de ene taal naar de andere, of het gebruik van dezelfde taal op de server en de client kan helpen om de hoeveelheid code die kan worden gedeeld verhogen.,
in 2018 introduceerde Google dynamic rendering als een andere optie voor sites die crawlers een niet-JavaScript zware versie van een pagina willen aanbieden voor indexeringsdoeleinden. Dynamische rendering schakelt tussen een versie van een pagina die is gerenderd client-side en een vooraf gerenderde versie voor specifieke user agents. Deze aanpak houdt in dat uw webserver crawlers detecteert (via de user agent) en ze routeert naar een renderer, van waaruit ze vervolgens een eenvoudigere versie van HTML-inhoud krijgen.,
omdat SEO-Compatibiliteit niet triviaal is in SBZ ‘s, is het vermeldenswaard dat SBZ’ s vaak niet worden gebruikt in een context waarin zoekmachine-indexering een vereiste of wenselijk is. Use cases zijn toepassingen die persoonlijke gegevens verborgen achter een authenticatiesysteem opduiken. In de gevallen waarin deze toepassingen zijn consumentenproducten, vaak een klassieke “pagina redraw” model wordt gebruikt voor de toepassingen landing page en marketing site, die voldoende meta gegevens voor de toepassing om te verschijnen als een hit in een zoekmachine query biedt., Blogs, support forums en andere traditionele pagina redraw artefacten zitten vaak rond de SPA die zoekmachines met relevante termen kunnen zaaien.
een andere benadering die wordt gebruikt door server-centric Web frameworks zoals de Java-gebaseerde ItsNat is om elke hypertekst op de server te renderen met behulp van dezelfde taal en templating technologie. In deze aanpak, de server Weet met precisie de DOM-status op de client, elke grote of kleine pagina-update vereist wordt gegenereerd in de server, en getransporteerd door Ajax, de exacte JavaScript-code om de client pagina naar de nieuwe staat uitvoeren DOM methoden., Ontwikkelaars kunnen beslissen welke pagina Staten moet worden crawleable door web spiders voor SEO en in staat zijn om de vereiste staat te genereren op laadtijd genereren van gewone HTML in plaats van JavaScript. In het geval van het itsnat framework is dit automatisch omdat ItsNat de client DOM-boom in de server houdt als een Java W3C DOM-boom; het renderen van deze Dom-boom in de server genereert platte HTML tijdens het laden en JavaScript DOM-acties voor Ajax-Verzoeken., Deze dualiteit is erg belangrijk voor SEO omdat ontwikkelaars kunnen bouwen met dezelfde Java-code en pure HTML-gebaseerde templating van de gewenste DOM status in server; bij het laden van de pagina, conventionele HTML wordt gegenereerd door ItsNat waardoor deze DOM staat SEO-compatibel.
vanaf versie 1.,3, ItsNat biedt een nieuwe stateless mode, en de client DOM wordt niet bewaard op de server, omdat, met de stateless mode client, DOM staat is gedeeltelijk of volledig gereconstrueerd op de server bij het verwerken van een Ajax-verzoek op basis van de vereiste gegevens verzonden door de client informeren van de server van de huidige DOM-status; de stateless mode kan ook SEO-compatibel omdat SEO-Compatibiliteit gebeurt bij het laden van de eerste pagina onaangetast door stateful of stateless modi., Een andere mogelijke keuze is frameworks zoals PreRender, Puppeteer, Rendertron die gemakkelijk kan worden geà ntegreerd in elke website als een middleware met webserver configuratie waardoor bot Verzoeken (google bot en anderen) worden bediend door de middleware, terwijl niet-bot verzoeken worden geserveerd zoals gewoonlijk. Deze frameworks cache de relevante Website pagina ‘ s periodiek zodat de nieuwste versies beschikbaar zijn voor zoekmachines. Deze frameworks zijn officieel goedgekeurd door google.
er zijn een paar oplossingen om het te laten lijken alsof de website crawlerbaar is., Beide omvatten het maken van aparte HTML-pagina ‘ s die de inhoud van de SPA spiegelen. De server kan een HTML-gebaseerde versie van de site te maken en leveren dat aan crawlers, of het is mogelijk om een headless browser zoals PhantomJS gebruiken om de JavaScript-toepassing uit te voeren en de output van de resulterende HTML.
beide vereisen nogal wat inspanning, en kunnen uiteindelijk leiden tot het geven van een onderhoud hoofdpijn voor de grote complexe sites. Er zijn ook potentiële SEO valkuilen. Als server-gegenereerde HTML wordt geacht te verschillen van de SPA-inhoud, dan zal de site worden bestraft., Het uitvoeren van PhantomJS om de HTML uit te voeren kan de responssnelheid van de pagina ‘ s vertragen, wat iets is waarvoor zoekmachines – Google in het bijzonder – de ranglijsten downgraden.
Client/server code partitioningEdit
een manier om de hoeveelheid code die gedeeld kan worden tussen servers en clients te verhogen is door een logic-less template taal zoals snor of stuur te gebruiken. Dergelijke sjablonen kunnen worden weergegeven uit verschillende hosttalen, zoals Ruby op de server en JavaScript in de client., Echter, alleen het delen van sjablonen vereist meestal duplicatie van business logica gebruikt om de juiste sjablonen te kiezen en te vullen met gegevens. Rendering van sjablonen kan negatieve prestatie-effecten hebben wanneer slechts een klein deel van de pagina wordt bijgewerkt—zoals de waarde van een tekstinvoer binnen een grote sjabloon. Het vervangen van een volledige sjabloon kan ook de selectie of cursorpositie van een gebruiker verstoren, waarbij alleen de gewijzigde waarde mogelijk niet wordt bijgewerkt., Om deze problemen te voorkomen, kunnen toepassingen UI-gegevensbindingen of granulaire Dom-manipulatie gebruiken om alleen de juiste delen van de pagina bij te werken in plaats van volledige sjablonen opnieuw te renderen.
Browser historyEdit
met een SPA die per definitie “een enkele pagina” is, breekt het model het ontwerp van de browser voor de pagina-geschiedenisnavigatie met behulp van de knoppen”vooruit “of” terug”., Dit presenteert een bruikbaarheid belemmering wanneer een gebruiker drukt op de knop terug, verwacht de vorige schermstatus binnen de SPA, maar in plaats daarvan, de applicatie ’s enkele pagina ontlaadt en de vorige pagina in de browser’ s geschiedenis wordt gepresenteerd.
de traditionele oplossing voor spa ‘ s is het wijzigen van de hash fragment identifier van de browser URL in overeenstemming met de huidige schermstatus. Dit kan worden bereikt met JavaScript, en zorgt ervoor dat URL geschiedenis gebeurtenissen worden opgebouwd binnen de browser., Zolang de SPA in staat is om dezelfde schermstatus weer te geven uit de informatie in de URL-hash, blijft het verwachte gedrag van de back-knop behouden.
om dit probleem verder aan te pakken, heeft de HTML5-specificatie pushState en replaceState geïntroduceerd die programmatische toegang biedt tot de werkelijke URL-en browsergeschiedenis.
AnalyticsEdit
Analytics tools zoals Google Analytics zijn sterk afhankelijk van het laden van hele nieuwe pagina ‘ s in de browser, geïnitieerd door een nieuwe pagina te laden. Kuuroorden werken niet op deze manier.,
na het laden van de eerste pagina worden alle volgende pagina-en inhoudswijzigingen intern verwerkt door de toepassing, die eenvoudig een functie moet aanroepen om het analysepakket bij te werken. Niet te bellen genoemde functie, de browser nooit triggers een nieuwe pagina te laden, niets wordt toegevoegd aan de browser geschiedenis, en de analytics pakket heeft geen idee wie wat doet op de site.
paginalading toevoegen aan een SPAEdit
het is mogelijk om paginaladgebeurtenissen toe te voegen aan een SPA met behulp van de HTML5 history API; dit zal helpen bij de integratie van analytics., De moeilijkheid komt bij het beheren van dit en ervoor te zorgen dat alles nauwkeurig wordt bijgehouden-dit houdt in het controleren op ontbrekende rapporten en dubbele vermeldingen.Sommige frameworks bieden open source analytics integraties voor de meeste van de belangrijkste analytics providers. Ontwikkelaars kunnen ze integreren in de applicatie en ervoor zorgen dat alles correct werkt, maar er is geen noodzaak om alles vanaf nul te doen.
snelheid van het eerste laden
toepassingen met één pagina hebben een tragere eerste pagina laden dan op server gebaseerde toepassingen., Dit komt omdat de eerste belasting het framework en de applicatie code naar beneden moet halen voordat de vereiste weergave als HTML in de browser wordt weergegeven. Een servergebaseerde applicatie hoeft alleen maar de vereiste HTML naar de browser te pushen, waardoor de latency en downloadtijd worden verminderd.
versnellen van de pagina loadEdit
Er zijn enkele manieren om de initiële belasting van een SPA te versnellen, zoals een zware benadering van caching en lazy-loading modules indien nodig., Maar het is niet mogelijk om weg te komen van het feit dat het nodig heeft om het framework te downloaden, ten minste een deel van de code van de toepassing, en zal waarschijnlijk een API voor gegevens raken voordat u iets in de browser weer te geven. Dit is een” betaal me nu, of betaal me later ” trade-off scenario. De kwestie van de prestaties en wachttijden blijft een beslissing die de ontwikkelaar moet maken.