Prompt para server-side rendering em React

"Crie um guia detalhado e prático para desenvolvedores React, focado na implementação de Server-Side Rendering (SSR) utilizando Next.js. O guia deve abordar os seguintes pontos, com exemplos de código concisos e claros:

1. **Benefícios do SSR:** Explique por que o SSR é crucial para aplicações React modernas, focando em SEO, performance inicial (Core Web Vitals) e experiência do usuário.
2. **Configuração inicial:** Demonstre como iniciar um projeto Next.js e configurar as rotas básicas para SSR.
3. **Fetching de dados:** Apresente e compare `getServerSideProps` e `getStaticProps`, explicando quando usar cada um e demonstrando a busca de dados de uma API externa (pode ser um mock).
4. **Hidratação:** Explique o conceito de hidratação e como o Next.js lida com isso automaticamente, mas também como lidar com cenários mais complexos (ex: componentes interativos que precisam de estado no cliente).
5. **Estilização:** Demonstre como aplicar estilos CSS (usando CSS Modules ou Styled Components) em componentes renderizados no servidor, garantindo que os estilos sejam carregados corretamente.
6. **Desafios e soluções:** Aborde problemas comuns como o 'flicker' (flash de conteúdo sem estilo), gerenciamento de estado no SSR (ex: Redux ou Context API), e como lidar com cookies/autenticação em um ambiente SSR.
7. **Boas práticas:** Ofereça dicas para otimizar o SSR, como caching, lazy loading de componentes e análise de performance.

O guia deve ser didático, com uma linguagem clara e acessível, ideal para desenvolvedores que já possuem conhecimento básico em React e desejam aprofundar-se em SSR com Next.js."