What is the module/nomodule pattern for differential serving?

Differential serving ships two builds: a modern one (ES2020+ with minimal transpilation) and a legacy one (ES5 for old browsers).

<!-- Modern browsers load this (smaller, faster) -->
<script type="module" src="app.modern.js"></script>

<!-- Legacy browsers (IE11) load this; modern browsers ignore it -->
<script nomodule src="app.legacy.js"></script>

Why it matters:

• Babel transpilation of async/await, optional chaining, nullish coalescing adds ~10–20% to bundle size in polyfills.
• 95%+ of users are on modern browsers — they get a leaner bundle.
• IE11 and very old browsers get the bloated legacy bundle — acceptable since they're a tiny minority.

In practice: Vite handles this automatically via @vitejs/plugin-legacy. Next.js's browserslist config controls transpilation targets.