英文:
Next13 app folder not render html in page source
问题
以下是代码的翻译部分：
<!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>
这是你提供的HTML页面源代码的翻译部分。希望这对你有所帮助。
英文:
i've been testing Nextjs beta for a while now but i'm noticing that the page-source it's always empty no matter what.
Example :
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;
Output on the 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>
So, not only the server component is just streamed as JSON (i thought should be rendered on the server and sent as html ), but also the Visit component ( which is client and in the documentation it's written that it would be prerendered on the server as well )but most surpisingly the <h1> tag is not there in the page source.
Can someone clarify this ?
I'm concerned about SEO here.
答案1
得分: 3
TL:DR: 请查看NextJS：整个页面都转为客户端渲染。
遇到了类似的问题。我在没有使用Suspense的情况下导入了客户端组件。在开发模式下似乎没有记录任何内容或投诉，但在构建并启动构建服务器后，我得到了一个很好的错误和指向此页面的链接，讨论了切换到客户端渲染的问题。
还要仔细检查你的仅客户端组件是否标记为'use client'（包括可能导入/导出组件的任何中间index文件 - 参见此stackoverflow问题 以获取更多有关导入/导出的信息）。
如果你正在使用useSearchParams，请确保该组件标记为仅客户端。当你在服务器上下文中引用组件时，将其包装在React的Suspense组件中（如官方Next文档中所述）。
你的page.tsx看起来没问题，你也有一个layout.tsx吗？我的问题就出在那里。如果你尝试导入仅客户端的分析跟踪，你需要将其包装在Suspense中。
英文:
TL:DR: Checkout NextJS: Entire page deopted into client-side rendering.
Ran into a similar issue. I was importing client components without using Suspense. Running in dev mode didnt seem to log anything or complain, but running a build and then starting the build server I got a nice error and link to this page about deopting into client-side rendering.
I'd also double check your client only components are marked as 'use client' (including any intermediate index files that may import/export the components - see this stackoverflow question for more info about import/exporting).
If you are using useSearchParams, double check the component is marked as client only. When you're referencing the component from a server context, wrap it in a React Suspense component (as outlined in the official Next docs).
Your page.tsx here looks okay, do you have a layout.tsx too? Thats where my issues were. If you're attempting to import client-only analytics tracking too, you'll need to wrap that in Suspense.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论