Quais são as vantagens conferidas usando a renderização de página do lado do servidor?


19

Estou desenvolvendo um aplicativo Web e atualmente escrevi o site inteiro em html / js / css e no back-end tenho servlets que hospedam alguns serviços RESTFUL. Toda a lógica de apresentação é feita através da obtenção de objetos json e da modificação da visualização através de javascript.

O aplicativo é essencialmente um mecanismo de pesquisa, mas terá contas de usuário com funções diferentes.

Eu tenho pesquisado algumas estruturas, como Play e Spring. Eu sou bastante novo no desenvolvimento web, então eu queria saber quais vantagens o uso da renderização de página no servidor forneceria?

É: Velocidade? Desenvolvimento e fluxo de trabalho mais fáceis? Acesso a bibliotecas existentes? Mais? Tudo acima?


4
A segurança é grande. Especialmente quando o aplicativo é dinâmico e precisa se comunicar com um banco de dados.
Oded

2
@Oded - Por que a segurança é mais fácil quando você renderiza a página vs. na API? Eu sempre pensei que o que você precisa programar é equivalente de qualquer maneira, mas é mais fácil (pelo menos para mim) psicologicamente lembrar de não confiar no cliente ao fazer uma API. Estou perguntando, porque se estou olhando para algo que realmente quero saber.
Psr

1
@psr Ele pode não estar se referindo tanto à segurança dos dados quanto à segurança do usuário (por exemplo, explorações do MITM). Apenas um palpite.
Maple_shaft

1
@psr - Concordo. No entanto, ontem eu respondi uma pergunta onde o OP teve a seqüência de conexão embutido JS ...
Oded

1
@ maple_shaft - MITM é algo para se pensar, mas, novamente, não sei por que faz a diferença entre API e HTML gerado pelo servidor. Suponho que uma API seja mais conveniente para programar, portanto seria um crack marginalmente mais fácil, mas duvido que seja isso que você quer dizer.
Psr

Respostas:


16

Renderização HTML do lado do servidor:

  • Renderização mais rápida do navegador
  • O cache de páginas é possível como um aumento de desempenho rápido e sujo
  • Para aplicativos "padrão", muitos recursos da interface do usuário são pré-criados
  • Às vezes, é considerado mais estável porque os componentes geralmente estão sujeitos à validação em tempo de compilação
  • Recorre à experiência de back-end
  • Às vezes, mais rápido de desenvolver *

* Quando os requisitos da interface do usuário se ajustam bem à estrutura.


Renderização HTML do lado do cliente:

  • Menor uso de largura de banda
  • Página inicial mais lenta renderizada. Pode até não ser perceptível nos navegadores de desktop modernos. Se você precisar oferecer suporte ao IE6-7, ou muitos navegadores móveis (o kit da web móvel não é ruim), poderá encontrar gargalos.
  • Criar a API primeiro significa que o cliente pode facilmente ser um aplicativo proprietário, thin client, outro serviço da web etc.
  • Baseia-se na experiência em JS
  • Às vezes, mais rápido para se desenvolver **

** Quando a interface do usuário é amplamente personalizada, com interações mais interessantes. Além disso, acho que a codificação no navegador com código interpretado notavelmente mais rápida do que aguardar compilações e reinicializações do servidor.


Você também pode considerar um modelo híbrido com uma implementação de back-end leve usando um sistema de modelagem de front-end / back-end, como bigode .


1
Whoah, esqueci completamente as oportunidades de armazenamento em cache!
Michael K

"Para aplicativos" padrão ", muitos recursos da interface do usuário são pré-criados" Isso é irrelevante, tanto o servidor quanto o cliente têm isso.
Raynos

@ Raynos Ele não mencionou o uso de uma estrutura do lado do cliente , mas se ele estiver usando uma, esse é um bom argumento.
Peteorpeter

1
Obrigado, esta é principalmente a resposta que eu estava procurando. Não fiz muito com as estruturas do lado do cliente, mas estava pesquisando o dust.js com base na escolha do LinkedIn. Eu sei que o bigode é uma alternativa, mas vou pesquisar mais. Provavelmente vou fazer algum tipo de híbrido, principalmente gostaria de enviar as coisas para o lado do servidor, se isso puder melhorar o desempenho. Obrigado novamente.
user1303881

