O que são funções de borda em Next.js? 5 maneiras de usá-los

Next.js é uma estrutura popular de código aberto para desenvolver aplicativos React renderizados do lado do servidor. Graças à sua facilidade de uso e adaptabilidade, você pode usá-lo para criar aplicações web complexas.

As funções de borda são um dos recursos mais empolgantes do Next.js. Aprenda sobre as funções do Edge e cinco maneiras de usá-las no Next.js.

O que são funções de borda?

O poderoso recurso de funções de borda do Next.js permite que você execute funções sem servidor personalizadas mais próximas do usuário final na rede de borda. Isso implica que o código seja executado em servidores localizados geograficamente mais próximos do cliente, trazendo mais agilidade e desempenho nas aplicações web.

As funções de borda podem alterar a solicitação ou resposta, buscar dados, autenticar e muito mais.

As funções de borda são executadas instantaneamente. Como eles reduzem o tempo necessário para carregar dados e renderizar páginas, você pode usar as funções do Edge para melhorar o desempenho da Web e a experiência do usuário.

Gadgets modernos e de última geração precisam computação de borda porque é mais confiável e seguro do que computação em nuvem e aproveita as funções do Edge. Além disso, é mais capaz e flexível do que a computação sozinha no dispositivo.

Aqui estão algumas maneiras de usar as funções do Edge no Next.js.

1. Roteamento Dinâmico

Uma maneira de usar as funções Edge no Next.js é por meio do roteamento dinâmico. Você pode definir e gerenciar rotas personalizadas com base em dados dinâmicos, como parâmetros de consulta ou cabeçalhos de solicitação.

Isso é valioso para tornar os aplicativos da Web mais adaptáveis ​​e dinâmicos que lidam com várias solicitações.

Você pode usar as funções Edge do Next.js para implementar o roteamento dinâmico da seguinte maneira:

// páginas/api/[slug].js
exportarpadrãofunçãomanipulador(req, res) {
const { slug } = req.consulta;
se (lesma 'sobre') {
 res.status(200).enviar('Esta é a página sobre!');
 } outrose (lesma 'contato') {
 res.status(200).enviar('Esta é a página de contato!');
 } outro {
 res.status(404).enviar('Página não encontrada.');
 }
}

Este exemplo mostra o conteúdo de um arquivo chamado [slug.js] no páginas/API diretório para definir uma rota personalizada com dados dinâmicos. O limite do slug é removido da consulta de solicitação usando req.consulta, que permite lidar com demandas fortemente fundamentadas no valor do lesma.

Por exemplo, se um usuário for para http://example.com/api/about, o parâmetro slug será definido como sobre. O manipulador A função executará o bloco de código apropriado e exibirá a mensagem "Esta é a página sobre!"

Se o cliente visitar http://example.com/api/contact, manipulador retornará a mensagem "Esta é a página de contato!"

Usando as funções de borda para roteamento dinâmico, os desenvolvedores podem criar aplicativos da Web mais adaptáveis ​​e dinâmicos que podem lidar com várias solicitações com base na alteração de dados.

2. Busca de dados

No Next.js, um caso de uso comum para as funções do Edge é a busca de dados. Você pode reduzir a carga no servidor e aumentar o desempenho do aplicativo da web trazendo dados para a borda.

As funções Edge do Next.js podem realizar a busca de dados, conforme mostrado neste exemplo:

// páginas/api/users/[id].js
exportarpadrãoassíncronofunçãomanipulador(req, res) {
const { id } = req.consulta;
// Busca dados do usuário de uma API de terceiros
const resposta = aguardam buscar(` https://api.example.com/users/${id}`);
const usuário = aguardam resposta.json();
// Retorna os dados do usuário
 res.status(200).json (usuário);
}

Este exemplo define um endpoint de API que usa o eu ia parâmetro de consulta para recuperar dados do usuário de uma API de terceiros. Usando o buscar método, você pode enviar uma solicitação para a API e aguardar uma resposta com a palavra-chave await.

O código então extrai as informações JSON chamando resposta.json() e o armazena em uma variável. Por fim, utiliza o json da resposta para formatar os dados da resposta como JSON.

A busca de dados da função de borda é uma técnica poderosa que permite buscar dados na borda, reduzindo a carga do servidor e melhorando o desempenho do aplicativo da web.

Você também pode reduzir a ociosidade da demanda e fornecer aos clientes páginas mais rápidas e responsivas obtendo informações de uma interface de programação externa na borda.

3. Usado na autenticação

Ao implementar regras de controle de acesso na borda, você pode melhorar a segurança do seu aplicativo da web e reduzir o risco de acesso não autorizado a dados confidenciais.

