Por que é uma prática recomendada retornar HTML gerado em vez de JSON? Ou é?

É muito fácil carregar o conteúdo HTML de seus URLs / serviços da Web personalizados usando JQuery ou qualquer outra estrutura semelhante. Eu usei essa abordagem várias vezes e até agora e achei o desempenho satisfatório.

Mas todos os livros, todos os especialistas estão tentando me convencer a usar JSON em vez de HTML gerado. Como é muito mais superior que HTML?

É muito mais rápido?
Ele tem uma carga muito menor no servidor?

Por outro lado, tenho alguns motivos para usar o HTML gerado.

1. É uma marcação simples e geralmente tão compacta ou realmente mais compacta que o JSON.
2. É menos propenso a erros, pois tudo o que você recebe é marcação e nenhum código.
3. Na maioria dos casos, será mais rápido programar, pois você não precisará escrever código separadamente para o cliente.

De que lado você está e por quê?

Eu sou um pouco de ambos os lados, na verdade:

• Quando o que eu preciso no lado javascript é de dados , eu uso JSON
• Quando o que eu preciso no lado do javascript é uma apresentação na qual não farei nenhum cálculo, geralmente uso HTML

A principal vantagem do uso de HTML é quando você deseja substituir uma parte completa da sua página pelo que retorna da solicitação do Ajax:

• Reconstruir uma parte da página em JS é (bastante) difícil
• Você provavelmente já possui algum mecanismo de modelagem no lado do servidor, usado para gerar a página em primeiro lugar ... Por que não reutilizá-la?

Geralmente, não levo em consideração o lado "desempenho", pelo menos no servidor:

• No servidor, gerar uma parte de HTML ou algum JSON provavelmente não fará muita diferença
• Sobre o tamanho das coisas que passam pela rede: bem, você provavelmente não usa centenas de KB de dados / html ... Usar o gzip no que estiver transferindo é o que fará a maior diferença (não escolher entre HTML e JSON)
• Uma coisa que pode ser levada em consideração, porém, são os recursos necessários no cliente para recriar o HTML (ou a estrutura DOM) dos dados JSON ... compare isso com a inserção de uma parte do HTML na página; -)

Finalmente, uma coisa que definitivamente importa:

• Quanto tempo você levará para desenvolver um novo sistema que enviará dados como código JSON + que o JS exigiu para injetar como HTML na página?
• Quanto tempo levará apenas para retornar HTML? E por quanto tempo você pode reutilizar parte do seu código do servidor já existente?

E para responder a outra resposta: se você precisar atualizar mais de uma parte da página, ainda existe a solução / hack de enviar todas essas partes dentro de uma grande cadeia que agrupa várias porções HTML e extrai as partes relevantes em JS.

Por exemplo, você pode retornar uma string que se parece com isso:

<!-- MARKER_BEGIN_PART1 -->
here goes the html
code for part 1
<!-- MARKER_END_PART1 -->
<!-- MARKER_BEGIN_PART2 -->
here goes the html
code for part 2
<!-- MARKER_END_PART2 -->
<!-- MARKER_BEGIN_PART3 -->
here goes the json data
that will be used to build part 3
from the JS code
<!-- MARKER_END_PART3 -->

Isso não parece muito bom, mas é definitivamente útil (eu já o usei algumas vezes, principalmente quando os dados HTML eram grandes demais para serem encapsulados no JSON) : você está enviando HTML para as partes da página que precisa de apresentação e você está enviando JSON para a situação em que precisa de dados ...

... E para extraí-los, o método de substring JS fará o truque, suponho ;-)

Concordo principalmente com as opiniões declaradas aqui. Eu só queria resumir eles como:

• Não é recomendável enviar HTML se você acabar analisando o lado do cliente para fazer alguns cálculos sobre ele.

• É uma prática recomendada enviar JSON se tudo o que você fizer é incorporá-lo à árvore DOM da página.

Bem,