Eu realmente não consideraria nada listado como "renderização HTML do lado do cliente" como uma vantagem. "Às vezes, o desenvolvimento é mais rápido" sai pela janela mais uma vez que os navegadores de ponta são considerados (IE 8, etc.).
Nulo

3

geração de HTML no servidor:

  • mais fácil de depurar;
  • sem problemas com a compatibilidade do navegador;
  • com a geração clássica de páginas inteiras no servidor, é mais difícil armazenar em cache o HTML, mesmo que ele possua grandes partes invariáveis; (a solução é buscar fragmentos HTML através de chamadas AJAX);
  • não aproveitar os proxies de cache e CDNs para HTML dinâmico;

geração de HTML do lado do cliente:

  • mais difícil de depurar;
  • alguns problemas com navegadores obsoletos;
  • sem problemas para armazenar em cache modelos HTML no lado do cliente;
  • aproveitando os proxies de cache e CDNs para modelos HTML e código JS;
  • uso de rede muito menor;

Observe que a geração do lado do cliente é a maneira como é feita no caso de sites móveis bem-sucedidos, pois aparentemente é muito mais eficiente com os navegadores modernos (os navegadores baseados no WebKit têm cerca de 70 a 80% do mercado móvel).

O LinkedIn tem um artigo sobre as vantagens da abordagem do lado do cliente usando dust.js como exemplo: "Deixando JSPs no pó: movendo o LinkedIn para os modelos do lado do cliente dust.js"


1
+1 Em smartphones modernos (principalmente usando o webkit móvel), é provável que o JS não afunde, enquanto a largura de banda da rede celular é .
Peteorpeter

1

Depende de quais são seus requisitos. Se você precisar de uma solução de alto desempenho e baixa latência que dependa de muitas tarefas pequenas, poderá optar por uma estrutura semelhante à descrita. As soluções mais comuns, em Java, PHP e C #, não são padronizadas para isso.

A maioria dos aplicativos da Web depende muito dos bancos de dados - a maioria deles tanto que as páginas não foram processadas sem pelo menos uma chamada. Obviamente, você não deseja expor seu banco de dados publicamente, por vários motivos:

  • Segurança (como Oded menciona) - você definitivamente não deseja expor sua rede publicamente! Idealmente, a única interface externa para os seus sistemas deve ser https para o servidor.
  • Facilidade de desenvolvimento - você realmente, realmente , realmente não quero SQL escrita em Javascript, e as línguas projetados para apresentação web não funcionam bem com RDB. Eles não têm conceito de estado, por exemplo.

Portanto, quando você precisa de um banco de dados, usa linguagens que se adaptam bem a eles, como Java, C #, PHP etc. A maneira mais fácil de gerar uma página é a seguinte: Você usa uma linguagem de modelagem (mais conhecida como PHP, JSP e ASP são duas outras linguagens muito comuns) para construir a página. A linguagem fornece construções que chamam outros módulos. No PHP, isso geralmente ocorre na página ou em outro arquivo PHP, usando o padrão MVC. No JSP, você usa scriptlets ou o JSP Expression Language. Esses outros módulos podem ter o trabalho pesado de se conectar ao banco de dados, executando a lógica e retornando valores à sua camada de visualização. O resultado final é uma página HTML gerada, renderizada no servidor e enviada ao cliente.

Quando seu banco de dados está na mesma rede que o renderizador de página, você obtém melhor desempenho também. O cliente precisa apenas fazer uma solicitação e receber uma página - pode ser necessário fazer 10 a 15 solicitações de banco de dados antes de ter todas as informações de que o usuário precisa. Uma latência de milissegundos na sua rede seria de segundos a minutos se o cliente tivesse que fazer todos eles.

