{
  "id": 17016124,
  "title": "Prerendering a page per device, and the cache key that has to agree",
  "url": "https://urgent.news/2026/10/29/prerendering-a-page-per-device-and-the-cache-key-that-has-to-agree",
  "topic": "tech",
  "section": "Tech",
  "published": "2026-10-29T05:56:17.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/yhryshchanka/prerendering-a-page-per-device-and-the-cache-key-that-has-to-agree-g10"
  },
  "original_language": "en",
  "account": "Prerendering a page requires creating a separate HTML file for each device type that will interact with it. This process involves generating two distinct versions of the same document, one optimized for desktop devices and another tailored for mobile devices. The reason for this duplication is to ensure that the browser can make the appropriate choice about which version to display at the time the page is requested.\n\nCSS media queries play a crucial role in this process by rendering both versions of the page and hiding one based on the device's capabilities. This ensures that the same content is present in the document, but the browser selects the version best suited for the user's device before it is loaded.\n\nJavaScript further refines this decision-making process by determining the optimal rendering after the page has fully loaded. However, this approach leaves a gap as the first paint, or the initial rendering of the page, is an educated guess and can result in an undesired user experience.\n\nTo avoid this, building the page with the correct version from the beginning (at build time) is a more efficient strategy. This results in one version of the page per device type, stored in a separate file. This approach ensures that the HTML read by web crawlers is consistent across all devices, eliminating confusion about the content that each specific device will see.\n\nNext.js, a popular React framework, facilitates this process within its App Router in version 15. By opting in with a specific export, a page can be designated to use this prerendering technique. However, this page must not attempt to render itself as it would without the device-based rendering. Instead, it should direct traffic to the appropriate device-specific file through a rewrite mechanism that occurs before the request reaches the route.\n\nBy implementing these strategies, the application can effectively serve the correct content to each device type while minimizing guesswork and ensuring a consistent user experience.",
  "summary": "A marketing page with no per visitor content should be built once and handed out as a file, which is what prerendering means here: the build writes the HTML, and the server answers with it instead of rendering again. The page I had to do this to was not quite static. Its footer is an accordion on a phone and a grid on a laptop, and a few sections below it differ the same way. Two rendered…",
  "key_points": [
    "Prerendering creates separate HTML files for desktop and mobile devices.",
    "CSS media queries render both versions and hide one based on device capabilities.",
    "Next.js App Router in version 15 supports prerendering via specific export."
  ],
  "editors_take": "Generating device-specific HTML files at build time eliminates the initial rendering guesswork that often compromises user experience when relying solely on client-side CSS or JavaScript to hide content.",
  "illustration": null,
  "coverage": {
    "outlets": 1,
    "also_reported_by": []
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}