O que é?

É um framework web desenvolvido em ReactJS.

Porque usar?

Facilita o desenvolvimento de aplicações.

O que o Next faz?

• Renderização no servidor (SSR - Server Side Rendering)
• Geração de estáticos (SSG - Static Site Generation)
• Criação de SPA's (Single Page Application)
• CSS-in-JS (Syled-jsx, Styled Components, Emotion)
• Zero Configuration (rotas, hot reloading, code splitting...)
• Completamente extensível (Babel/Webpack, plugins...)
• Otimizado para produção

Tipos de uma aplicação

Static Site (HTML/CSS/JS) - GatsbyJS, Hexo

Vantagens:

• Uso quase nulo do servidor
• Pode ser servido numa CDN (melhor cache)
• Melhor performance
• Dá pra usar qualquer servidor

Desvantagens:

• Tempo de build pode ser muito alto
• Dificuldade para escalar em aplicações grandes
• Dificuldade para realizar atualizações constantes

Quando usar:

• Site simples sem muita interação do usuário
• Quando você é a única pessoa que publica conteúdo
• Se o conteúdo muda pouco
• Quando a performance for extremamente importante

Ex: Landing Pages, Blogs, Portfólios

Client Side Rendering (SPA) - React, Vue, Angular

Vantagens:

• Permite páginas ricas em interações sem recarregar
• Site rápido após o load inicial
• Ótimo para aplicações web

Desvantagens:

• Load inicial pode ser muito grande
• Performance imprevisível, depende do tamanho dos arquivos JS
• Dificuldades no SEO
• A maioria do conteúdo não é indexado

Quando usar:

• Quando não há muita necessidade de ser indexado pelo Google
• Quando refreshs entre rotas não são desejáveis
• Quando as informações pra cada usuário vão ser diferentes (autenticação, por exemplo)

Ex: Twitter Web, Facebook Web, Spotify Web

Server Side Rendering (SSR) - NextJS, Nuxt

Vantagens:

• Ótimo em SEO
• Meta tags com previews mais adequados
• O conteúdo pode ser visto mais rápido
• Pode ter código compartilhado com o backend em Node
• Menor processamento no lado do usuário (ideal para dispositivos mais lentos)

Desvantagens:

• Primeiro acesso mais demorado
• HTML maior
• Reload completo nas mudanças de rota

Quando usar:

• Quando há várias interações, como um SPA, mas precisa de loading mais rápido
• Quando o conteúdo muda frequentemente
• Quando há um número muito gande de páginas
• Quando precisa de uma boa indexação no Google

Ex: Ecommerce, sites de notícias