{"id":2784,"date":"2014-09-24T10:16:12","date_gmt":"2014-09-24T13:16:12","guid":{"rendered":"http:\/\/blog.dialhost.com.br\/?p=2784"},"modified":"2014-09-24T10:16:12","modified_gmt":"2014-09-24T13:16:12","slug":"server-side-routes-vs-client-side-routes","status":"publish","type":"post","link":"https:\/\/www.dialhost.com.br\/blog\/server-side-routes-vs-client-side-routes\/","title":{"rendered":"Server-side routes vs. Client-side routes"},"content":{"rendered":"
\n
\"Algoritmos\"<\/a>
Imagem ilustrativa<\/figcaption><\/figure>\n

L\u00e1 no SOPT<\/a>, o usu\u00e1rio Rod <\/a>fez a seguinte pergunta:<\/p>\n

Qual a vantagem e desvantagem das rotas serem feitas por server(php,asp.net, etc) ou serem por client(angularjs,emberjs,backbone\u2026)? Em rela\u00e7\u00e3o performance, qual tem maior? Seguran\u00e7a, mobile, usabilidade?<\/p>\n

Achei um assunto bem relevante e resolvi responder.<\/p>\n

As rotas s\u00e3o desencadeadores de comportamentos. Quando voc\u00ea acessa http:\/\/seusite.com\/contato\/, a ideia \u00e9 que seja exibida uma p\u00e1gina destinada a contatos. O roteador, neste caso, \u00e9 o respons\u00e1vel por \u201cexplicar\u201d para a aplica\u00e7\u00e3o que algum usu\u00e1rio est\u00e1 tentando acessar \/contato\/ e ent\u00e3o algo deve ser feito \u2013 neste caso fantasia, o objetivo \u00e9 exibir a p\u00e1gina contato.html, por exemplo.<\/p>\n

No caso do JavaScript, independente da plataforma, a ideia \u00e9 que sejam invocados comportamentos espec\u00edficos para cada p\u00e1gina que o usu\u00e1rio acessar. No nosso exemplo (\/contato\/), considere que exista um formul\u00e1rio para que o usu\u00e1rio entre com o seus dados. Este formul\u00e1rio, por sua vez, possui uma valida\u00e7\u00e3o que, no caso do Backbone.js, pode ser resolvido com Backbone.Validation.<\/p>\n

Dada a situa\u00e7\u00e3o, pensamos: seria v\u00e1lido invocarmos o Backbone.Validation<\/a> para qualquer p\u00e1gina, visto que apenas \/contato\/ possui um formul\u00e1rio? Negativo. Isso \u00e9 conceitualmente ruim. O roteamento faz justamente isso: desencadeia uma entidade espec\u00edfica para que ela seja respons\u00e1vel por maestrar o que vai ou n\u00e3o acontecer na p\u00e1gina solicitada.<\/p>\n

Para refor\u00e7ar, existem dois princ\u00edpios que se aplicam para este caso: KISS<\/a> e DRY<\/a>.<\/p>\n

O que s\u00e3o essas \u201centidades\u201d?<\/strong><\/p>\n

As entidades s\u00e3o os \u201ccontrollers\u201d, no caso de Angular.js ou Marionette.js; Para Backbone.js, temos as \u201cviews\u201d que fazem o servi\u00e7o.<\/p>\n

E a concorr\u00eancia de cliente com servidor?<\/strong><\/p>\n

Na verdade, a concorr\u00eancia \u00e9 relativa. Voc\u00ea pode possuir rotas de cliente e servidor se assim quiser: no cliente voc\u00ea lida com o que a devida rota vai trabalhar em termos de JavaScript; no servidor voc\u00ea lida com o que vai acontecer com o cliente quando tal rota for executada.<\/p>\n

Mas, o que isso significa? Se voc\u00ea tiver uma SPA<\/a> (aplica\u00e7\u00e3o de p\u00e1gina \u00fanica), as rotas em cliente s\u00e3o suficiente; se voc\u00ea possuir v\u00e1rias p\u00e1ginas, voc\u00ea (provavelmente) ir\u00e1 trabalhar com roteamento em ambos os lados, tanto cliente quanto servidor, porque indicar o que de JavaScript deve ser executado n\u00e3o ser\u00e1 suficiente.<\/p>\n

Em rela\u00e7\u00e3o a performance, qual tem maior? E quanto a seguran\u00e7a, mobile, usabilidade?<\/strong><\/p>\n

O ideal \u00e9 n\u00e3o comparar a performance das rotas do cliente contra as do servidor \u2013 as propostas s\u00e3o diferentes e voc\u00ea tem que optar por aquela que satisfaz (melhor) a sua necessidade.<\/p>\n

Voc\u00ea pode controlar todo o roteamento pelo servidor e n\u00e3o utilizar o oferecido pelo cliente: isso, por hora, vai te dar um bootstrap mais produtivo, principalmente se o seu n\u00edvel de conhecimento sobre as frameworks front-end n\u00e3o for alto; entretanto, por outro lado, vai te gerar um maior n\u00famero de requisi\u00e7\u00f5es e a facilidade de escalabilidade do seu aplicativo pode estar comprometida no futuro pela perda de controle e capacidade de manuten\u00e7\u00e3o que esse roteamento singular trar\u00e1.<\/p>\n

Como exemplo da empregabilidade paralela dos dois roteamentos, vejamos o GitHub<\/a>:<\/p>\n

    \n
  1. Acesse o reposit\u00f3rio oficial do Backbone<\/a>;<\/li>\n
  2. Abre o console do seu navegador com, provavelmente, Ctrl + Shift + I ou F12;<\/li>\n
  3. Volte o seu foco para o reposit\u00f3rio do Backbone;<\/li>\n
  4. Clique na pasta \u201cdocs\u201c<\/a>.<\/li>\n<\/ol>\n

    Percebeu que foi feita uma requisi\u00e7\u00e3o do tipo GET e outra do tipo POST e nada foi recarregado? Pois \u00e9, o Backbone, por exemplo, traz um conjunto que torna esse mecanismo poss\u00edvel. Come\u00e7ando pelo Backbone.Router, indo at\u00e9 o window.history<\/a>.<\/p>\n

    Agora, vou lhe pedir outra coisa: acesse a pasta \/docs\/<\/a> diretamente, emitindo uma requisi\u00e7\u00e3o s\u00edncrona do tipo GET.<\/p>\n

    Esperando voc\u00ea fazer\u2026<\/p>\n

    Ent\u00e3o, voc\u00ea foi direcionado exatamente para o mesmo lugar que antes, quando voc\u00ea primeiro acessou o reposit\u00f3rio e atrav\u00e9s de um click acabou na pasta \/docs\/. O que aconteceu \u00e9 que o roteamento do servidor acabou de cumprir o seu papel \u2014 papel esse que um roteador de cliente n\u00e3o assumiria.<\/p>\n

    Para trabalhar com pushState<\/a>, eu obrigatoriamente preciso de um roteador no cliente? Roteador \u00e9 nomenclatura, n\u00e3o algo s\u00f3lido. A l\u00f3gica dos roteadores em geral \u00e9 que voc\u00ea tem que observar uma altera\u00e7\u00e3o na URL; se houver uma altera\u00e7\u00e3o, ent\u00e3o fa\u00e7a algo. Salientando que \u201cse houver uma altera\u00e7\u00e3o\u201d, faz parte de roteadores de cliente \u2013 roteamento do servidor n\u00e3o tem capacidade de perceber \u201caltera\u00e7\u00f5es\u201d em tempo real (como eu disse, coisas diferentes!).<\/p>\n

    Para ilustrar melhor um roteador, veja o seguinte:<\/p>\n

    \"pOAnD\"<\/a><\/p>\n

    Esse \u201cdiagrama\u201d representa o modelo mais comum de roteamento. A princ\u00edpio, tudo s\u00e3o apenas nomes \u2013 o que significa que voc\u00ea pode ter uma estrutura exatamente igual a essa e nunca antes se deu conta. Al\u00e9m disso, obviamente, podem existir outros dispositivos entre os la\u00e7os dessa trilha \u2013 como models, helpers, etc \u2013, mas a di\u00e1spora de requisi\u00e7\u00f5es se move nesse fluxo; nesse sentido.<\/p>\n

    E quanto a seguran\u00e7a?<\/strong><\/p>\n

    Falando de seguran\u00e7a, a premissa \u00e9 trivial: proteja realmente a sua aplica\u00e7\u00e3o no servidor. O cliente \u00e9 para lidar com informa\u00e7\u00f5es que as pessoas precisam ver e interagir com elas. Ele jamais deve executar processos l\u00f3gicos de qualquer porte. De antem\u00e3o, o cliente deve servir para voc\u00ea mostrar mensagens de erros \u2013 o crit\u00e9rio por tr\u00e1s dessas mensagens \u00e9 que deve ser de responsabilidade do servidor: isso \u00e9 roboticamente imburl\u00e1vel.<\/p>\n

    Como seguran\u00e7a nunca \u00e9 demais, voc\u00ea pode juntar o \u00fatil ao agrad\u00e1vel: fa\u00e7a valida\u00e7\u00f5es duplex. Tente assegurar o m\u00e1ximo poss\u00edvel no navegador \u2013 se caso algo passar em branco ou for burlado, tenha certeza de que o servidor estar\u00e1 \u00e0 prova de balas. Efeito da a\u00e7\u00e3o e rea\u00e7\u00e3o: valida\u00e7\u00f5es no cliente exigem mais recursos por parte do usu\u00e1rio. Jamais se esque\u00e7a disso.<\/p>\n

    Ok, e onde entram as rotas + seguran\u00e7a? Ei, calma! A responsabilidade delas \u00e9 encaminhar pessoas para lugares. A higieniza\u00e7\u00e3o das pessoas que v\u00e3o passar pelas portas \u00e9 da responsabilidade de outrem.<\/p>\n

    \u2026 Mobile?<\/strong><\/p>\n

    As regras para aplicativos (web) mobile s\u00e3o as mesmas, mas sempre lembrando que as requisi\u00e7\u00f5es devem ser na menor quantidade poss\u00edvel para garantir uma velocidade de navega\u00e7\u00e3o mais satisfat\u00f3ria.<\/p>\n

    Se voc\u00ea se refere \u00e0 aplicativos nativos: isso \u00e9 assunto para um outro artigo!<\/p>\n

    Para acessar a resposta, eis o link<\/a>.<\/p>\n

    ——<\/p>\n

    Artigo de Guilherme Oderdenge, publicado originalmente no iMasters<\/a>.<\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"

    \t\t\t\tQual a vantagem e desvantagem das rotas serem feitas por server(php,asp.net, etc) ou serem por client(angularjs,emberjs,backbone\u2026)? Em rela\u00e7\u00e3o performance, qual tem maior? Seguran\u00e7a, mobile, usabilidade?\t\t\t\t<\/p>\n","protected":false},"author":1,"featured_media":2659,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[3,24],"tags":[76,99,158,167],"yoast_head":"\nServer-side routes vs. Client-side routes - Blog DialHost<\/title>\n<meta name=\"description\" content=\"Qual a vantagem e desvantagem das rotas serem feitas por server(php,asp.net, etc) ou serem por client(angularjs,emberjs,backbone\u2026)?\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.dialhost.com.br\/blog\/server-side-routes-vs-client-side-routes\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Server-side routes vs. Client-side routes - Blog DialHost\" \/>\n<meta property=\"og:description\" content=\"Qual a vantagem e desvantagem das rotas serem feitas por server(php,asp.net, etc) ou serem por client(angularjs,emberjs,backbone\u2026)?\" \/>\n<meta property=\"og:url\" content=\"\/blog\/server-side-routes-vs-client-side-routes\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog DialHost\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/www.facebook.com\/DialHost\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/DialHost\" \/>\n<meta property=\"article:published_time\" content=\"2014-09-24T13:16:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.dialhost.com.br\/blog\/wp-content\/uploads\/2019\/04\/og-image.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@dialhost\" \/>\n<meta name=\"twitter:site\" content=\"@dialhost\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/#organization\",\"name\":\"DialHost Internet\",\"url\":\"https:\/\/www.dialhost.com.br\/blog\/\",\"sameAs\":[\"http:\/\/www.facebook.com\/DialHost\",\"https:\/\/www.instagram.com\/dialhost_oficial\/\",\"https:\/\/www.linkedin.com\/company\/dialhost-internet\",\"https:\/\/www.youtube.com\/channel\/UCAiqiX8IiqTSfA8wQhpzgXQ\",\"https:\/\/twitter.com\/dialhost\"],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/#logo\",\"inLanguage\":\"pt-BR\",\"url\":\"https:\/\/www.dialhost.com.br\/blog\/wp-content\/uploads\/2019\/03\/marca-dialhost.png\",\"width\":81,\"height\":81,\"caption\":\"DialHost Internet\"},\"image\":{\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/#website\",\"url\":\"https:\/\/www.dialhost.com.br\/blog\/\",\"name\":\"Blog DialHost\",\"description\":\"Os melhores conte\\u00fados sobre Desenvolvimento Web, Marketing e Neg\\u00f3cios\",\"publisher\":{\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/www.dialhost.com.br\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/server-side-routes-vs-client-side-routes\/#primaryimage\",\"inLanguage\":\"pt-BR\",\"url\":\"\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/server-side-routes-vs-client-side-routes\/#webpage\",\"url\":\"https:\/\/www.dialhost.com.br\/blog\/server-side-routes-vs-client-side-routes\/\",\"name\":\"Server-side routes vs. Client-side routes - Blog DialHost\",\"isPartOf\":{\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/server-side-routes-vs-client-side-routes\/#primaryimage\"},\"datePublished\":\"2014-09-24T13:16:12+00:00\",\"dateModified\":\"2014-09-24T13:16:12+00:00\",\"description\":\"Qual a vantagem e desvantagem das rotas serem feitas por server(php,asp.net, etc) ou serem por client(angularjs,emberjs,backbone\\u2026)?\",\"breadcrumb\":{\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/server-side-routes-vs-client-side-routes\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.dialhost.com.br\/blog\/server-side-routes-vs-client-side-routes\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/server-side-routes-vs-client-side-routes\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"item\":{\"@type\":\"WebPage\",\"@id\":\"\/blog\/\",\"url\":\"\/blog\/\",\"name\":\"In\\u00edcio\"}},{\"@type\":\"ListItem\",\"position\":2,\"item\":{\"@type\":\"WebPage\",\"@id\":\"\/blog\/server-side-routes-vs-client-side-routes\/\",\"url\":\"\/blog\/server-side-routes-vs-client-side-routes\/\",\"name\":\"Server-side routes vs. Client-side routes\"}}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/server-side-routes-vs-client-side-routes\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/server-side-routes-vs-client-side-routes\/#webpage\"},\"author\":{\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/#\/schema\/person\/a0b10cbe35449dea173a06d4664f9fcc\"},\"headline\":\"Server-side routes vs. Client-side routes\",\"datePublished\":\"2014-09-24T13:16:12+00:00\",\"dateModified\":\"2014-09-24T13:16:12+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/server-side-routes-vs-client-side-routes\/#webpage\"},\"publisher\":{\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/server-side-routes-vs-client-side-routes\/#primaryimage\"},\"keywords\":\"desenvolvimento,feed de parceiros,noticias,php\",\"articleSection\":\"Dicas e Not\\u00edcias,PHP\",\"inLanguage\":\"pt-BR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/#\/schema\/person\/a0b10cbe35449dea173a06d4664f9fcc\",\"name\":\"DialHost Internet\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/#personlogo\",\"inLanguage\":\"pt-BR\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/05feec2f99aef1c42b09aeaa637ee66f?s=96&r=g\",\"caption\":\"DialHost Internet\"},\"description\":\"H\\u00e1 mais de 18 anos proporcionando um servi\\u00e7o de hospedagem de sites voltado 100% na Experi\\u00eancia e Sucesso do Cliente, prezando a qualidade, transpar\\u00eancia e seguran\\u00e7a.\",\"sameAs\":[\"https:\/\/www.facebook.com\/DialHost\",\"https:\/\/www.instagram.com\/dialhost_oficial\/\",\"https:\/\/www.linkedin.com\/company\/dialhost-internet\",\"https:\/\/twitter.com\/dialhost\",\"https:\/\/www.youtube.com\/channel\/UCAiqiX8IiqTSfA8wQhpzgXQ\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/www.dialhost.com.br\/blog\/wp-json\/wp\/v2\/posts\/2784"}],"collection":[{"href":"https:\/\/www.dialhost.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.dialhost.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.dialhost.com.br\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dialhost.com.br\/blog\/wp-json\/wp\/v2\/comments?post=2784"}],"version-history":[{"count":0,"href":"https:\/\/www.dialhost.com.br\/blog\/wp-json\/wp\/v2\/posts\/2784\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.dialhost.com.br\/blog\/wp-json\/wp\/v2\/media\/2659"}],"wp:attachment":[{"href":"https:\/\/www.dialhost.com.br\/blog\/wp-json\/wp\/v2\/media?parent=2784"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dialhost.com.br\/blog\/wp-json\/wp\/v2\/categories?post=2784"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dialhost.com.br\/blog\/wp-json\/wp\/v2\/tags?post=2784"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}