DEV Community

laing lii
laing lii

Posted on

'Browser Tools, Server Checks, and a Directory: One Architecture'

Most “free online tools” sites fall into two camps: a giant client-side bundle that ships everything on first load, or a thin shell that depends on a backend for every interaction. Neither is necessary.

sitetoolsbox.com is a navigation directory plus a set of browser-based and server-assisted tools. It runs on PHP, ships a JSON formatter with zero upload, a bulk domain checker backed by RDAP, and a catalog of categories that search engines can actually index. The architecture is deliberately boring: static where it can be, dynamic where it must be, and lazy everywhere else.

The client-side tool: JSON Formatter with zero upload
The JSON formatter is the cleanest example of a tool that should never touch a server. Users paste JSON, format it, validate it, and copy it back. If that data leaves the browser, you have added latency, bandwidth cost, and a privacy liability for no reason.

The implementation is a single lazy-loaded module. It uses JSON.parse / JSON.stringify for formatting and validation, and it runs entirely on the main thread only because the input size is bounded. For anything larger, a Worker would be the next step—but for typical payloads under a few hundred kilobytes, the overhead of a Worker is not worth it.

The key architectural choice is when the module loads: not on page load, but when the user opens the tool. The directory page does not import the formatter, the hash generator, or any other tool module. Each tool route lazy-loads exactly one chunk:

js
const tool = tools[slug];
const ToolComponent = lazy(tool.load);
This keeps the initial JavaScript on directory and category pages under control. If you ship every tool on first paint, INP suffers on mid-range mobile devices before the user even taps anything.

The server-side tool: bulk domain checking with RDAP and curl_multi
Domain availability checking is the opposite case. You cannot check a .com registration from the browser; the lookup must happen on a server that speaks RDAP or WHOIS.

The naive approach—sequential WHOIS queries—falls apart for bulk checks. WHOIS is plain text over port 43, with no standard response format, no concurrency support, and aggressive rate limiting. Parsing "No match for" versus "Not found" across registries is a regex nightmare.

RDAP fixes most of this. It is JSON-based, uses HTTP status codes (200 for registered, 404 for available), and most major registries support it. The tool maps each TLD to its RDAP endpoint and falls back to WHOIS only when RDAP is unavailable.

For bulk requests, the critical piece is curl_multi—PHP’s parallel HTTP client. A sequential loop of 200 domains might take minutes and trigger rate limits. curl_multi fires up to 30 concurrent RDAP queries, which is fast enough to be useful while still respecting registry limits.

php
function domainCheckBatch($domains, $concurrency = 30) {
$rdapDomains = [];
foreach ($domains as $d) {
$tld = substr(strrchr($d, '.'), 1);
if (domainRdapEndpoint($tld)) $rdapDomains[] = $d;
}
// curl_multi with $concurrency handles
}
This is the pattern that makes the bulk checker practical: use the right protocol (RDAP) and the right concurrency model (curl_multi) , instead of brute-forcing WHOIS.

The directory: static HTML, structured data, and no empty pages
The navigation directory is a separate concern. It is a discovery surface, and discovery surfaces live or die by indexability.

Every tool and category page has a real

, a meta description, a canonical URL, and a visible H1. The directory emits WebSite structured data with a SearchAction, and tool pages can carry WebApplication JSON-LD. Category pages that have no tools do not exist in the sitemap—empty category pages are worse than no pages at all.</p> <p>The categories on sitetoolsbox.com are broad but concrete: Online Tools, AI, Developer, Design, Productivity, Marketing, Finance, Analytics, Communication, Writing, No-Code. Each category page links to its tools, and each tool page links back to its category and to related tools. That internal linking is what allows a directory to rank for long-tail tool queries.</p> <p>The build does not need to be a static site generator to get static-like behavior. PHP can render category and tool pages from a registry, serve them with edge caching, and still support server-side tools when the route requires it.</p> <p>The performance budget that keeps both surfaces fast<br> A hybrid site needs separate budgets for the directory and for each tool.</p> <p>Surface Initial JS LCP target INP target<br> Directory / category < 120KB gz < 2.0s < 200ms<br> Tool page before tool opens < 150KB gz < 2.0s < 200ms<br> Tool chunk lazy — < 200ms after open<br> The rule that matters most: if the directory page’s JavaScript grows with the number of tools, the architecture is wrong. The directory should load metadata, not tool implementations. Tool chunks should be fetched on intent—pointer-down, or when a tool card enters the viewport—not on first paint.</p> <p>Caching follows the same split:</p> <p>Hashed tool chunks: Cache-Control: public, max-age=31536000, immutable</p> <p>Category and tool HTML: s-maxage=3600, stale-while-revalidate=86400</p> <p>API endpoints for domain checks: never cache; each response is user-triggered and time-sensitive</p> <p>What actually makes a hybrid tool directory work<br> The pattern is not “build everything as a SPA” or “build everything server-rendered.” It is assign each tool to the execution environment where it belongs:</p> <p>Data that does not need to leave the browser → client-side, lazy-loaded, zero upload.</p> <p>Data that requires a protocol the browser cannot speak → server-side, batched with the right concurrency model.</p> <p>Discovery and navigation → static, indexable, structured, and lightweight.</p> <p>If you are building a directory with tools attached, start with the registry, enforce a lazy boundary between the directory and each tool, and use server-side execution only when the browser genuinely cannot do the job. The result is a site that is fast, indexable, and—most importantly—does not make the user wait for tools they did not ask for.</p>

Top comments (0)