Conceitos de SSR e Roteamento Básico

Palamar

Palamar

Full-Stack Developer, NextJS + ReactJS + JavaScript.

Conceitos de SSR e Roteamento Básico

O que é renderização do lado do servidor?#

(Como estou acostumado a usar o React, os exemplos ou conceitos a seguir serão escritos no React) Antes de falar sobre Server-Side-Rendering, quero falar sobre o conceito correspondente: Client-Side-Rendering (CSR). Após a popularidade dos frameworks front-end (React, Vue, Angular), o SPA (Single-Page-Application) surgiu como cogumelos, e seu conceito operacional é o seguinte: Arquivos HTML que costumavam ser recheados com vários elementos, agora só colocam uma tag como um “contêiner”, como no exemplo a seguir

<html>
<head></head>
<body>
<div id="root"> </div>
<script src = "./script.js"> </script>
</body>
</html>

Geração de site estático (SSG)#

Isso significa que o HTML é gerado pelo servidor no momento da construção e as solicitações subsequentes do cliente compartilharão esse HTML. A vantagem de utilizar este método é o desempenho, pois possui um mecanismo de cache melhor, mas suas limitações também são muito óbvias, pois os dados da página (como chamada de API) só podem ser capturados através da construção do aplicativo, portanto é mais adequado. em páginas em que o conteúdo não precisa ser alterado com frequência.

Renderização do lado do servidor (SSR)#

Tanto o SSR quanto o SSG são o conteúdo HTML a ser retornado primeiro no servidor. No entanto, a diferença é que o SSR buscará novamente todas as solicitações para a página., O que significa que é uma forma dinâmica correspondente à estática do SSG. Sempre que um cliente inicia uma solicitação de uma página, o servidor obtém os dados correspondentes, cria um HTML completo e, finalmente, o envia de volta ao cliente.

A estrutura de roteamento#

Este é um dos maiores recursos do Next.js. Next.js fará automaticamente o roteamento de arquivos contidos na pasta page. Por exemplo, caminhos de arquivo como page/mypage.tsx serão exibidos automaticamente em localhost: 3000/mypage, agora pode ser facilmente gerenciado por meio da estrutura de arquivos, Next.js também oferece suporte a roteamento dinâmico! Por exemplo, page/[nome].tsx, então poderá ser acessado no browser como localhost:3000/teste1 ou localhost:3000/teste2.

Busca de dados#

Conforme mencionado anteriormente, o SSR primeiro obterá os dados necessários no servidor, gerará HTML e os enviará de volta ao cliente, enquanto o Next.js fornece muitas maneiras diferentes de obter dados.

  • getInitialProps: A principal função de getInitialProps é buscar de forma assíncrona os dados necessários antes de carregar a página e transformá-los nos suportes do componente da página, e sua ordem de execução será antes de todos os ciclos de vida do componente. Seu ambiente de execução é dividido em “lado do cliente” e “lado do servidor”, quando a página é carregada pela primeira vez, getInitialProps será executado no lado do servidor. Ao usar Next/Link | Next/Router para transitar à uma nova página, ele será executado no lado do cliente. Se for a arquitetura React do CSR, as chamadas de API são frequentemente executadas em useEffect, mas na arquitetura Next.js, muitas chamadas de API serão realizada com getInitialProps para execução (é claro que ainda depende da decisão de demanda).
  • getServerSideProps getServerSideProps é um conceito relativamente novo. A diferença entre getServerSideProps e getInitialProps é que ele só será executado no lado do servidor, o que significa que podemos nos comunicar diretamente com o banco de dados com ele. De qualquer forma, é um trecho de código em execução no servidor e isso significa que, em algumas situações, podemos pular a etapa de chamada da API e ir diretamente para o banco de dados para obter os dados.
    note

    Você deve utilizar o getStaticProps apenas se precisar pré-renderizar uma pagina cujos dados devem ser buscados no momento da solicitação. O tempo até o primeiro byte será mais lento do que getStaticProps porque o servidor deve calcular o resultado em cada solicitação, e o resultado não pode ser armazenado em cache por um CDN sem configuração extra. Se você não precisa pré-renderizar os dados, deve considerar a busca de dados no lado do cliente.

  • getStaticProps && getStaticPaths

Rotas API#

Se houver necessidade de estabelecer um servidor de back-end no projeto Next.js, geralmente há duas maneiras:

  • servidor customizado: O projeto da nossa empresa é usar o server.js como um servidor backend customizado, que é responsável por processar autenticação, proxy, roteamento e outras transações mais próximas do lado do cliente.
  • Rotas de API sem servidor: As Rotas de API mencionadas abaixo serão eventualmente implantadas como uma função sem servidor por Next.js.

Conclusão#

Neste artigo apresenta os conceitos básicos de SSR e também faz algumas comparações com CSR e SSG e, apresenta alguns recursos da estrutura do Next.js. Do meu ponto de vista, o Next.js está se tornando cada vez mais utilizado no front-end, e a chegada da API Route também adicionará mais possibilidades de desenvolvimento. Portanto. Espero que este artigo possa ser útil para vocês devs.