1<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width"/><meta charSet="utf-8"/><title>Next, no js.</title><meta name="next-head-count" content="3"/><link rel="preload" href="/_next/static/css/7d03535b478f7e5a1fee.css" as="style"/><link rel="stylesheet" href="/_next/static/css/7d03535b478f7e5a1fee.css" data-n-g=""/><noscript data-n-css=""></noscript></head><body class="bg-gray-100 font-sans leading-normal tracking-normal"><div id="__next"><nav id="header" class="fixed w-full z-10 top-0 shadow bg-white"><div class="w-full md:max-w-4xl mx-auto flex flex-wrap items-center justify-between mt-0 py-3"><div class="pl-4"><a class="text-gray-900 text-base no-underline hover:no-underline font-extrabold text-xl" href="/">Next, no js.</a></div></div></nav><div class="container w-full md:max-w-3xl mx-auto pt-20 pb-4"><div class="w-full px-4 md:px-6 text-xl text-gray-800 leading-normal" style="font-family:Georgia,serif"><h1 class="font-bold font-sans break-normal text-gray-900 pt-6 pb-2 text-3xl md:text-4xl">Next, no js.</h1><h2 class="font-bold font-sans break-normal text-gray-900 pt-6 pb-2 text-2xl md:text-2xl">Static/inert DOM by default, opt-in SSR Hydration</h2><h3 class="font-bold font-sans break-normal text-gray-900 pt-4 pb-2 text-1xl md:text-1xl">This page has ZERO JavaScript - as it didn't need any</h3><p class="my-5">In the examples below however, JavaScript can be loaded on-demand to 2either hydrate the components with Preact, or just to access the markup.</p><h3 class="font-bold font-sans break-normal text-gray-900 pt-4 pb-2 text-1xl md:text-1xl">Examples:</h3><ul class="mb-6 mt-2 list-disc"><li class="ml-10"><a class="underline hover:no-underline cursor-pointer" href="/examples/with-formik">using a form library (Formik)</a></li><li class="ml-10"><a class="underline hover:no-underline cursor-pointer" href="/examples/with-js">on-demand SSR hydration</a></li><li class="ml-10"><a class="underline hover:no-underline cursor-pointer" href="/examples/with-data">on-demand SSR hydration with <code class="text-sm p-1 border-2 border-gray-300 bg-gray-200 rounded">getStaticProps</code></a></li><li class="ml-10"><a class="underline hover:no-underline cursor-pointer" href="/examples/vanilla-js">on-demand vanilla JS</a></li><li class="ml-10"><a class="underline hover:no-underline cursor-pointer" href="https://next-no-js-cc0feq40w.vercel.app/">Next.js + Turbo + on-demand SSR hydration</a></li><li class="ml-10"><a class="underline hover:no-underline cursor-pointer" href="https://next-no-js-git-decentralized.shaneosbourne8.vercel.app">Examples with decentralised modules (few extra KB, but easier to scale)</a></li></ul><h3 class="font-bold font-sans break-normal text-gray-900 pt-4 pb-2 text-1xl md:text-1xl">Updates:</h3><ul class="mb-6 mt-2 list-disc"><li class="ml-10">Sat Feb 27th: added Formik + stress test example</li><li class="ml-10">Sun Feb 14th: added content-hashes to filenames in on-demand bundles</li><li class="ml-10">Sun Feb 14th: added vanilla-js example</li><li class="ml-10">Sun Feb 14th: added decentralised versions</li><li class="ml-10">Mon Feb 15th: added a component-level hydration example with data</li><li class="ml-10">Mon Feb 18th: Next.js + Turbo + on-demand SSR hydration</li></ul><div class="pt-4"></div></div></div><footer class="bg-white border-t border-gray-400 shadow"><div class="container max-w-4xl mx-auto flex py-8"><div class="w-full mx-auto flex flex-wrap"><div class="flex w-full md:w-1/2 "><div class="px-8"><h3 class="font-bold text-gray-900">About</h3><p class="py-4 text-gray-600 text-sm">I spent years trying to delay/remove the hydration of 'inert' DOM in large React apps... It's hard.</p><p class="pb-4 text-gray-600 text-sm">Now I think content-heavy sites should opt-in to client-side JS on a component level instead. This site is my experiment to see how far I can push the idea of having Next generate the site/HTML, and then have Preact hydrate individual components that have opted-in to client-side JS</p></div></div><div class="flex w-full md:w-1/2"><div class="px-8"><h3 class="font-bold text-gray-900">Social</h3><ul class="list-reset items-center text-sm pt-3"><li><a class="underline hover:no-underline cursor-pointer" href="https://twitter.com/shaneOsbourne">@shaneOsbourne on Twitter</a></li></ul></div></div></div></div></footer></div><div><!-- no JS components found --></div></body></html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.