Enviando apenas dados necessários ao cliente
Uma ilha determina um componente interativo e que será hidratado no lado do cliente. O servidor manda todos os dados dasprops
de ilhas para fazer a hidratação, bem como o browser precisa de tempo para processar e renderizar essas ilhas. Por isso, é importante tomar alguns cuidados no uso de ilhas:
- Reduza ao máximo a quantidade de props a ser enviada / utilizada para uma ilha
- Torne uma ilha apenas o que for necessário, lembrando de usar o
children
para elementos internos que não precisam de hidratação.
useEffect
,
useSignal
, etc…). É possível visualizar no tamanho do JSON final através da
aba Performance de uma das páginas do seu site no CMS deco.
❌ Abordagem inadequada
✅ Abordagem correta
children
da ilha.
❌ Abordagem inadequadaNo exemplo abaixo, criamos uma ilha que interage com o
localStorage
para
definir um título para uma galeria de itens. No exemplo abaixo, tanto os props
de gallery serão inseridos para hidratar o TitleContainer
, como serão também
inseridos para poder hidratar o Gallery
.
✅ Abordagem corretaSe, no entanto, o
Gallery
for repassado como children para a ilha, ele será
renderizado, serializado e não será hidratado! Para o TitleContainer
, o
children
é um html pronto para ser exibido, e, portanto, não é uma ilha em si.