React JS
Desvendando o Next.js
Se você trabalha com React a algum tempo, sabe que existe uma dificuldade em projetos criados para serem indexados por motores de busca. E nesse contexto entra o Next.js, que é uma framework que funciona com uma camada intermediária em Node entre o Frontend e o Backend.
React + Node = Next.js
Se você programa a muito tempo, talvez lembre-se da época em que construímos sites e sistemas em PHP ou .Net, onde toda página era construída do lado do servidor e devolvida para o cliente. O Next.js funciona de forma parecida, onde as páginas são renderizadas e passadas para o frontend já montadas, através de um servidor Node.js que roda na camada intermediária. Essa funcionalidade é chamada de SSR (Server Side Rendering) e nós permite devolver todos os dados de uma página de uma só vez para o frontend (React) onde os mecanismos de busca serão capazes de ler a página com todo o conteúdo montado.
Além do SSR, o Next.js permite criar projetos com o SSG (Static Site Generation), que são páginas estáticas e que podem ser atualizadas de tempos em tempos.
É bom frisar que o Next.js não remove nenhuma flexibilidade ou acrescenta muito mais coisas ao React que já conhecemos, dessa forma a sua utilização não irá impactar nos projetos que você tem e ainda vai poder continuar a construir os seus projetos SPA (Single Page Application), mas irá terá a disposição as vantagens do SSR e SSG.
Funcionalidades que o Next.js adicionar ao React
Antes de detalharmos o SSR e o SSG, devemos observar que o Next.js possui algumas outras funcionalidades que são adicionadas ao React.
- Hot Code Reloading: Alterações no código do projeto em desenvolvimento são repassadas em tempo real para a aplicação local de forma automática.
- Code Splitting Automático: Essa funcionalidade permite que somente algumas partes de uma página sejam renderizadas de acordo com os pacotes que elas precisam.
- Roteamento Automático: Não necessitamos de configuração para fazer o roteamento das páginas na aplicação, as URLs são mapeadas com base na pasta pages, de forma que um arquivo nessa pasta se torna em uma rota que pode ser customizada caso haja necessidade.
- Internacionalização: É possível traduzir páginas para idiomas diferentes em tempo real utilizando a internacionalização.
- Suporte ao TypeScript: O Next.js tem suporte ao TypeScript e caso você não saiba o que é clique aqui e veja um artigo sobre esse assunto.
- CSS Modules: Podemos modularizar o nosso css de forma que o css de uma página não interfira em outra.
- Otimização de Imagem: O Next possui um componente para otimização de imagens.
Server Side Rendering
O SSR oferece uma estratégia diferente da normalmente utilizada para consumir dados de uma API, onde costumamos utilizar useEffect. O ponto aqui, é que ao utilizar o useEffect, os dados não serão carregados no momento em que a página é apresentada ao navegador, dessa forma os motores de busca não serão capazes de indexar a informação que é retornada pela API.
Essa estratégia é chamada de Client Side Fetching, e deve ser utilizada quando não temos a necessidade que os dados sejam indexados por motores de busca. Você verificar isso desabilitando o javascript no seu navegador e verá que o conteúdo vindo da API não será carregado.
import React, { useEffect, useState } from 'react';
import api from '../service/api';
interface ICategories {
id: number;
name: string;
}
export default function Categories() {
const [categories, setCategories] = useState<ICategories[]>([]);
// Chamada à API com Client Side Fetching
useEffect(() => {
api.get('http://localhost:3333/categories').then(response => {
setCategories(response.data);
})
}, []);
return (
<div>
<h1>Categories</h1>
<section>
<ul>
{categories.map(category => {
return (
<li key={category.id}>
{category.name}
</li>
)
})}
</ul>
</section>
</div>
)
}Para resolver isso utilizamos o SSR , que é a característica que tornou o Next.js tão famoso. Nela deixamos de lado o useEffect e utilizamos uma função chamada getServerSideProps que possui o tipo GetServerSideProps, com ela o Next.js irá retornar a página pré renderizada já com o resultado dessa função, sendo possível ter acesso ao retorno da função através de propriedades que devem ser previamente tipadas para facilitar o acesso.
import { GetServerSideProps } from 'next';
interface ICategories {
id: number;
name: string;
}
interface CategoryProps {
categories: ICategories[];
}
export const getServerSideProps: GetServerSideProps<CategoryProps> = async () => {
const response = await api.get('http://localhost:3333/categories');
const categories = await response.data;
return {
props: {
categories
}
}
}
export default function Home({ categories }: CategoryProps) {
return (
<div>
<h1>Categories</h1>
<section>
<ul>
{categories.map(category => {
return (
<li key={category.id}>
{category.name}
</li>
)
})}
</ul>
</section>
</div>
)
}Com o Server Side Rendering resolvemos o problema de indexação dos motores de busca, mas devo ressaltar que isso possui um custo e a utilização desse recurso deve ser somente quando for necessário que a informação seja indexada por motores de busca.
Static Site Generation
Pegando como exemplo um blog ou um e-commerce, onde as páginas sempre apresentam o mesmo conteúdo para os usuários e que possuem uma frequência baixa de atualização. Nesse cenário o Next.js apresenta o Static Site Generation, onde temos uma página estática que não sofre uma atualização constante e temos um ganho de performance muito alto ao servir páginas dessa maneira.
Para criarmos uma página com essa funcionalidade utilizamos o GetStaticProps que é muito semelhante ao GetServerSideProps utilizado no SSR, mas aqui há um detalhe importante. Devemos indicar para a função quando o conteúdo deve ser atualizado em segundos, através da de uma propriedade chamada “revalidade”.
Veja no código abaixo como utilizar o GetStaticProps no mesmo exemplo de categorias e com um tempo de atualização de 60 segundos:
import { GetStaticProps } from 'next';
interface ICategories {
id: number;
name: string;
}
interface CategoryProps {
categories: ICategories[];
}
export const getStaticProps: GetStaticProps<CategoryProps> = async () => {
const response = await api.get('http://localhost:3333/categories');
const categories = await response.data;
return {
props: {
categories
},
revalidate: 60,
}
}
export default function Home({ categories }: CategoryProps) {
return (
<div>
<h1>Categories</h1>
<section>
<ul>
{categories.map(category => {
return (
<li key={category.id}>
{category.name}
</li>
)
})}
</ul>
</section>
</div>
)
}Conclusão
Por tanto o Next.js é um conjunto que nós permite ter de uma só vez, projetos com SPA, SSR e SSG. Mas devemos avaliar bem onde utilizaremos cada função em nossos projetos, por ser muito versátil e fácil aprendizagem por ser utilizada em muitos projetos.
Espero que este post tenha sido útil para você e se gostou compartilhe com seus amigos e não deixe de acessar outros conteúdos do blog.
Referências
Explore mais