Introdução ao SvelteKit 1.0: A estrutura de pilha completa para Svelte

Jun 29, 2023

Por Matthew Tyson

Arquiteto de Software, InfoWorld |

Conforme anunciado recentemente, o SvelteKit chegou ao tão esperado marco 1.0, após um longo beta. O SvelteKit 1.0 traz uma estrutura de aplicativo totalmente realizada para criar aplicativos JavaScript full-stack com front-ends Svelte. Vamos dar uma olhada.

Svelte é uma estrutura reativa de front-end, comparável a React ou Vue em alto nível, mas com seu próprio ângulo nas coisas. SvelteKit é a estrutura de aplicativo de pilha completa para Svelte, nas linhas de Next ou Nuxt, mas novamente com suas próprias convenções.

A natureza de uma estrutura de aplicativo de pilha completa é que ela deve ser capaz de unir o front-end e o back-end de seu aplicativo sob um único guarda-chuva. Uma estrutura full-stack deve responder a estas perguntas:

No coração de toda estrutura de aplicativo está o mecanismo de roteamento, que associa o código que gera as páginas às URLs no navegador. A maioria dos frameworks JavaScript como o SvelteKit se estabeleceu no layout geral que o Next.js usa, onde os arquivos e diretórios são mapeados para o caminho da URL.

O diretório raiz do SvelteKit é /src/routes (por padrão). Portanto, /src/routes corresponde à URL raiz, por exemplo, localhost:5173/ no navegador. Os subdiretórios são mapeados para o caminho da URL, então /src/routes/foo/bar torna-se localhost:5173/foo/bar.

Várias convenções de arquivo dentro dos diretórios definem as páginas e os terminais. Esses tipos de arquivo começam com um sinal de mais (+), indicando que eles têm um significado especial para a estrutura. (Todos os outros arquivos serão ignorados, então você pode colocar arquivos auxiliares nos mesmos diretórios.)

Cada página é um componente Svelte, definido em um arquivo +page.svelte. Um arquivo em /src/routes/foo/bar/+page.svelte torna-se a página da web em localhost:5173/foo/bar, definido pelo componente Svelte criado nesse arquivo. (Servindo a página padrão na rota, esse arquivo atua em uma função semelhante ao index.jsx em outras estruturas.) Em outras palavras, +page.svelte é apenas um componente Svelte padrão seguindo a sintaxe Svelte normal.

Embora o +page.svelte seja apenas um componente front-end do Svelte, ele pode contar com outros arquivos especiais para realizar seu trabalho. O SvelteKit também tem algumas otimizações úteis na manga. Por padrão, o SvelteKit renderizará +page.svelte do lado do servidor. Ele usa o arquivo irmão +page.js (com a extensão .js) para controlar esse processo. Os dois componentes, +page.svelte e +page.js trabalham juntos para definir o comportamento de pilha completa da página.

O componente +page.js nos permite definir uma função de carregamento que pode executar o trabalho inicial que o componente da página precisará, bem como controlar como o framework trata a página em relação ao comportamento de renderização. Este componente suporta três exportações const:

Você pode aprender mais sobre renderização de página com essas opções na documentação do SvelteKit. Aqui, vamos nos concentrar na função de carregamento exportada por +page.js. Por padrão, ele é executado junto com +page.svelte no servidor e no cliente. A função load se comunica com o componente Svelte com uma variável de dados. O que quer que a função de exportação +page.js retorne, será definido na variável de dados export let de +page.svelte.

Como a função de carregamento +page.js é executada no cliente e no servidor, ela deve conter funcionalidade que funcionará no navegador e nos ambientes de back-end. Quando você precisa de uma função que roda apenas no servidor, você pode usar +page.server.js. A função de carregamento é executada apenas no back-end. Quando a renderização do lado do servidor (SSR) está no controle, os dados podem ser integrados na renderização; quando a renderização do lado do cliente estiver ativa, o código será executado no servidor e será serializado e transmitido. (Consulte a documentação do SvelteKit para saber mais sobre como escolher entre uma função de carregamento "universal" e uma função de carregamento somente do lado do servidor.)

Além de carregar, +page.server.js pode definir uma função de ações para lidar com os dados do formulário. (Isso é semelhante a como o Remix faz formulários e permite que os formulários funcionem quando o JavaScript não está disponível.)