10 comandos do Linux para conhecer o sistema

Palamar

Palamar

Full-Stack Developer, VueJS + ReactJS + JavaScript.

10 comandos do Linux para conhecer o sistema

Existem 10 comandos do Linux para você conhecer o sistema e aumentar sua produtividade rapidamente.

10 comandos do Linux para conhecer o sistema Abra o aplicativo de terminal e comece a digitar esses comandos para conhecer seu desktop Linux ouLer mais...

Como instalar o Ubuntu

Palamar

Palamar

Full-Stack Developer, VueJS + ReactJS + JavaScript.

Como instalar o Ubuntu

Neste tutorial, darei a você um guia passo a passo para iniciantes sobre como instalar o Ubuntu separadamente ou junto com qualquer outro sistema operacional (como o Windows 10) Ler mais...

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.

O que é Desktop Environment no Linux?

Palamar

Palamar

Full-Stack Developer, VueJS + ReactJS + JavaScript.

O que é Desktop Environment no Linux?

Um ambiente de área de trabalho é o pacote de componentes que fornece elementos de interface gráfica com o usuário (GUI) comuns, como ícones, barras de ferramentas, papéis de parede e widgets de área de trabalho. Graças ao ambiente de desktop, você pode usar o Linux graficamente usando o mouse e oLer mais...

Enviando email com Node.JS

Palamar

Palamar

Full-Stack Developer, VueJS + ReactJS + JavaScript.

Enviando email com NodeJS

√Č not√°vel que JavaScript vem se tornado uma linguagem famosa entre n√≥s desenvolvedores. E um de seus usos tem sido com Node.js, um ambiente de execu√ß√£o Javascript server-side, isto √©, uma maneira de executar c√≥digo escrito em javascript do lado do servidor. Neste artigo vamos aprender um exemplo b√°sico de como podemos enviar emails utilizando o Node.JS Ler mais...

Como instalar WSL 2 no Windows 10

Palamar

Palamar

Full-Stack Developer, VueJS + ReactJS + JavaScript.

Como instalar WSL2 no Windows 10

Ainda √© um pouco surpreendente quanto esfor√ßo a Microsoft est√° colocando no Windows Subsystem for Linux (WSL), at√© mesmo com suporte GUI chegando √†s vers√Ķes Insider Preview do Windows. Independentemente disso - √© um Ler mais...

React Context API

Palamar

Palamar

Full-Stack Developer, VueJS + ReactJS + JavaScript.

React Context API

Normalmente numa aplica√ß√£o React, n√≥s passamos informa√ß√Ķes atrav√©s do componentes de cima para baixo, como um funil, atrav√©s de props. Por√©m de acordo com a complexidade da aplica√ß√£o e com a reutiliza√ß√£o de componentes, esse envio de props pode-se mostrar totalmente ineficiente eLer mais...

Top 5 ferramentas ReactJS para aprimorar suas habilidades

Palamar

Palamar

Full-Stack Developer, VueJS + ReactJS + JavaScript.

Top 5 ferramentas ReactJS para aprimorar suas habilidades

Aumente seu valor para os empregadores, aprendendo essas ferramentas principais para o desenvolvimento de aplicativos Web no React. O ReactJS é uma das muitas habilidades que você aprenderia a caminho de se tornar um desenvolvedor de sucesso na web. Se você já está familiarizado com JavaScript e HTML, é uma próxima tecnologia natural para aprender. Se você ainda não conhece, encontrará o ReactJS como um ótimo lugar paraLer mais...