Quais são as vantagens de desempenho do uso do React Router em comparação com o roteamento do lado do servidor?

Existem 2 formas principais de as aplicações web se comportarem hoje:

• Um usuário vai para url /page/1, um roteador do lado do servidor pega isso, analisa seus dados (o usuário quer a página #1), então o servidor renderiza o HTML estático no servidor para a página #1 e envia o conteúdo HTML completo para o usuário. Não há necessidade de nenhum JavaScript para rodar no lado cliente para este caso.
• Um usuário vai para url /page/1, o servidor envia um documento HTML vazio, e um arquivo JavaScript. O arquivo JavaScript no cliente vai analisar a localização da url, e gera dinamicamente o HTML relacionado à Página 1 no cliente usando JavaScript.

i>presumo que você já saiba disso, estou apenas estabelecendo uma linha base.

O que acontece a seguir é a parte mais interessante:

P> Vamos assumir que o conteúdo da página #1, tinha um link para /page/2, aqui você tem 2 opções radicalmente diferentes:

>ul> Volte ao servidor e peça um novo documento HTML completo para a página #2 Com Ajax, pergunte ao servidor sobre apenas os dados para a página #2, e use JavaScript para substituir o conteúdo da página#1 por um novo conteúdo que você gera dinamicamente com JavaScript.

Voltar ao servidor e pedir um novo arquivo HTML é muito mais lento do que pedir apenas os dados e gerar o conteúdo no front-end. Você definitivamente deve fazer o último, que é onde bibliotecas como a Reactrouter brilha.

React router ajuda você a declarar o que deve ser renderizado em cada página, e cuida do gerenciamento da mudança de URL (quando o usuário clica naquela /página/2, por exemplo). Se você estiver usando JavaScript para substituir o conteúdo da página, você também terá que adicionar um registro no histórico do navegador para que o usuário possa clicar para voltar para /page/1. Reactrouter torna esse processo um pouco mais fácil.

Pense agora no que deve acontecer quando outro usuário abrir seu navegador e ir diretamente para /page/2, vamos passar por todas as opções novamente.

No entanto, como temos o Node.js, podemos reutilizar as rotas que definimos no cliente e torná-las a fonte do que deve acontecer no servidor. Desta forma você obtém o melhor de ambos os mundos, o usuário que for diretamente para /página/2 será servido do lado do servidor, e o usuário que clicar em /página/2 página de formulário #1 será servido do lado do cliente, que é muito mais rápido.

Hope que ajuda.

Eu crio cursos online para Pluralsight, Lynda, e Packt. Meu próximo curso Lynda cobrirá o stack completo de desenvolvimento JavaScript com Node e React, mas ainda não saiu, fique de olho no meu fluxo social para receber uma notificação, ou inscreva-se para minhas atualizações no CodingDigest.com

Siga-me no Twitter @samerbuna e no EdgeCoders.com