t3 app router edge drizzle

T3 App Router (Edge)

Uma tentativa experimental de usar a fantástica pilha T3 inteiramente no Edge Runtime, com o roteador de aplicativos beta do Next.JS.

Isso deve ser um lugar de hackers e aprendizado. Ainda estamos aprendendo a estruturar aplicativos usando o novo roteador de aplicativos do Next.JS, e os comentários são bem -vindos nas discussões.

Se você encontrar um erro (você irá), crie um problema para que possamos corrigir erros e aprender juntos.

Isso não se destina à produção. Para um aplicativo de pilha completa pronta para produção, use o Create-T3-App muito mais estável.

Este projeto não é afiliado ao Create-T3-App.

Características

Este projeto representa a cópia de trabalho e idéias de muitas pessoas realmente inteligentes. Eu acho que é útil vê -los todos juntos em um protótipo funcional.

• Tempo de execução de borda para todas as páginas e rotas.
• Gerenciamento de SQL e esquema seguro de tipo com garoto-mrizzle.
  • Enquanto o Create-T3-App usa o Prisma, o prisma não pode ser executado no tempo de execução do Edge.
• API segura por tipo com TRPC.
  • A configuração do roteador de aplicativos é copiada daqui.
  • A versão TRPC instalada está atualmente bloqueada no cliente do roteador de aplicativos experimental em ./src/trpc/@trpc , que formata as teclas de consulta React-Query de uma maneira específica que mudou em versões posteriores do TRPC. Se você atualizar o TRPC, a hidratação parará de funcionar.
• Autenticação de propriedade com auth.js.
  • O Create-T3-App usa o Nextauth, que não suporta o tempo de execução do Edge. Este projeto usa o sucessor da Nextauth, auth.js, que o faz. Como o Auth.js ainda não criou suporte para o Next.js, sua implementação Solidstart é copiada e ligeiramente modificada.
• Estilizando com Tailwind.
  • É apenas CSS, então funciona bem no roteador de aplicativos.
• Reaja componentes e layout da shadcn/ui
  • Eles também são apenas CSS e Radix, então eles funcionam muito bem no roteador de aplicativos.

Busca de dados

Existem algumas opções que a consulta de componentes do servidor + TRPC + React nos proporciona. A flexibilidade dessas ferramentas nos permite usar estratégias diferentes para diferentes casos no mesmo projeto.

1. Pegue dados no servidor e renderize no servidor ou passe -os para os componentes do cliente. Exemplo.
2. Pegue dados no servidor e use-os para hidratar o cache do React-Query no cliente. Exemplo: buscar e desidratar dados no servidor e use dados em cache do servidor no cliente.
3. Buscar dados no cliente.
4. Busque dados do servidor, mas não bloqueie os componentes do primeiro byte e do servidor de fluxo para o cliente usando um limite de suspense. TODO: Exemplo.

Começando

1. Execute alguns comandos.

   pnpm i
   cp .env.example .env

2. Preencha .env.

3. Empurre seu esquema muda para um novo banco de dados de escala de planetas. Não use este comando em um banco de dados existente com o qual você se preocupa. É destrutivo (e na versão beta).

   pnpm db:push

4. Inicie o NEXT.JS Dev Server.

   pnpm dev