如何用Gatsby渲染无额外开销的近乎空页面？能否渲染极简HTML页面？

Hey there! Let's break down your two Gatsby questions with practical, actionable solutions — I've worked through similar use cases before, so this should cover what you need:

1. Rendering an Empty Page with Almost No Extra Overhead #

If you just need a page that's effectively empty with minimal bloat, the quickest win is to create a page component that returns null directly:

// src/pages/empty.js
export default function EmptyPage() {
  return null;
}

This gives you a page with the bare minimum HTML structure, though by default it'll still include some of Gatsby's base hydration scripts. To strip those out entirely, you'll need to pair this with a custom HTML template (more on that below).

2. Rendering a Fully Pure HTML Page (No Gatsby Traces) #

Absolutely — you can generate a page that's exactly <html> <body> text </body> </html> with no Gatsby-specific attributes, scripts, or styles. Here's how to do it properly:

Step 1: Create a Custom HTML Template #

First, add (or override) the src/html.js file in your project. This replaces Gatsby's default template with your own stripped-down version:

import React from "react";

export default function HTML(props) {
  return (
    <html lang="en">
      <body>
        {props.body}
      </body>
    </html>
  );
}

If you want static text instead of dynamic content from the page component, you can hardcode text directly in the <body> tag instead of using props.body. Either way, this template skips all of Gatsby's default script injections and extra markup.

Step 2: Opt Out of Client-Side Hydration #

To make sure no Gatsby JS gets bundled for this page, add the disableHydration flag to your page component:

// src/pages/pure-page.js
export const disableHydration = true;

export default function PurePage() {
  return "text";
}

This tells Gatsby not to load any client-side JavaScript for this page, keeping the output 100% clean.

Can You Use Custom HTML + No Gatsby Link to Achieve This? #

Yes, that's exactly the right direction! But a couple of key notes to make it work perfectly:

• Ditching Gatsby Link avoids any of its associated scripts, but you still need the custom html.js to strip out Gatsby's default base scripts and markup.
• If you don't need any client-side interactivity at all, using the disableHydration flag (as above) is crucial to prevent any leftover JS from being included.
• You don't need any other customizations beyond these steps — this setup will give you the fully pure HTML page you're after.

内容的提问来源于stack exchange，提问作者toinbis