Next.js é um dos frameworks mais utilizados no ecossistema React. E uma das features que acho mais mais interessante é a forma que ele trata requisição de dados - imagino que pelo título do post, deu pra perceber que vamos falar disso, certo?
Em aplicações web modernas, podemos lidar com requisições de dados de algumas formas diferentes, mas hoje vamos focar em duas específicas: SSR e SSG.
O que são SSR e SSG?
SSR
SSR (Server Side Rendering), ou Renderização do Lado do Servidor vem para solucionar um pouco dos problemas das aplicações SPAs, mantendo suas principais vantagens. O SSR inverte o processo de renderização das SPAs, trazendo parte do esforço de renderização de aplicações para o servidor.
Com isso, a abordagem de utilizar SSR pode fornecer aos usuários uma experiência muito melhor e um tempo de carregamento bem mais eficiente, já que parte da renderização de cada requisição é feita no servidor. Com isso, o SSR também nos ajuda a lidar com problemas de SEO.
SSG
Por outro lado, o SSG (Static Site Generation), ou Geração de Site estático, vem para tentar simplificar alguns casos em que o SSR acaba sobrecarregando servidores de forma desnecessária. Ao invés de renderizarmos as requisições no lado do servidor, o conteúdo da aplicação é gerado de forma estática antes de ser enviado para o servidor. Esse processo pode ser feito por ferramentas conhecidas como Static Site Generators.
Então, após as páginas serem geradas, podemos usar qualquer serviço de hospedagem de páginas estáticas e servir nossa aplicação através de CDN - tornando nossa aplicação mais segura, mais rápida e mais escalável. Além da possibilidade de reduzir os custos com servidores.
SSR e SSG no Next.js
No Next.js, a forma que você faz as requisições dos dados na sua aplicação, define a forma que o conteúdo será servido para os usuários.
SSR
Se você exportar a função getServerSideProps em uma página, o Next.js vai renderizá-la no servidor em cada nova requisição.
function Page({ user }) {
return <div>Username: {user.name}</div>
}
export async function getServerSideProps(context) {
const user = { /* requested data */ }
return {
props: {
user
},
}
}
export default Page
SSG
Por outro lado, se você exportar uma função chamada getStaticProps, o Next.js vai pré-renderizar sua página no momento de build - normalmente quando você envia alterações para o seu projeto (via Git, por exemplo).
Como os dados serão gerados antes dos usuários acessarem a página, os dados renderizados nesta página serão os mesmos para todos os usuários que acessarem a aplicação. Por isso, esse tipo de estratégia é utilizada para conteúdos que podem ser compartilhados, guardados em cache e pré-renderizados, como posts de blog.
function Page({ post }) {
return <div>Title: {post.name}</div>
}
export async function getStaticProps(context) {
const post = { /* requested data */ }
return {
props: {
post
},
}
}
export default Page
Você também pode utilizar o React hook SWR, criado pelo time do Next.js. Se você precisa requisitar dados no browser (client-side), ele é muito recomendado. Ele vai manter os dados em cache, e vai atualizá-los assim que que esses dados estiverem obsoletos.
import useSWR from 'swr'
const fetcher = (...args) => {
return fetch(...args)
.then((res) => res.json())
}
function Page() {
const { user, error } = useSWR('/api/user', fetcher)
if (error) return <>Error</>
if (!user) return <>Loading...</>
return <>Username: {user.name}</>
}
