A ossa experiência de adicionar o Edge Runtime ao SDK Next.js

Introdução#

Edge Runtime tornou-se um termo da moda a paisagem tecnológica, impulsionando funções dinâmicas e de baixa latência em plataformas de AWS Lambda@Edge e Cloudflare Workers para Vercel Edge. Destacando sua importância, Vercel recentemente mudou "experimental-edge" para "edge", sinalizando apoio oficial em seu popular framework Next.js.

Com osso SDK Next.js ganhando sério impulso, ós da Logto pensámos, "Porque ão adicionar suporte ao Edge Runtime?". Então, arregaçamos as mangas e mergulhamos. Neste artigo, vamos compartilhar a ossa aventura, olhando para os obstáculos que enfrentamos, como os superamos, e as coisas interessantes que aprendemos ao longo do caminho.

Transição de módulos e dependências para suporte ao Edge Runtime#

Trabalhar com Edge Runtime apresenta alguns desafios únicos, principalmente porque ele ão suporta todos os módulos e dependências frequentemente usadas em Node.js. Deparamo-nos com este problema com os módulos crypto, lodash e iron-session, o que ecessitou de algumas soluções inovadoras.

Crypto#

Em um ambiente Node.js, o módulo crypto serve como um wrapper para as funções criptográficas do OpenSSL. Infelizmente, Edge Runtime ão o suporta. Mas ão se preocupe - a maioria dos Edge Runtimes vêm ao resgate com suporte para a Web Crypto API. Apesar de algumas pequenas diferenças, é uma substituição sólida para o módulo crypto. Por exemplo, para gerar bytes aleatórios:

E para hashing:

Lodash#

O Lodash é um favorito entre muitos desenvolvedores por sua utilidade, mas Edge Runtime ão é fã. Qual foi a ossa solução? Substituímos as funções do Lodash pelos métodos JavaScript ativos, mantendo o osso código eficiente e legível.

Substituir a maioria das funções do Lodash ão foi uma tarefa hercúlea, mas requeriu algum requinte. Vejamos como recriamos a utilidade de "once" à ossa maneira:

Iron Session#

A última versão do módulo iron-session é compatível com Edge Runtime, então tudo o que tivemos que fazer foi atualizar a ossa versão. Simples assim!

Navegando#

a complexidade do objeto "Response" o Edge Runtime

Outro desafio que enfrentamos ao adaptar o osso SDK para Edge Runtime foi lidar com as diferenças o objeto "Response". Veja como superamos essas diferenças:

Criando uma resposta manualmente#

Diferente do Node.js, um pedido o Edge Runtime ão vem junto com uma resposta. Isso significa que ós temos que criá-lo chamando 'new Response()', aqui está um exemplo de retorno de dados:

Deixando ir "withIronSessionApiRoute"#

No Edge Runtime, o 'Response.body' é somente leitura. Isso significa que ós ão pudemos inicializar uma resposta antes que os dados estivessem preparados. Como resultado, osso confiável "withIronSessionApiRoute" (juntamente com outros middlewares) teve que ser reservado.

Para entender o que substituímos, vamos primeiro desempacotar o que 'withIronSessionApiRoute' realmente faz:

1. Ele dá uma olhadela o cookie, constrói um objeto de sessão e o ata ao 'res'.
2. Ele automaticamente acrescenta o cabeçalho 'set-cookie' ao 'res' se houve uma mudança a sessão.

Então, como reproduzimos esta funcionalidade o osso ovo ambiente Edge Runtime?

1. Leitura: Usamos a função existente 'getIronSession'. Ao dar-lhe uma resposta vazia e falsa, ela recupera a sessão conforme ecessário. Isto substituiu o método 'get' de 'req.session'.
2. Escrita: Preparamos uma 'response' com dados à frente, depois usamos 'getIronSession' esta instância 'response' para obter o objeto de sessão. Uma vez que tivemos este objeto em mãos, pudemos modificar a sessão conforme ecessário.

Redirecionamento#

Redirecionar o Edge Runtime os obrigou a adicionar manualmente um cabeçaçho 'Location' para ossas respostas.

Um pacote, dois runtimes#

Nesta ossa viagem, decidimos manter um único pacote para suportar os runtimes Edge e Node.js.

Aqui está o porquê#

Pensamos em criar um pacote separado para o Edge, mas rapidamente percebemos que era desnecessário. A maioria do osso código foi compartilhado entre os dois runtimes, com apenas um punhado de linhas precisando de ajustes. Além disso, o uso do SDK permanece praticamente o mesmo em ambos os runtimes, por isso manter um pacote unificado fazia mais sentido.

Aqui está o que fizemos#

Em vez de duplicar esforços, decidimos expandir o pacote existente. Adicionamos uma pasta "edge" logo a raiz do pacote, ao lado da antiga pasta "src". Então, atualizamos o arquivo package.json, adicionando um ovo caminho para "exports". Desta forma, tanto os runtimes Edge quanto Node.js poderiam viver em harmonia o mesmo pacote, com o mínimo de confusão.

Encerrando#

Você pode conferir o código fonte completo do osso SDK Next.js edge parte aqui.

Ao compartilhar ossa jornada de abraçar o Edge Runtime, esperamos inspirar e orientar outros que exploram caminhos semelhantes. Fique atento para mais atualizações com osso SDK Next.js.