Dúvida sobre Redux

[edersign]

Opa tudo bem, @fdaciuk ?

Estou trabalhando em um projeto, não tem tanta relação direta com o curso, se puder me ajudar fico muito agradecido.

Neste projeto estou passando um site em WP com Woocommerce, sem venda, somente catálogo. A ideia é um PWA, alimentado via REST.

Pra tentar agilizar o processo procurei por algum boilerplate completos com SSR, Coding-split, isomorphic, .... encontrei alguns, e desses testei fazendo uma conexão com axios que funciona em um projeto CRA, por exemplo.

A dúvida 1: A initialState da store tem limite de dados ?! Pois exemplo, esse que funcionou legal https://github.com/wellyshen/react-cool-starter o código de exemplo, mesmo na versão de dev escreve no html, e os dados iniciais do, a REST inicial traz 10 produtos somente, que pretendo deixar assim pra home. Imaginei que pode ser por que o Dom gera a página antes de terminar o download da REST, que leva em média 2s, e não sincroniza, Estou certo no sincronismo ou é uma relação de tamanho ? Ou o erro está no boilerplate ?

A dúvida 2: Essa questão nem entra tanto em ao curso ou a react, seria talvez uma sugestão, como trabalhar em uma lógica de versão pra REST ? por exemplo, baixei a rest no meu cel e, entrei no site e faço uma checagem de versão e uso a versão em localStorage, ou isso é complexo e mais simples, sempre baixar baixar o JSON, por garantia que sempre fique atualizado ? Usar content-length de comparação ?

Bem é isso, se puder me ajudar, fico muito agradecido.

Grande abraço.

[fdaciuk]

Oi @edersign! Para fazer SSR, recomendo fortemente o uso do after.js. O initialState não tem limite de dados. Na verdade, o limite vai ser sempre a memória do computador que vai processar essa informação, então o ideal seria colocar nesse objeto apenas o necessário para um primeiro render, e depois ir ajustando o estado conforme a navegação do usuário.

Sobre o problema da sincronização, depende de como está o seu código: se você estiver servindo o HTML antes dos dados do initialState estarem prontos, ele não vai trazer os dados corretamente mesmo. O correto seria aguardar o fim do request para enviar os dados para o frontend.

Essa segunda dúvida é a pergunta de 1 milhão =)

Fazer cache e saber quando atualizar parece uma tarefa trivial, mas dificilmente você vai acertar o ponto exato. É um problema generalizado ainda. Na documentação de PWA do Google eles te dão algumas formas para tentar fazer isso da melhor maneira possível, dá uma olhada aqui e aqui.

Acho que é isso! No que eu puder ajudar, só avisar =)

[edersign]

E ai @fdaciuk,

Obrigado pelo retorno e desculpe a demora no feedback,. Gostei das sugestões, testei o After e não consegui fazer funcionar, não sei se foi alguma orelhada minha ou um bug com redux, por que, estava recebendo erros com meu teste e procurei por alguns projetos usando o After, instalei a versão que estava e funcionava, atualizava pra ultima versão e dava o mesmo erro.

Continuei fazendo os teste e achei essas soluções baseadas no CRA, e gostei bastante da versão 2, cra-ssr, e fiz mais alguns teste de sincronia com inital state e coding split, estou usando o https://github.com/ctrlplusb/react-async-component e https://github.com/ctrlplusb/react-jobs, definidos em testes rápidos feito no lighthouse e usou menos First CPU Idle e foi muito mais rápido no Estimated Input Latency, as outras métricas de performance foram bem parecidas.

Um detalhe interessante, fazendo em teste A/B mesmo foi que, pra conectar ao woocommerce via axios, o fetch leva o dobro do tempo, tirei e pra usar um polyfill para o servidor, estou usando o isometric fetch.

Em breve compartillho meu código.

Obrigado pelas dias e os links.

[fdaciuk]

Show de bola @edersign! Qualquer coisa que precisar, conte comigo =)

[edersign]

Obrigado!

um grande abraço.