Sou uma daquelas pessoas raras que gosta de separar as coisas desta maneira: - O servidor é responsável pela entrega de dados (modelo); - O cliente é responsável por mostrar (visualizar) e manipular dados (modelo);

Portanto, o servidor deve se concentrar na entrega do modelo (nesse caso, o JSON é melhor). Dessa forma, você obtém uma abordagem flexível. Se você deseja alterar a visualização do seu modelo, mantém o servidor enviando os mesmos dados e apenas altera o cliente, componentes javascript, que alteram esses dados em uma visualização. Imagine, você tem um servidor que fornece dados para dispositivos móveis e para aplicativos de desktop.

Além disso, essa abordagem aumenta a produtividade, pois o código do servidor e do cliente pode ser criado ao mesmo tempo, nunca perdendo o foco, o que acontece quando você muda de js para PHP / JAVA / etc.

Geralmente, acho que a maioria das pessoas prefere fazer o máximo possível no lado do servidor, porque não domina js; portanto, tenta evitá-lo o máximo possível.

Basicamente, tenho a mesma opinião daqueles que estão trabalhando no Angular. Na minha opinião, esse é o futuro dos aplicativos da web.

Tenho algo interessante que pensei em acrescentar. Desenvolvi um aplicativo que apenas carregava uma visualização completa uma vez. A partir desse momento, ele se comunicava de volta ao servidor apenas com ajax. Só era necessário carregar uma página (minha razão para isso não é importante aqui). A parte interessante é que eu tinha uma necessidade especial de retornar alguns dados para serem operados no javascript E uma exibição parcial a ser exibida. Eu poderia ter dividido isso em duas chamadas para dois métodos de ação separados, mas decidi ir com algo um pouco mais divertido.

Confira:

public JsonResult MyJsonObject(string someData)
{
     return Json(new { SomeData = someData, PartialView = RenderPartialViewToString("JsonPartialView", null) }, JsonRequestBehavior.AllowGet);
}

O que é RenderPartialViewToString () você pode perguntar? É essa pepita de frescura bem aqui:

protected string RenderPartialViewToString(string viewName, object model)
{
     ViewData.Model = model;

     using (StringWriter sw = new StringWriter())
     {
          ViewEngineResult viewResult = ViewEngines.Engines.FindPartialView(ControllerContext, viewName);
          ViewContext viewContext = new ViewContext(ControllerContext, viewResult.View, ViewData, TempData, sw);
          viewResult.View.Render(viewContext, sw);

          return sw.GetStringBuilder().ToString();
     }
}

Eu não fiz nenhum teste de desempenho sobre isso, então não tenho certeza se isso gera mais ou menos sobrecarga do que chamar um método de ação para o JsonResult e outro para o ParticalViewResult, mas ainda achei muito legal. Ele apenas serializa uma vista parcial em uma string e a envia junto com o Json como um de seus parâmetros. Em seguida, uso o JQuery para pegar esse parâmetro e colocá-lo no nó DOM apropriado :)

Deixe-me saber o que você acha do meu híbrido!

Se a resposta não precisar de processamento adicional do lado do cliente, HTML é bom na minha opinião. O envio de JSON apenas forçará você a executar esse processamento no lado do cliente.

Por outro lado, uso JSON quando não quero usar todos os dados de resposta de uma só vez. Por exemplo, eu tenho uma série de três seleções encadeadas, em que o valor selecionado de um determina quais valores serão usados ​​para preencher o segundo e assim por diante.

IMV, trata-se de separar os dados da apresentação dos dados, mas eu estou com Pascal, não necessariamente significa que essa separação pode estar apenas no limite cliente / servidor. Se você já possui essa separação (no servidor) e deseja apenas mostrar algo ao cliente, se você envia JSON e o pós-processa no cliente, ou apenas envia HTML, depende inteiramente de suas necessidades. Dizer que você está "errado" em enviar de volta o HTML no caso geral é apenas uma declaração IMV.

