Next.js 13 App目录页面源码不渲染HTML问题咨询
Next.js Beta版本页面源码始终为空的问题
我测试Next.js 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;
页面源码输出如下:
<!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也没正常渲染,最离谱的是连<h1>标签都没出现在页面源码里。有人能解释这是怎么回事吗?我很担心这会影响SEO。
内容的提问来源于Stack Exchange,提问作者Miriam
相关产品推荐
相关产品推荐

