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 tag is not there in the page source. Can someone clarify this ? I'm concerned about SEO here.