JSON é um formato muito versátil e leve. Descobri sua beleza quando comecei a usá-lo como dados do analisador de modelos do lado do cliente. Deixe-me explicar, enquanto antes eu estava usando o smarty e as visualizações no lado do servidor (gerando alta carga do servidor), agora utilizo algumas funções jquery personalizadas e todos os dados são renderizados no lado do cliente, usando o navegador do cliente como analisador de modelo. ele salva recursos do servidor e, por outro lado, os navegadores aprimoram seus mecanismos JS todos os dias. Portanto, a velocidade da análise do cliente não é uma questão importante no momento; ainda mais, os objetos JSON são geralmente muito pequenos, portanto, eles não consomem muitos recursos do lado do cliente. Prefiro ter um site lento para alguns usuários com navegador lento, em vez de site lento para todos por causa de um servidor muito carregado.

Por outro lado, ao enviar dados puros do servidor, você os abstrai da apresentação; se, amanhã, você quiser alterá-los ou integrar seus dados em outro serviço, poderá fazê-lo com muito mais facilidade.

Apenas meus 2 centavos.

Se você deseja um cliente desacoplado limpo, o que, na minha opinião, é uma prática recomendada, faz sentido ter 100% do DOM criado pelo javascript. Se você criar um cliente baseado em MVC que tenha todo o conhecimento para criar a interface do usuário, seus usuários farão o download de um arquivo javascript uma vez e ele será armazenado em cache no cliente. Todas as solicitações após esse carregamento inicial são baseadas no Ajax e retornam apenas dados. Essa abordagem é a mais limpa que encontrei e fornece um encapsulamento independente limpo da apresentação.

O lado do servidor se concentra apenas na entrega de dados.

Portanto, amanhã, quando o produto solicitar que você altere completamente o design de uma página, tudo o que você alterará será a JS de origem que cria o DOM, mas provavelmente reutilizará os manipuladores de eventos já existentes e o servidor ficará inconsciente porque está 100% dissociado da apresentação

Dependendo da sua interface do usuário, pode ser necessário atualizar dois (ou mais) elementos diferentes no seu DOM. Se sua resposta estiver em HTML, você analisará isso para descobrir o que vai aonde? Ou você pode simplesmente usar um hash JSON.

Você pode até combiná-lo, retornar um JSON com dados html :)

{ 'dom_ele_1' : '<p>My HTML part 1</p>', 'dome_ele_2' : '<div>Your payment has been received</div>' }

O HTML possui muitos dados redundantes e não exibidos, ou seja, tags, folhas de estilo etc. Assim, o tamanho do HTML comparado aos dados JSON será maior, levando a mais tempo de download e renderização, além disso, fará com que o navegador fique ocupado renderizando os novos dados.

O envio de json geralmente é feito quando você tem um widget javascript solicitando informações do servidor, como uma lista ou uma exibição em árvore ou um preenchimento automático. É quando eu enviava JSON, pois são dados que serão analisados ​​e usados ​​brutos. No entanto, se você apenas mostrar HTML, será muito menos trabalhoso gerá-lo no servidor e mostrá-lo no navegador. Os navegadores são otimizados para inserir HTML diretamente no domínio com innerHTML = "", assim você não pode errar.

Eu acho que depende da estrutura do design, é apenas mais sexy usar JSON do que HTML, mas a questão é como lidar com isso para que seja fácil de manter.

Por exemplo, digamos que eu tenha a página de listagem que utilize o mesmo estilo / html de todo o site, eu escreveria a função global para formatar essas partes do HTML e tudo o que preciso fazer é passar o objeto JSON para a função.

A resposta html é suficiente na maioria dos casos, a menos que você precise executar algum cálculo no lado do cliente.

Depende das circunstâncias.

Às vezes, é essencial evitar o JSON. Quando nossos programadores têm problemas para programar em js, por exemplo.

Minha experiência me diz o seguinte: é melhor usar o serviço ajax do que o JSON embutido.

Cedo ou tarde, o js se torna um problema