I’ve been experimenting with a small side project—a Scrabble Word Finder built using Next.js and deployed on Vercel. The app helps players find valid words from a given set of letters (mainly for fun and learning, not cheating).
While it works well, I’m curious about how others in the community handle performance optimizations for apps that rely on large datasets or real-time filtering.
A few specific questions I’d love to hear your thoughts on:
How would you structure or cache a large dictionary dataset in a Next.js app without hurting build times?
Any clever ideas for improving search speed or client-side experience when filtering thousands of words?
Has anyone tried Edge Functions or Vercel KV for something similar?
Would love to hear about your approaches or similar projects you’ve built — even unrelated ones (like search or game helpers).
Static generation: Pre-process your dictionary at build time and store it as JSON in your public folder or import it directly
Chunking: Split your dictionary by word length or first letter to reduce initial load
Compression: Use gzip compression (Vercel handles this automatically) and consider storing data in more compact formats
Search Performance
Client-side filtering: Load the dataset once and filter in-memory using useMemo for React optimization
Web Workers: For heavy filtering operations, offload to a Web Worker to keep the UI responsive
Debounced search: Use debouncing to avoid filtering on every keystroke
Vercel-Specific Solutions
Edge Functions: Great for lightweight filtering logic closer to users
Vercel KV: Perfect for caching frequently searched combinations or storing user preferences
ISR (Incremental Static Regeneration): If you need to update word lists periodically
For real-time filtering of thousands of words, client-side filtering with proper React optimization (memoization) usually performs better than API calls.
