Server Render, ou renderização pelo servidor em uma “xula” tradução livre, é considerado uma má prática, ou pelo menos me ensinaram assim, e devo concordar que nunca vi esse tipo de técnica com bons olhos, todos os códigos que vi na vida que criavam algum script javascript em lado de servidor, ou uma montagem de html no lado do servidor, era de difícil manutenção e de difícil compreensão (normalmente uma gambiarra adaptação técnica para contornar alguma situação bem específica).

Pois bem, em um outro post comentei sobre o ReactJS e como ele vem oferecendo uma nova proposta dessa técnica de uma forma prática e produtiva, o que vem contra muitos conceitos e padrões de desenvolvimentos web que vemos no mercado, pois bem, fiquei devendo uma explicação e uma aplicabilidade desse comentário, e eis-me aqui para pagar essa dívida.

Todo o projeto está disponível aqui.

O README já é bem explicativo, mas irei detalhar os fontes envolvidos.

  • App.js – Fonte com instruções do ReactJS, nada além disso.
  • Browser.js – Fonte com as instruções para integração do browser (front end).
  • Server.js – Fonte com as instruções de renderização do server (sem framework, apenas nodejs puro).

Gostaria de ressaltar o seguinte, aqui não foi usado um builder, ou seja, foi utilizado apenas o ReactJS com javascript puro, assim como no lado do servidor foi utilizado apenas NodeJS, sem utilizar um framework (como o express) ou gerador de conteúdo estático (como o middleman ou o jekyll), obviamente a produtividade vai além abrangendo outras tecnologias, mas como o objetivo é apenas denotar a forma de utilização da renderização no lado do servidor, foi optado utilizar dessa forma.

// <![CDATA[

function safeStringify(obj) {
return JSON.stringify(obj).replace(/<\/script/g, '<\\/script').replace(/<!–/g, '

Twitter