Local de favicon e manifest
Closed this issue · 4 comments
Lines 13 to 15 in df94cd1
Estava analisando a documentação do Next.js para entender a diferença do Head no _app e no _document, pelo que entendi tudo que é "global" para todas as páginas deve ser no _document e tudo que é "único" deve ser em específico para cada página.
"The component used here _(document) is not the same one from next/head. The component used here should only be used for any code that is common for all pages. For all other cases, such as <title> tags, we recommend using next/head in your pages or components."
Procurei para ver como utilizam no site do Next: https://github.com/vercel/next-site/blob/master/pages/_document.js
Neste caso favicons, scripts (Google Analytics...), manifest e outros itens do gênero ficariam no _document, correto? É algo indiferente?
Opa, tanto o _document quanto o _app são chamados em todas as páginas do NextJS. A diferença maior é que o _document é renderizado somente em server side, enquanto a _app é renderizado em server side e também no processo hydration.
Portanto, nós costumamos usar o _document para coisas realmente mais fixas ou processos de renderização (coisas como o SSR do Styled Components e similares).
Enquanto na _app nós usamos coisas que vão persistir entre páginas, como estados e estilos.
Sobre usar as metatags/manifest seja no _document ou _app, eu diria que é quase um "tanto faz", só teria que ficar atento com a questão de "esse script precisa rodar client side?" se a resposta for sim, então ele só pode no _app.
Eu costumo usar manifest/favicons/meta tags no _app, pois quase sempre utilizo o next-seo no projeto, é esse o comportamento que eles recomendam.
O interessante de como é realmente bem "tanto faz", é que o site do Hyper, que também é da Vercel, já bota essas configs direto num component de page:
https://github.com/vercel/hyper-site/blob/main/components/page/index.js#L18-L41
Opa, obrigado pela resposta @willianjusten, realmente parece que é "tanto faz", mas a ideia de algo ser SSR e ir para _document parece se adequar.
Surgiu essa dúvida apenas por ser algo "similar" mas diferente ao mesmo tempo.
Novamente obrigado.
Só lembrando que o _app também é gerado via Server Side tá, só não confundir. O que acontece, é que depois de você iniciar a aplicação Next no Browser, ele possui um JS minimo que roda em run time, para deixar a página interativa (aplicando handlers de onClick, querySelectors e quaisquer outras coisas que necessitem do DOM). Esse processo é o chamado hydration.
Então, só para confirmar, o _app também é pré-renderizado via server side e o SEO também vai ser bem cuidado por lá tá =)
Você pode ler mais dessa parte de pre-rendering aqui