React com React Router

OBS: Essa parte pode ser melhorada caso tenhamos disponível uma CLI para gerar os projetos

O React Charger foi criado pensando em utilizar Redux por padrão. Porém em projetos que não utilizem é perfeitamente possível trabalhar com o React Charger.

Configurações

Primeiramente, você deve baixar o projeto neste link: https://github.com/omariosouto/react-charger-razzle

Após ter baixado, deve comentar os códigos referentes ao Redux:

./src/client.js

./src/server/index.js

Após comentar os códigos do Redux, seu arquivo ./src/pages/Home/index.js deve estar com o seguinte código:

Como funciona/fazer o Server Side Render?

• Quando a URL "/" for acessada o servidor irá pegar o componente <Home>

• O servidor irá resolver todos os fetchs dentro do objeto retornado pelo método getInitialData();

• Após pegar os dados iniciais, o servidor irá gerar a versão inicial da sua aplicação injetando os dados dinâmicos por meio do atributo no props do seu componente props.staticContext

• Já no lado do client, você terá acesso aos dados dinâmicos por meio de window.__PRELOADED_STATE__

• É importante ressaltar que o importante é que você use esses dois valores no construtor do seu componente e decida como preencher o state inicial da aplicação em cada lado. Um código bem comum é o do exemplo abaixo: