SSR (Server-Side Rendering) é outro método de geração de páginas em Next.js. Neste artigo, quero explicar o que é SSR, como funciona e como implementá-lo no Page Router e no App Router de um projeto Next.js.

O que é RSS?

SSR é um método de geração de uma página estática (ou página pré-renderizada) depois que um usuário faz uma solicitação. Isso significa que uma página estática é gerada a cada solicitação. Este método é útil para páginas que precisam ser atualizadas com frequência, pois garante que os dados estejam sempre atualizados

Como funciona a RSS?

Quando você usa SSR em Next.js, toda vez que um usuário solicita uma página onde o SSR é implementado, a página é gerada após a solicitação ser feita. Isso significa que o usuário precisa esperar enquanto Next.js gera e agrupa o conteúdo estático novamente para cada solicitação. Assim que a página estática estiver pronta, o usuário poderá ver a página solicitada.

É importante observar que o SSR roda apenas no servidor e gera uma página estática para cada solicitação, portanto não é executado durante o processo de construção do projeto.

Como implementar SSR no App Router

Para implementar SSR no App Router, você não precisa escrever uma função especial ou definir uma configuração específica porque ela está habilitada por padrão nos componentes do seu servidor.

Por exemplo, se você tiver uma página estática e buscar dados de uma API, esta página usará SSR por padrão. É importante observar que quando o SSR é usado, a página não é empacotada ou pré-renderizada no momento da construção. E se você usar uma página dinâmica no seu projeto, ela usará o SSG por padrão se você não buscar nenhum dado. Mas quando você busca em uma API, ela muda para SSR e, novamente, nenhuma página estática será agrupada durante o tempo de construção.

este é um exemplo de implementação de SSR em rota estática:

import React from 'react';

const AboutPage = async () => {
  // Fetch data from an API or any server-side source
  const data = getDataFromApi();

  return (
    

      
About Us
      
{data}
    
  );
};

export default AboutPage;

Como implementar SSR no roteador de páginas

Para implementar SSR no roteador de página, você precisa criar uma função getServerSideProps em seu arquivo. Esta função será chamada após cada solicitação do usuário. Se estiver usando uma rota dinâmica, como um arquivo [id], você também precisará usar getServerSideProps em seu arquivo. Esta função recebe um argumento, geralmente denominado contexto, do qual você pode recuperar o id, o valor da página dinâmica. Esta função é chamada pelo servidor em cada solicitação do usuário.

este é um exemplo de implementação no arquivo tsx:

import { GetServerSideProps } from 'next';

interface AboutProps {
  data: string;
}

const AboutPage: React.FC = ({ data }) => {
  return (
    

      
About Us
      
{data}
    
  );
};

// This function runs on the server on every request
export const getServerSideProps: GetServerSideProps = async () => {
  const data = getDataFromApi();
  return {
    props: {
      data,
    },
  };
};

export default AboutPage;

este é um exemplo de implementação em arquivo jsx:

const AboutPage = ({ data }) => {
  return (
    

      
About Us
      
{data}
    
  );
};

// This function runs on the server on every request
export async function getServerSideProps() {
  const data = getDataFromApi();

  return {
    props: {
      data,
    },
  };
}

export default AboutPage;

Conclusão

SSR é um método útil para agrupar ou criar páginas estáticas, mas isso não acontece durante o tempo de construção. Quando precisar que sua página seja atualizada a cada solicitação do usuário para que os usuários possam ver os dados mais recentes, você pode usar o SSR. No entanto, é importante observar que pode levar mais tempo e não é tão rápido quanto outros métodos como SSG (Geração de site estático) ou ISR (Regeneração estática incremental) porque gera uma página estática para cada solicitação do usuário.

Espero que você tenha gostado deste artigo! Se você tiver alguma dúvida, fique à vontade para me perguntar. Se você quiser ler sobre ISR e SSG, pode conferir meus artigos sobre eles aqui para ISR e aqui para SSG. Se quiser saber mais sobre tudo, pode acompanhar meu site.

Obrigado por ler! Adeus por agora!