Iniciando com server-side rendering (SSR) no ReactJS com Next.js

A renderização da aplicação ReactJS para o servidor, tem como? Sim, o NodeJS permite criar componentes React no lado back-end e trazê-los prontos ao carregar a tela.

Next.js

O Next.js é um framework de aplicativos da web gratuito e de código aberto baseado em ReactJs, Node.js, Webpack e Babel.js

O Next.js é alternativa ao gatsby, na qual são dois frameworks de ReactJs muito bem falados e também é muito popular.

O Next.js ele tinha o seu caso de uso específico e o gatsby também tinha o que acontece é que hoje, o Gatsby atualmente é utilizado mais para a Static Site Generator(gerador de site estático) ou seja a criação/geração de alguns sites estáticos.

Já o Next.js esse framework ele já funcionava bem com o server-side rendering(SSR) react.

A renderização do lado do servidor server-side rendering(SSR) é uma técnica popular para renderizar um single page application(SPA) normalmente do lado do cliente no servidor e enviar uma página totalmente renderizada ao cliente. O pacote JavaScript do cliente pode assumir o controle e o SPA pode operar normalmente.

O Next.js ele tinha o server-side rendering e o pessoal utilizava isso bastante para criar aplicações dinâmicas com o SEO (Search Engine Optimization),

Qual o Framework usar em cada caso?

O CRA(create-react-app) é normalmente utilizado na maioria das vezes para criar aplicações dinâmicas que não precisem de SEO, ou seja, quando não precisar que o site fique INDEXADO o site na busca do GOOGLE não precisa utilizar nem o Next.js nem o gatsby então você pode simplesmente utilizar o CRA, que ele atende ao que desejar.

O primeiro caso de uso do gatsby é quando você precisa ter um site estático pequeno, como um blog que não precisa ser atualizado constantemente, como por exemplo 2 vezes na semana.

Quando tem por exemplo um site como o MercadoLivre, vai precisar ter um SEO (Search Engine Optimization), pois ele precisa está indexado no Google o tempo todo. Logo, como os produtos são muito dinâmico, tem que usar o Next.js, pois é a melhor opção porque ele consegue lidar assim como gatsby + SEO, consegue lidar com muito mais dados de forma simultânea.

Obs.: Por debaixo dos panos no final vai ser React que vamos lidar com essas 3 Frameworks.

Next.js ele é mais focado no server-side rendering então pode ter um servidor(uma api) rodando por exemplo que vai retornar alguns dados. O gatsby hoje ele oferece um bom Static Site Generators só que o Next.js ele consegue não só oferecer o Static Site Generators mas também o server-side rendering, logo se tem um servidor quando se trata de Next.js, tendo a simplicidade de um servidor que consegue rodar sites estáticos e ao mesmo tempo consegue expor server-side rendering.

Comentários