El botó de reenviament de correus electrònics de verificació és un d’aquells elements de la interfície que semblen trivials, però que a la pràctica generen una quantitat sorprenent de problemes tècnics i d’experiència d’usuari. Quan un usuari fa clic a 'Reenviar' i rep dos missatges idèntics, o quan el sistema mostra un missatge d’èxit tot i que el backend ha rebutjat l’operació, la confiança en el producte s’erosiona ràpidament. En aquest article explorem com evitar els correus duplicats en botons de reenviament a React, basant-nos en principis de disseny robust, bones pràctiques de backend i un enfocament de desenvolupament que prioritza la claredat sobre la complexitat.
El problema fonamental és que l’estat del botó al frontend, la lògica de reenviament al servidor i l’experiència real de l’usuari (el que arriba a la seva safata d’entrada) es poden desconnectar fàcilment. Un usuari impacient fa clic dues vegades; React mostra un spinner i després un missatge de 'Correu enviat'; el servidor rep dues peticions i encua dues tasques; i al final l’usuari rep dos correus. Cada peça del sistema actua correctament per separat, però juntes generen un fracàs evident. La clau és establir un contracte clar entre React i Node.js, recolzat en idempotència i en una comunicació honesta de l’estat.
Des de la perspectiva de Q2BSTUDIO, empresa especialitzada en desenvolupament de programari i tecnologia, sabem que la majoria d’aquests errors no es deuen a fallades complexes, sinó a la manca de coordinació entre capes. Per això recomanem tractar el flux de reenviament com un petit sistema distribuït: React gestiona la interacció i la retroalimentació temporal, mentre que Node.js decideix si es permet un nou enviament, quin és el número d’intent i si la sol·licitud ha de col·lapsar amb un enviament pendent ja existent. Aquesta separació redueix dràsticament la fragilitat.
Una solució pràctica és que el backend retorni metadades d’estat de reenviament cada cop que el client sol·liciti informació del compte. En lloc que React mantingui el seu propi temporitzador de reescalfament basat en suposicions, ha de renderitzar a partir de la veritat del servidor. Un tipus TypeScript senzill com ResendState = { canResend: boolean; cooldownSeconds: number; attemptCount: number; pendingMessageId?: string; } permet al frontend mostrar el temps restant de forma precisa i deshabilitar el botó només quan el servidor ho indiqui.
En fer clic a reenviar, el backend ha d’avaluar tres possibilitats: acceptar i encolar exactament un nou missatge; rebutjar perquè el període de reescalfament encara està actiu; o reutilitzar el missatge pendent si l’enviament anterior encara està en vol. Aquest tercer cas és el que més s’oblida. Si només es pensa en termes d’acceptar o rebutjar, les repeticions per xarxes inestables poden produir enviaments duplicats encara que l’usuari hagi fet clic una sola vegada. La idempotència a l’API i la deduplicació a la capa de treballs són essencials.
Un controlador típic a React podria ser: async function handleResend() { setSubmitting(true); const result = await resendVerification(); setBanner(result.message); const freshState = await fetchResendState(); setResendState(freshState); setSubmitting(false); }. Aquest enfocament no és elegant, però sí honest: després de la mutació es torna a consultar l’estat real del servidor, evitant suposicions locals. Tot i que suposa una petició extra, aquesta trucada addicional sol valdre la pena perquè el backend sap si el temporitzador va canviar, si el comptador d’intents es va incrementar o si ja existeix un enviament pendent.
Al costat de Node.js, emmagatzemar una clau de reenviament construïda a partir de l’ID d’usuari, la plantilla i un bucket de temps curt facilita evitar duplicats fins i tot quan la cua de treballs reintenta l’operació. Aquesta tècnica, combinada amb un emmagatzematge com Redis o una taula de base de dades, garanteix que una mateixa sol·licitud de reenviament només produeixi un únic correu.
Provar aquest comportament sense contaminar les safates d’entrada és un altre desafiament. A Q2BSTUDIO recomanem utilitzar bústies d’un sol ús per cada execució de prova, de manera que cada escenari tingui la seva pròpia safata i es pugui verificar fàcilment si va arribar un o dos correus. També és important incloure assertions a nivell d’API per comptar els enviaments reals, no només confiar en la interfície d’usuari. Una prova mínima hauria de verificar: primer clic envia un correu; segon clic immediat no n’envia cap altre; l’expiració del reescalfament permet exactament un enviament més; i el text d’èxit a React coincideix amb la resposta real del backend.
L’experiència d’usuari també importa. Segons estudis d’usabilitat (Nielsen Norman Group), els usuaris comencen a percebre demores a partir d’un segon, i la seva atenció es tensa al voltant dels deu segons. Per això, la retroalimentació del temporitzador de reescalfament ha de ser explícita: mostrar quant temps queda per poder reenviar, utilitzant dades del servidor i no un cronòmetre local endevinat. Si l’usuari no sap si el seu primer clic va funcionar, farà clic de nou i el backend s’enfrontarà a un problema de duplicats que va començar com un problema de claredat.
Des del punt de vista del desenvolupament d’aplicacions a mida, a Q2BSTUDIO integrem aquestes pràctiques als nostres projectes de programari personalitzat, ja sigui amb React i Node.js o amb altres tecnologies. A més, combinem aquests fluxos amb serveis cloud a AWS o Azure per garantir escalabilitat i disponibilitat. El desenvolupament de programari a mida ens permet adaptar cada solució a les necessitats específiques del client, incloent la lògica de reenviament, la gestió d’identitat i la seguretat de les comunicacions.
La ciberseguretat també hi juga un paper rellevant: els correus de verificació són un vector d’atac si no es gestionen correctament. Per això, implementem mesures com límits de taxa, validació de tokens i xifratge d’extrem a extrem. Els nostres serveis cloud a Azure i AWS inclouen infraestructura segura per gestionar aquests fluxos sense comprometre la integritat de les dades.
La intel·ligència artificial (IA) i els agents intel·ligents també poden millorar aquests processos. Per exemple, un agent d’IA podria predir quan un usuari farà clic repetidament i suggerir una estratègia de cua més agressiva. Així mateix, eines de Business Intelligence (BI) com Power BI permeten monitoritzar en temps real les taxes de reenviament, els temps de lliurament i els pics de duplicats, facilitant la presa de decisions basada en dades.
En resum, evitar correus duplicats en botons de reenviament a React no requereix una arquitectura enorme, sinó un contracte clar entre frontend i backend, idempotència a les peticions, una capa de deduplicació a la cua de treballs i un sistema de proves que verifiqui tant la interfície com la lògica del servidor. A Q2BSTUDIO apliquem aquests principis a cada projecte de desenvolupament d’aplicacions a mida, integrant cloud, IA, ciberseguretat i BI per oferir solucions robustes i fiables. Un flux de reenviament ben dissenyat és senyal d’un producte curat, i els usuaris ho noten.