Como exemplo, considere uma função que verifica o estado de autenticação de um cliente e o repete na resposta. Aqui está um resumo da verificação envolvendo os recursos do Edge em Next.js:

// páginas/api/auth.js
exportarpadrão (req, res) => {
const { isAuthenticated } = req.cookies;
se (éAutenticado) {
 res.status(200).json({ mensagem: 'Você está autenticado' });
 } outro {
 res.status(401).json({ mensagem: 'Você não está autenticado' });
 }
}

Nesta ilustração, a função Edge examina o cookie em busca de um token de autenticação e, se encontrado, gera uma resposta JSON com as informações do usuário.

4. O teste A/B

Outra maneira de usar as funções Edge do Next.js é otimizar o desempenho de um aplicativo da Web usando o teste A/B. Você pode comparar várias versões de um site ou aplicativo usando o teste A/B para determinar qual tem melhor desempenho.

Uma ilustração de como as funções Edge do Next.js podem ser usadas para realizar testes A/B é a seguinte:

// páginas/api/abtest.js
const variantes = ['varianteA', 'variante B'];
exportarpadrãofunçãomanipulador(req, res) {
const { userId } = req.query;
// Gera uma variante aleatória para o usuário
const VarianteIndex = Matemática.chão(Matemática.random() * variantes.comprimento);
const variante = variantes[variantIndex];
// Armazena a variante em um cookie
 res.setHeader('Set-Cookie', `variante=${variante}; Max-Idade=604800;`);
// Renderiza a variante correspondente
se (variante 'varianteA') {
 res.status(200).enviar('Bem-vindo à variante A!');
 } outro {
 res.status(200).enviar('Bem-vindo à variante B!');
 }
}

Este código demonstra um endpoint de interface de API que executa um teste A/B para duas variações exclusivas de uma página de site. Ele usa o Math.random() para criar uma variante aleatória para o usuário e armazená-la em um cookie com o res.setHeader método. Isso permite que o código garanta que o cliente veja a mesma variação em visitas futuras.

O código então usa o variante o valor do cookie para renderizar a variante apropriada. Ele exibe uma mensagem indicando qual variante selecionou.

Usando as funções do Edge, os desenvolvedores podem usar uma ferramenta poderosa chamada teste A/B para comparar diferentes versões de um aplicativo ou página da Web para ver qual tem melhor desempenho. Você pode coletar dados sobre o comportamento do usuário e melhorar o desempenho do aplicativo da Web e a experiência do usuário, atribuindo usuários aleatoriamente a várias variantes.

5. Respostas de cache

O armazenamento de reações é outra maneira de usar os recursos do Edge no Next.js para simplificar a execução da Web. Ele nos permite manter as reações por um determinado tempo para reduzir o número de solicitações feitas ao servidor e trabalhar na velocidade do aplicativo da web.

Aqui está uma ilustração de como você pode realizar o armazenamento de reação com Edge Capabilities em Next.js:

// páginas/api/data.js
const dados = { nome: 'John Doe', idade: 30 };
exportarpadrãofunçãomanipulador(req, res) {
// Definir cabeçalhos de resposta para habilitar o cache
 res.setHeader('Cache-Control', 's-maxage=10, obsoleto enquanto revalidar');
// Dados de retorno
 res.status(200).json (dados);
}

Este exemplo define um endpoint de API que retorna uma resposta JSON com alguns dados.

Definimos os cabeçalhos de reação usando o res.setHeader técnica para habilitar a reserva por 10 segundos usando o s-máx-idade limite. Isso indica que o CDN pode armazenar em cache a resposta por até dez segundos antes de exigir uma atualização.

Também usamos o obsoleto-enquanto-revalidado parâmetro para permitir que o CDN forneça uma resposta em cache que expirou enquanto uma nova resposta está sendo feita em segundo plano. Mesmo que a resposta em cache tenha expirado, o CDN gerará uma nova e sempre enviará uma resposta.

O cache de resposta das funções de borda é uma excelente maneira de acelerar o aplicativo da Web e reduzir o número de solicitações ao servidor. Você pode garantir aos usuários sites mais rápidos e responsivos armazenando as respostas em cache por um tempo predeterminado.

As funções de borda são um recurso incrivelmente poderoso do Next.js

O suporte do Next.js para funções de borda é um recurso atraente que permite executar funções personalizadas sem servidor mais próximas do usuário final na rede de borda.

Existem várias maneiras de usar as funções do Edge para melhorar os aplicativos da Web: teste A/B, cache de resposta, roteamento dinâmico, busca de dados, autenticação.

O uso dos recursos do Edge em sua arquitetura pode melhorar a experiência de seus clientes e resultar em aplicativos da Web mais rápidos e responsivos.