I run a fairly advanced Morse Code translator website that converts text to Morse code and decodes Morse back into readable text in real time, using client-side JavaScript along with features like Web Audio API playback for dots and dashes, instant UI updates, and optional sharing of encoded messages. I’ve recently migrated the site to Netlify to take advantage of its static hosting, CDN, and serverless capabilities. While the core deployment works, I’ve started running into several technical challenges related to build configuration, runtime behavior, and how best to structure the app within Netlify’s ecosystem.
One of the main issues is deciding how to handle dynamic functionality alongside static deployment. The translator itself runs entirely in the browser, but I’m experimenting with adding features like saving Morse code messages, generating shareable links, or logging usage data. This has led me to explore Netlify Functions, but I’m unsure about the best way to structure these endpoints for a tool that generates frequent, small interactions. I’m particularly concerned about function cold starts, execution limits, and whether this approach scales well for real-time or near-real-time interactions.
Another challenge involves performance and Core Web Vitals. While Netlify’s CDN improves initial load times, the page still includes multiple JavaScript components responsible for translation logic, audio playback, and UI updates. On some devices, especially mobile, I’ve noticed slight delays in input responsiveness or audio timing, which are critical for a Morse Code experience. I’m trying to determine whether I should further split or lazy-load scripts, optimize bundling, or even move some processing into Web Workers to keep the main thread responsive.
I’m also encountering some confusion around caching and asset invalidation. Since I frequently update the translator logic and UI, I rely on Netlify’s build system and cache-busting mechanisms, but there are times when users seem to receive outdated JavaScript files. I’d like to better understand how Netlify handles caching at the CDN level, and what strategies (e.g., headers, hashed filenames) are most reliable for ensuring users always get the latest version without sacrificing performance.
Another area I’m exploring is form handling and analytics integration. Netlify provides built-in form handling and analytics, and I’m considering using these to collect optional user feedback or track how people interact with the Morse Code tool. However, since most interactions are happening dynamically (e.g., typing, playing audio, copying output), I’m unsure how to best capture meaningful events without sending excessive data or negatively impacting performance.
Finally, I’d really appreciate guidance from the Netlify community on architectural best practices for interactive tools like this. For a Morse Code translator that is primarily frontend-driven but may include optional serverless features, what’s the recommended way to structure the project on Netlify? Should I lean heavily on Netlify Functions, keep everything static with minimal backend logic, or consider hybrid approaches? Any advice on performance optimization, caching strategies, and scalable design would be extremely helpful. Sorry for long post!