Aplicação de página única
porque o SPA é uma evolução longe do modelo apátrida de Redraw que navegadores foram originalmente projetados para, alguns novos desafios surgiram. As soluções possíveis (de complexidade variável, abrangência e controle de Autor) incluem:
- bibliotecas JavaScript do lado cliente.
- Frameworks Server-side web que se especializam no modelo SPA.
- a evolução dos navegadores e a especificação HTML5, projetada para o modelo SPA.,
Search-engine optimizationEdit
devido à falta de execução JavaScript em crawlers de alguns populares motores de busca Web, seo (Search engine optimizationedit) tem historicamente apresentado um problema para sites de rosto público que desejam adotar o modelo SPA.
entre 2009 e 2015, o Google Webmaster Central propôs e, em seguida, recomendou um “esquema de rastreamento AJAX” usando um ponto de exclamação inicial em identificadores de fragmentos para páginas AJAX stateful ()., O site SPA deve implementar um comportamento especial para permitir a extração de metadados relevantes pelo rastreador do motor de busca. Para os motores de busca que não suportam este esquema de hash URL, as URLs do SPA permanecem invisíveis. Estes URIs “hash-bang” têm sido considerados problemáticos por uma série de escritores, incluindo Jeni Tennison no W3C, porque eles fazem páginas inacessíveis para aqueles que não têm JavaScript ativado em seu navegador. Eles também quebram os cabeçalhos de referência HTTP como navegadores não estão autorizados a enviar o identificador de fragmento no cabeçalho Referer., Em 2015, o Google desmentiu sua proposta de rastreamento hash-bang AJAX.
Alternativamente, as aplicações podem renderizar a primeira carga de página no servidor e subsequentes atualizações de página no cliente. Isto é tradicionalmente difícil, porque o código de renderização pode precisar ser escrito em uma linguagem ou framework diferente no servidor e no cliente. Usando modelos sem lógica, a compilação cruzada de uma linguagem para outra, ou usando a mesma linguagem no servidor e no cliente pode ajudar a aumentar a quantidade de código que pode ser compartilhado.,
em 2018, o Google introduziu a renderização dinâmica como outra opção para sites que desejam oferecer a crawlers uma versão pesada Não JavaScript de uma página para fins de indexação. A renderização dinâmica muda entre uma versão de uma página que é renderizada do lado do cliente e uma versão pré-renderizada para agentes específicos do Usuário. Esta abordagem envolve o seu servidor web detectando crawlers (através do agente de usuário) e encaminhá-los para um renderizador, a partir do qual eles são servidos uma versão mais simples do conteúdo HTML.,
porque a compatibilidade do SEO não é trivial em SPAs, vale a pena notar que SPAs não são comumente usados em um contexto onde indexação do motor de busca é um requisito, ou desejável. Os casos de uso incluem aplicações que superfície de dados privados escondidos atrás de um sistema de autenticação. Nos casos em que estas aplicações são produtos de consumo, muitas vezes um clássico modelo “page redraw” é usado para a página de pouso aplicações e site de marketing, que fornece meta dados suficientes para o aplicativo para aparecer como um hit em uma consulta motor de busca., Blogs, fóruns de suporte, e outros artefatos de páginas tradicionais redraw muitas vezes sentar em torno do SPA que pode semear os motores de busca com termos relevantes.
outra abordagem usada por frameworks web centrados no servidor, como o ItsNat baseado em Java, é renderizar qualquer hipertexto no servidor usando a mesma linguagem e Tecnologia de templação. Nesta abordagem, o servidor sabe com precisão o estado DOM no cliente, qualquer atualização de Página grande ou pequena necessária é gerada no servidor, e transportado pelo Ajax, o código JavaScript exato para trazer a página do cliente para o novo estado de execução métodos DOM., Os desenvolvedores podem decidir quais estados de Página devem ser rastejáveis por Aranhas web para SEO e ser capazes de gerar o estado necessário no tempo de carga gerando HTML simples em vez de JavaScript. No caso da framework ItsNat, isso é automático porque ItsNat mantém a árvore DOM cliente no servidor como uma árvore DOM W3C Java; renderização desta árvore DOM no servidor gera HTML simples no tempo de carga e ações DOM JavaScript para pedidos Ajax., Esta dualidade é muito importante para o SEO porque os desenvolvedores podem construir com o mesmo código Java e puro HTML Template o estado DOM desejado no servidor; no tempo de carga de página, o HTML convencional é gerado pelo ItsNat tornando este estado DOM Compatível.
A partir da versão 1.,3, ItsNat fornece um novo modo stateless, e o cliente DOM não é mantido no servidor, porque, com o stateless modo cliente, DOM estado for parcialmente ou totalmente reconstruído no servidor ao processar as requisições Ajax com base em dados necessários enviado pelo cliente, informando que o servidor do DOM atual estado; os apátridas modo pode ser também compatíveis com SEO porque SEO compatibilidade acontece no tempo de carregamento da página inicial afetados por stateful ou stateless modos., Outra escolha possível é frameworks como o PreRender, o Puppeteer, o Rendertron que pode ser facilmente integrado em qualquer site como um middleware com configuração de servidor web permitindo que os pedidos de bot (google bot e outros) sejam servidos pelo middleware, enquanto os pedidos não-bot são servidos como de costume. Estes frameworks cache as páginas relevantes do Site periodicamente para permitir que as versões mais recentes estejam disponíveis para os motores de busca. Estes frameworks foram oficialmente aprovados pelo google.
Há um par de workarounds para fazê-lo parecer como se o site é crawlable., Ambos envolvem a criação de páginas HTML separadas que espelham o conteúdo do SPA. O servidor pode criar uma versão baseada em HTML do site e entregar isso a crawlers, ou é possível usar um navegador sem cabeça como PhantomJS para executar a aplicação JavaScript e output o HTML resultante.
ambos requerem um pouco de esforço, e podem acabar dando uma dor de cabeça de manutenção para os grandes locais complexos. Há também potenciais armadilhas SEO. Se o HTML gerado pelo servidor for considerado muito diferente do conteúdo do SPA, então o site será penalizado., Executando PhantomJS para output o HTML pode retardar a velocidade de resposta das páginas, que é algo para o qual os motores de busca – Google em particular – rebaixam os rankings.
Client/server code partitioningEdit
uma maneira de aumentar a quantidade de código que pode ser compartilhada entre servidores e clientes é usar uma linguagem de modelo sem lógica, como bigodes ou Guiadores. Tais modelos podem ser renderizados a partir de diferentes linguagens de host, como Ruby no servidor e JavaScript no cliente., No entanto, simplesmente compartilhando modelos normalmente requer duplicação da lógica de negócios usada para escolher os modelos corretos e povoá-los com dados. Renderização a partir de modelos pode ter efeitos negativos de desempenho quando apenas atualizar uma pequena parte da página—como o valor de uma entrada de texto dentro de um grande modelo. A substituição de um modelo inteiro também pode perturbar a selecção de um utilizador ou a posição do cursor, onde a actualização apenas do valor alterado poderá não ser possível., Para evitar estes problemas, as aplicações podem usar ligações de dados UI ou manipulação de DOM granular para apenas atualizar as partes apropriadas da página em vez de re-renderização de modelos inteiros.
História do navegador
com um SPA sendo, por definição,” uma única página”, o modelo quebra o projeto do navegador para a navegação do histórico de páginas usando os botões “forward” ou “back”., Isto apresenta um impedimento de usabilidade quando um usuário pressiona o botão de trás, esperando o estado de tela anterior dentro do SPA, mas em vez disso, a única página da aplicação descarrega e a página anterior no histórico do navegador é apresentada.
a solução tradicional para SPAs tem sido alterar o navegador URL”s identificador do fragmento de hash de acordo com o estado de tela atual. Isso pode ser alcançado com JavaScript, e faz com que eventos de histórico de URL a ser construído dentro do navegador., Enquanto o SPA for capaz de ressurgir o mesmo estado de tela a partir de informações contidas no hash URL, o comportamento esperado back-button é mantido.
para abordar mais esta questão, a especificação HTML5 introduziu pushState e replaceState fornecendo acesso programático ao histórico atual de URL e navegador.
AnalyticsEdit
analytics tools such as Google Analytics rely heavily upon entire new pages loading in the browser, initiated by a new page load. As SPAs não funcionam assim.,
Após a primeira carga de página, todas as mudanças subsequentes de página e conteúdo são tratadas internamente pela aplicação, que deve simplesmente chamar uma função para atualizar o pacote analytics. Ao não ligar para essa função, o navegador nunca aciona uma nova carga de página, nada é adicionado ao histórico do navegador, e o pacote analytics não tem idéia de quem está fazendo o quê no site.
adicionar cargas de páginas a um SPAEdit
é possível adicionar eventos de carga de páginas a um SPA usando a API de história HTML5; isto irá ajudar a integrar as análises., A dificuldade vem em geri – lo e garantir que tudo está sendo rastreado com precisão-isso envolve a verificação de relatórios em falta e entradas duplas.Alguns frameworks fornecem integrações de análise de código aberto abordando a maioria dos principais fornecedores de análise. Os desenvolvedores podem integrá-los na aplicação e se certificar de que tudo está funcionando corretamente, mas não há necessidade de fazer tudo do zero.
Velocidade do loadEdit inicial
As aplicações de Página Única têm uma carga de primeira página mais lenta do que as aplicações baseadas no servidor., Isto porque a primeira carga tem que baixar o framework e o código da aplicação antes de tornar a visualização necessária como HTML no navegador. Uma aplicação baseada em servidor apenas tem que empurrar o HTML necessário para o navegador, reduzindo a latência e o tempo de download.
acelerando o loadEdit da página
Existem algumas maneiras de acelerar a carga inicial de um SPA, como uma abordagem pesada para caching e módulos de carga preguiçosa, quando necessário., Mas não é possível afastar-se do fato de que ele precisa baixar o framework, pelo menos parte do Código da aplicação, e provavelmente irá acertar uma API para os dados antes de exibir algo no navegador. Isto é um cenário de troca” Paga-me agora, ou Paga-me depois”. A questão do desempenho e dos tempos de espera continua a ser uma decisão que o desenvolvedor deve tomar.