next.js 项目中使用 `getstaticprops` 和 `getstaticpaths` 却无法在 html 源码中输出渲染后的内容，导致 seo 失效和无 js 环境下页面空白——根本原因在于 `_app.js` 中错误的客户端条件渲染逻辑阻断了服务端静态 html 的生成。
你遇到的问题非常典型：页面在浏览器中渲染正常，但查看网页源代码（View Page Source）时为空白或仅含占位符 ，且禁用 JavaScript 后页面完全不显示。这说明 Next.js 的静态生成（SSG）流程被意外破坏，HTML 并未在构建时完成预渲染，而是退化为纯客户端渲染（CSR）。
? 根本原因：_app.js 中的 typeof window !== "undefined" 条件导致 SSR 失败
在你原始的 _app.js 中，关键问题出在这里：
render() {
const { Component, pageProps } = this.props;
return (
typeof window !== "undefined" && ( // ❌ 错误！服务端渲染时 window 不存在，整个 JSX 返回 false
<>
<NextNProgress />
<Component {...pageProps} />
</>
)
);
}⚠️ typeof window !== "undefined" 在服务端（Node.js 环境）永远为 false，因此 render() 方法返回 false，Next.js 无法生成任何 HTML 内容——这直接导致：
- getStaticProps 获取的数据被丢弃；
- 页面源码中只有空壳 ；
- SEO 抓取器、搜索引擎爬虫及禁用 JS 的用户看到空白页；
- 所有静态优化（如预加载、preload 标签）失效。
✅ 正确修复：移除服务端不安全的条件判断
只需删除 typeof window !== "undefined" 包裹，让 _app.js 在服务端和客户端均能正常渲染：
// pages/_app.js（修复后）
import React from "react";
import App from "next/app";
import TagManager from "react-gtm-module";
import NextNProgress from "../components/NextNProgress";
import "bootstrap/dist/css/bootstrap.css";
import "../scss/index.scss";
const tagManagerArgs = {
gtmId: "########",
};
class MyApp extends App {
static async getInitialProps({ Component, ctx }) {
let pageProps = {};
if (Component.getInitialProps) {
pageProps = await Component.getInitialProps(ctx);
}
return { pageProps };
}
componentDidMount() {
TagManager.initialize(tagManagerArgs);
}
render() {
const { Component, pageProps } = this.props;
return (
<>
<NextNProgress /> {/* 注意：确保该组件支持 SSR，否则需做服务端兼容处理 */}
<Component {...pageProps} />
</>
);
}
}
export default MyApp;✅ 关键点：NextNProgress 等 UI 组件若包含浏览器专属 API（如 window、document），必须在 useEffect 或 componentDidMount 中初始化，或通过 dynamic(import(), { ssr: false }) 懒加载，避免服务端报错。
? 验证是否修复成功
-
执行构建并检查输出：
next build && next export
检查 out/ 目录下对应页面（如 out/products/123/index.html）是否存在且包含完整 HTML 结构（含
、产品描述等真实内容）。
-
本地验证源码：
- 启动生产服务：npx serve -s out
- 访问页面 → 右键「查看网页源代码」→ 应可见完整的、已渲染的 HTML（非空 ）。
禁用 JavaScript 测试：
- Chrome DevTools → Application → Service Workers → ✅ “Disable cache” + 勾选 “Disable JavaScript”
- 刷新页面 → 页面应仍可正常显示内容（证明 SSG 生效）。
⚠️ 补充注意事项
- _document.js 不得包含 React Hooks 或状态逻辑：你当前的 _document.js 是合规的（仅负责注入 资源），无需修改；但切勿在此文件中调用 useState、useEffect 或任何客户端专属逻辑。
- 第三方脚本需延迟加载：如 GTM、Inspectlet 等分析工具，务必仅在 componentDidMount（客户端）初始化，不可在服务端执行。
- CSS 加载建议：Bootstrap 的 CDN 链接虽可用，但推荐改用 @import 或 CSS-in-JS 方案以更好支持 SSR；若坚持 CDN，请确保 crossOrigin="anonymous" 拼写正确（你原文中 anomynous 是拼写错误，应为 anonymous）。
✅ 总结
问题现象 根本原因 解决方案 页面源码为空、SEO 失效、禁 JS 白屏 _app.js 中 typeof window 条件导致服务端渲染中断 移除该条件，确保 render() 始终返回有效 JSX；将浏览器专属逻辑移至 componentDidMount 修复后，你的 getStaticProps 数据将真正注入 HTML 源码，实现开箱即用的 SEO 友好性与渐进增强体验。
