Stackblitz é um IDE online popular para criar e compartilhar projetos que é usado por empresas como Google e GitHub. Stackblitz , que é alimentado por VS Code, fornece a seus usuários a capacidade de rodar e compartilhar aplicativos fullstack que usam frameworks e bibliotecas como React, Vue e Angular. Como os projetos Stackblitz estão online imediatamente, você pode compartilhá-los com apenas um clique!
Na semana passada, Stackblitz apresentou WebContainers , que permitem aos usuários executar processos Node.js inteiros dentro do navegador, oferecendo benefícios de segurança, velocidade e desempenho.
Como resultado, os usuários também podem executar projetos Next.js. no navegador!
Neste artigo, exploraremos essa funcionalidade em profundidade. Vamos começar!
Primitivos Node.js
Antes de podermos entender como o Stackblitz funciona, temos que entender a funcionalidade por trás do Node.js. Node.js, um tempo de execução de JavaScript, é construído sobre o motor V8 do Chrome, que converte o código JavaScript escrito por desenvolvedores em algo que um computador pode entenda.
O Node.js possibilitou que os desenvolvedores executassem seu código JavaScript em ambientes nativos, como o sistema operacional, sem a necessidade de um navegador. As primitivas de E/S, que fazem parte da biblioteca padrão, permitem que o Node.js execute operações como acessar um banco de dados, fazer uma solicitação de rede e ler do sistema de arquivos.
O Node.js oferece ambos os bloqueios e implementações sem bloqueio de primitivas de I/O. No entanto, preferimos primitivas sem bloqueio, que são executadas em um único encadeamento. Node.js depende de seu próprio sistema baseado em eventos exclusivo que evita problemas de simultaneidade que surgem devido a multithreading ao executar operações em paralelo.
Node.js no navegador
Você pode instalar o Node.js em máquinas macOS, Windows e Linux. Embora ainda esteja em beta, graças a WASM e ao API de capacidades , também é possível executar Node.js no navegador!
Em Stackblitz WebContainers, a camada WASM abstrai com sucesso a camada do SO, fazendo com que o processo Node.js em execução dentro da guia do navegador funcione realmente como se estivesse em um sistema operacional completo!
Configurando um Node.js WebContainer
Agora, vamos experimentar! Vamos para Stackblitz e tente executar nosso próprio código. Para iniciar um novo projeto, visite a página inicial e clique em Node.js. Em segundos, um novo projeto será criado para nós, que inclui o sistema de arquivos do nosso projeto à esquerda, um editor de código para fazer alterações no centro e um terminal na parte inferior.
Para adicionar nosso código, execute o trecho de código abaixo no terminal:
node index.js
A versão do Node.js que estamos usando atualmente será impressa no console por meio do código.
Vamos escrever um código que funcione com nosso sistema de arquivos. Crie um arquivo chamado tmp.txt no mesmo projeto e adicione o seguinte texto:
Hello World
A seguir, adicionaremos o seguinte trecho de código, que lê o arquivo e o trunca para apenas cinco caracteres:
const {abrir}=exigir (‘fs/promessas’); função assíncrona readAndTruncate () {let filehandle=null; tente {filehandle=await open (‘tmp.txt’,’r +’); aguarde filehandle.truncate (5); } finalmente {await filehandle?.close (); }} readAndTruncate ();
Ao executar este código e verificar tmp.txt, vemos que nossa entrada inicial foi modificada para ler Hello, o que significa que nosso Node.js primitivo para leitura e gravação em um arquivo funcionou!
Next.js no navegador
Agora que executamos o Node.js WebContainer com sucesso, vamos configurar um projeto Next.js. Primeiro, vamos entender a funcionalidade por trás de Next.js e Stackblitz. Lembre-se de que Next.js é uma estrutura baseada em React que oferece renderização estática, renderização do lado do servidor e otimização de imagem pronta para uso.
Vamos considerar brevemente as diferenças entre acessar um aplicativo React e acessar um aplicativo Next.js.
Acessando um aplicativo React
Para acessar um aplicativo React, inserimos a URL do aplicativo no navegador. O navegador buscará os pacotes HTML, CSS e JavaScript. O JavaScript é então compilado no navegador enquanto o código React é convertido para o HTML e CSS correspondentes, gerando a página. A página é então inserida em uma div dentro do HTML buscado, puxando a IU.
Acessando um aplicativo Next.js
Para acessar um aplicativo Next.js, inserimos o URL no navegador. No momento da construção, existem várias páginas marcadas como estáticas. Se a página solicitada for estática, ela será exibida como está. Se a página não for estática, o navegador verifica se é uma página renderizada do lado do servidor. Nesse caso, as chamadas de API necessárias são realizadas e o HTML e CSS gerados finais são enviados ao navegador para exibição direta.
Se a página não for estática nem renderizada no lado do servidor, você pode acessá-la em uma forma muito semelhante a um aplicativo React! No entanto, o HTML e CSS finais serão entregues diretamente ao navegador, em vez de serem criados quando você descompactar o pacote JavaScript.
Renderizar sua página diretamente no navegador melhora o tempo de carregamento geral da página e aumenta a compatibilidade com o rastreador de SEO bots, aumentando o desempenho geral! Com os contêineres da Web Stackblitz, você pode obter esses benefícios sem ter que sair do navegador.
Criando nosso projeto Next.js no Stackblitz
Você deve ter notado que o servidor desempenha um papel maior no ciclo de vida de um aplicativo Next.js do que no ciclo de vida de um aplicativo React normal.
O servidor Next.js é baseado em Node.js, portanto, historicamente, o servidor Next.js pode ser executado em qualquer sistema compatível com a execução de Node.js. Agora, Node.js pode ser executado completamente dentro do navegador com WebContainers, o que significa que também podemos executar um aplicativo Next.js no navegador!
Para iniciar um novo projeto Next.js, vá para a página inicial do Stackblitz tela e clique em Next.js. Como alternativa, você pode abrir qualquer navegador, digitar Next.new na barra de endereço e pressionar Enter. Um novo projeto Next.js será configurado para nós!
Também podemos criar um novo projeto com base nos exemplos em Next.js GitHub ! Precisamos apenas acrescentar o nome do projeto antes de Next.new. Por exemplo, se eu quisesse iniciar um novo projeto com o blog-starter exemplo, eu poderia executar o seguinte código no navegador:
next.new/blog-starter
Integrando uma API
Seguir as etapas acima gera um projeto que possui dois arquivos, índice. js e about.js. Esses arquivos atendem a duas rotas que o modelo inicial Next.js fornece para você,/e/sobre. Vamos integrar uma API em nosso projeto e modificar a IU renderizada em/route.
Para esta demonstração, usaremos o API de eventos da NASA , que retorna um resumo de todos os eventos climáticos que ocorrem atualmente na Terra. Usaremos componentes da biblioteca React Bootstrap para projetar nossa IU. Instale a biblioteca executando o seguinte comando no terminal:
npm install–save react-bootstrap @ next bootstrap
Estamos instalando essas dependências dentro do ambiente Node.js criado dentro do navegador. A seguir, vamos importar o CSS do Bootstrap dentro do arquivo index.js:
import’bootstrap/dist/css/bootstrap.css’;
Renderização do lado do servidor
Para recuperar os dados de nosso projeto, usaremos a função getServerSideProps em Next.js. Faremos a chamada no lado do servidor e, em seguida, usaremos o resultado dentro de IndexPage, nosso componente React. Isso instrui Next.js a fazer a chamada no lado do servidor sempre que qualquer solicitação for feita do navegador para este componente específico:
export async function getServerSideProps (context) {const res=await fetch (‘https://eonet.sci.gsfc.nasa.gov/api/v2.1/events’); eventos const=esperar res.json (); return {props: {nasaEvents: events}//será passado para o componente da página como props}; }
Renderização da interface do usuário
A seguir, retornaremos os eventos que foram buscados dentro de uma chave props, que Next.js irá passar para o componente React como props. Em seguida, usaremos os componentes do Bootstrap para exibir os eventos como uma lista:
exportar função padrão IndexPage ({nasaEvents}) {return (
Eventos Nasa
); }
A seguir, abstrairemos a IU que precisa ser renderizada para cada evento em outro componente da IU que chamamos de Item:
Função do componente auxiliar Item ({evento}) {return (
Agora, nosso código está completo! Após a atualização, veremos que podemos obter uma lista de eventos climáticos que ocorrem em todo o mundo:
Conclusão
Neste tutorial, aprendemos como para executar um projeto Next.js inteiramente no navegador usando Stackblitz WebContainers. Configuramos um contêiner Node.js e, em seguida, acessamos um projeto Next.js por meio dele, integrando uma API com o lado do servidor e renderização da IU.
Nosso projeto inclui um URL do projeto , que ajuda a colaboração no desenvolvimento, e um URL de implantação , que permite ao usuário visualizar o resultado final. Para compartilhar este projeto, posso simplesmente compartilhar a URL do projeto. Espero que tenha gostado deste tutorial!
