DEV Community

ludy.dev
ludy.dev

Posted on • Originally published at mubooks.com

How I built a lightning-fast, ad-free web novel reader using Next.js and Cloudflare

Reading web novels online is a notoriously laggy experience. Most aggregator sites are packed with heavy tracking scripts, bloated ad networks, and redirects that make mobile reading painful. I wanted to see if I could build a platform that serves thousands of chapters with sub-second page loads.

That is why I created MuBooks.

To achieve maximum performance, I built the frontend using Next.js. The reading interface relies heavily on static generation where possible, combined with server-side rendering for newly updated chapters. I offloaded the heavy lifting to Cloudflare Workers to cache the parsed, sanitized chapter content at the edge. By removing the tracking scripts, ads, and heavy assets, the payload size for a standard chapter is under 50KB, resulting in instantaneous page transitions.

One of the biggest technical challenges was processing the raw chapter feeds. The source files often contain inconsistent HTML formatting, broken tags, and inline styles. I built a custom parser pipeline that strips out all non-essential HTML, sanitizes the text to prevent XSS, and normalizes the structure into clean, responsive Markdown-style components.

For the client side, I built a highly responsive reader component. Using lightweight Tailwind classes and local storage, users can toggle dark mode, adjust font scaling, and change line heights. The state is saved locally, meaning the user can resume reading exactly where they left off without needing an external database call.

By keeping the architecture lightweight and caching aggressively at the edge, the hosting costs remain minimal while providing a premium, native-app-like experience for readers.

Top comments (0)