Папка приложения Next13 не отображает html в исходном коде страницы
Я некоторое время тестировал бета-версию Nextjs, но заметил, что источник страницы всегда пуст, несмотря ни на что.
Пример :
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</>
<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 (который является клиентским и в документации написано, что он будет пререндериться на сервере также), но, что самое удивительное, этого тега нет в исходном коде страницы. Может кто-нибудь прояснить это? Я беспокоюсь о SEO здесь.
1 ответ
TL:DR: Оформить заказ .
Столкнулся с аналогичной проблемой. Я импортировал клиентские компоненты без использования . При запуске в режиме разработки ничего не регистрировалось и не жаловались, но при запуске сборки и последующем запуске сервера сборки я получил приятную ошибку и ссылку на о переходе на рендеринг на стороне клиента.
Я бы также дважды проверил, что ваши клиентские компоненты помечены как'use client'(включая любые промежуточныеindexфайлы, которые могут импортировать/экспортировать компоненты – дополнительную информацию об импорте/экспорте см. в этом вопросе stackoverflow ).
Если вы используетеuseSearchParams, дважды проверьте, что компонент помечен только как клиентский. Когда вы ссылаетесь на компонент из контекста сервера, оберните его в компонент React (как описано в официальной NextJS: Вся страница переведена на рендеринг на стороне клиентадокументации Nextэту страницу).
Твойpage.tsxздесь выглядит нормально, у тебя естьlayout.tsxслишком? Вот где были мои проблемы. Если вы также пытаетесь импортировать отслеживание аналитики только для клиента, вам нужно будет обернуть это вSuspense.