我已经测试Nextjs beta有一段时间了，但我注意到无论如何页面源总是空的。
示例：
import VisitProvider from "./(components)/VisitProvider";
import Visit from "./(components)/Visit";
import FlightSearcherWrapper from "./(components)/FlightSearcherWrapper";
import { headers } from "next/headers";
import { Suspense } from "react";
import ServerComponent from "./(components)/ServerComponent";
const Page = () => {
const headersList = headers();
const userAgent = headersList.get("user-agent");
return (
<div>
<h1>Test</h1>
<ServerComponent />
<VisitProvider userAgent={userAgent}>
<Suspense fallback={<div>Suspending..</div>}>
<Visit />
</Suspense>
<FlightSearcherWrapper />
</VisitProvider>
</div>
);
};
export default Page;pagesource上的输出：
<!DOCTYPE html>
<html id="__next_error__">
<head>
<link rel="preload" as="script" href="/_next/static/chunks/polyfills.js" />
<script src="/_next/static/chunks/polyfills.js" nomodule=""></script>
</head>
<body>
<script src="/_next/static/chunks/webpack.js" async=""></script>
<script src="/_next/static/chunks/main-app.js" async=""></script>
</body>
</html>
<script>
(self.__next_f = self.__next_f || []).push([0]);
</script>
<script>
self.__next_f.push([1, '0:"$L1"\n']);
</script>
<script>
self.__next_f.push([
1,
'2:I{"id":"(app-client)/./node_modules/next/dist/client/components/app-router.js","name":"","chunks":["app-client-internals:app-client-internals"],"async":false}\n4:I{"id":"(app-client)/./node_modules/next/dist/client/components/error-boundary.js","name":"","chunks":["app-client-internals:app-client-internals"],"async":false}\n5:I{"id":"(app-client)/./node_modules/next/dist/client/components/layout-router.js","name":"","chunks":["app-client-internals:app-client-internals"],"async":false}\n6:I{"id":"(app-client)',
]);
</script>
<script>
self.__next_f.push([
1,
'/./node_modules/next/dist/client/components/render-from-template-context.js","name":"","chunks":["app-client-internals:app-client-internals"],"async":false}\n7:I{"id":"(app-client)/./app/test/(components)/VisitProvider.js","name":"","chunks":["app/test/page:app/test/page"],"async":false}\n8:"$Sreact.suspense"\n9:I{"id":"(app-client)/./app/test/(components)/Visit.js","name":"","chunks":["app/test/page:app/test/page"],"async":false}\na:I{"id":"(app-client)/./app/test/(components)/FlightSearcherWrapper.js","name":',
]);
</script>
<script>
self.__next_f.push([
1,
'"","chunks":["app/test/page:app/test/page"],"async":false}\n',
]);
</script>
<script>
self.__next_f.push([
1,
'1:["$","$L2",null,{"assetPrefix":"","initialCanonicalUrl":"/test","initialTree":["",{"children":["test",{"children":["",{}]},null,null,true]}],"initialHead":["$L3",[["$","title",null,{}],["$","meta",null,{"content":"width=device-width, initial-scale=1","name":"viewport"}],["$","link",null,{"rel":"icon","href":"/favicon.ico"}]]],"globalErrorComponent":"$4","children":["$","$L5",null,{"parallelRouterKey":"children","segmentPath":["children"],"hasLoading":false,"template":["$","$L6",null,{}],"childProp":{"current":[["$","html",null,{"children":[["$","head",null,{}],["$","body",null,{"children":["$","$L5",null,{"parallelRouterKey":"children","segmentPath":["children","test","children"],"hasLoading":false,"template":["$","$L6",null,{}],"notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\\"Segoe UI\\",Roboto,Helvetica,Arial,sans-serif,\\"Apple Color Emoji\\",\\"Segoe UI Emoji\\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":"404"}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],"childProp":{"current":[["$","div",null,{"children":[["$","a",null,{"href":"/","children":"This is a server component"}],["$","$L7",null,{"userAgent":"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36","children":[["$","$8",null,{"fallback":["$","div",null,{"children":"Suspending.."}],"children":["$","$L9",null,{}]}],["$","$La",null,{}]]}]]}],null,null,[]],"segment":""}}]}]]}],null,null,[]],"segment":"test"}}]}]\n',
]);
</script>
<script>
self.__next_f.push([
1,
'3:[[["$","meta",null,{"charSet":"utf-8"}],null,null,null,null,null,null,null,null,null,null,["$","meta",null,{"name":"viewport","content":"width=device-width, initial-scale=1"}],null,null,null,null,null,null,null,null,null,null,[]],[null,null,null,null],null,null,[null,null,null,null,null],null,null,null,null,null]\n',
]);
</script>因此，不仅服务器组件只是流为JSON（我认为应该在服务器上呈现并作为html发送），而且Visit组件（这是客户端，在文档中它被写为它也将在服务器上预呈现），但最令人惊讶的是，标签不在页面源代码中。有人能澄清一下吗？我在这里关注SEO。
1条答案
按热度按时间z0qdvdin1#
TL：DR：结帐NextJS: Entire page deopted into client-side rendering。
遇到了类似的问题。我在不使用
Suspense的情况下导入客户端组件。在开发模式下运行似乎没有记录任何东西或抱怨，但运行一个构建，然后启动构建服务器，我得到了一个很好的错误和链接到this page关于退出到客户端渲染。我还要仔细检查您的客户端组件是否标记为
'use client'（包括任何可能导入/导出组件的中间index文件-有关导入/导出的更多信息，请参阅此堆栈溢出问题）。如果您使用的是
useSearchParams，请仔细检查组件是否标记为仅限客户端。当您从服务器上下文引用组件时，将其 Package 在ReactSuspense组件中（如官方Next docs所概述）。你这里的
page.tsx看起来不错，你也有layout.tsx吗？这就是我的问题所在。如果您还试图导入仅限客户端的分析跟踪，则需要将其 Package 在Suspense中。