Quando os sistemas crescem, a separação de preocupações e competências essenciais se torna crucial. HTML é bom para exibição. Javascript é bom para conteúdo dinâmico. O SQL é ótimo para consultar um banco de dados, e outros idiomas são bons na lógica de negócios. Nosso trabalho como desenvolvedores é usar todas as ferramentas disponíveis para criar um sistema sustentável. A facilidade de desenvolvimento é uma grande parte de um bom sistema. Na minha opinião, é quase tão importante quanto desempenho e usabilidade. Grandes sistemas evoluem com o tempo. Sistemas ruins foram mal escritos desde o início e nunca foram aprimorados.


you can't write SQL in Javascript Sério?! Você já olhou para as perguntas do StackOverflow para Javascript? Eu imploraria para diferir, infelizmente. Concedido é a única coisa pior que você poderia fazer no código do cliente, mas ...
maple_shaft

... também esqueci o Node.JS, mas esse é o servidor JS, que é um animal completamente diferente.
Maple_shaft

Aparentemente, você pode - até! Apenas ... uau, no entanto. Mas fale sobre abuso da linguagem!
Michael K

2
A interface REST é como o cliente atualmente acessa dados do banco de dados por meio de objetos json. Ele não expõe tudo e esse aplicativo faz parte de uma rede corporativa privada. Uma vantagem das interfaces é a capacidade de outros aplicativos da empresa aproveitarem qualquer serviço que desejarem. Do ponto de vista do desenvolvimento, posso permitir que os desenvolvedores front-end façam o que quiserem em html / js / css e, em seguida, eles podem executar ping apenas na interface RESTful projetada pelos desenvolvedores java. No entanto, a maioria de nós possui um conjunto de habilidades combinadas e essa divisão pode não ser necessária.
user1303881

3
-1: @MichaelK: você está discutindo com um palhaço que você imaginou, mas não tem absolutamente nada a ver com a vida real. RESTful usa HTTP. Ninguém precisa escrever SQL em JS, é para isso que serve a interface RESTful. Também RESTful não significa, existe um mapeamento 1 para 1 com consultas ao banco de dados. Sua resposta pode ter sido válida nos anos 90, mas estamos em 2012 agora.
vartec

0

Os clientes móveis geralmente têm restrição de energia, largura de banda e memória. Provavelmente é melhor renderizar páginas para eles no servidor.

Para clientes de desktop, você pode enviar js + json para renderizar a página no cliente, atualizá-la dinamicamente etc.


Na prática, porém, o oposto exato é frequentemente verdadeiro. O projeto jQuery Mobile, de fato, é completamente baseado na idéia de renderização do lado do cliente.
Pointy

@ Pointy: sim, isso pode ser o contrário. Deve-se testar como determinadas páginas se comportam em determinados clientes. O fornecimento de um link para uma alternativa (como os links das versões 'móvel' e 'desktop') também pode ser útil para o usuário.
9000

Hoje, os dispositivos móveis são muito mais caracterizados por alta latência do que baixa largura de banda ou poder de processamento. No projeto em que trabalhei recentemente, estávamos mais preocupados com o tamanho da página do que com a velocidade de renderização - os telefones modernos são muito bons.
Michael K

@ Pointy o projeto jQuery Mobile também é uma grande pilha de código horrível que não deve ser usado. Popularidade! == valor
Raynos

@ Raynos Na verdade, estamos usando o Jquery Mobile, com muito bom sucesso também. Você sabe algo que não sabemos? ;)
Michael K

0

Uma enorme vantagem da renderização do lado do servidor é a acessibilidade - aplicativos baseados em javascript ainda são um grande problema para pessoas sem visão. Isso e existe esse cara cego chamado "googlebot" que você pode querer atender. Ele não faz javascript tão bem também.


Bom ponto, embora este aplicativo não exija SEO porque é privado, também estou desenvolvendo alguns aplicativos pessoais e isso é uma consideração nessa área.
user1303881

Googlebot não interpretar JS / AJAX por algum tempo: searchenginewatch.com/article/2122137/...
vartec

@artec: Eu acho que o ponto principal nesse artigo é "agora é possível ler e entender certos comentários dinâmicos implementados por meio de AJAX e JavaScript". Minha suspeita é que abrange disqus e facebook, mas não sua configuração personalizada do ajax.
Wyatt Barnett
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.