Rumah  >  Soal Jawab  >  teks badan

Cara arahan "Gunakan Klien" berfungsi dalam Next.js 13

<p>Saya cuba belajar tentang pemaparan sebelah pelayan menggunakan Next.js 13.4 dan direktori <code>app/</code> Daripada apa yang saya faham, setiap komponen ialah <em>pelayan</em> komponen secara lalai (iaitu bahagian pelayan yang diberikan). </p> <p>Walau bagaimanapun, kami boleh menggunakan arahan <code>'use client'</code> untuk memaksa komponen menjadi <em>client</em> </p> <p>Di bawah, saya telah menyediakan komponen "Hello World" yang mudah, pertama sebagai komponen pelayan dan kemudian sebagai komponen klien. Dalam setiap kes, saya membandingkan kod sumber halaman.</p> <h3><code>src/app/page.js</code>(服务器组件)</h3> <pre class="brush:php;toolbar:false;">eksport fungsi lalai Laman Utama() { kembali ( <utama> <h1>Hello World</h1> </utama> ) }</pre> <p>Chrome > 查看页面源代码</p> <pre class="brush:php;toolbar:false;"><!DOCTYPE html> <html lang="en"> <kepala> <meta charSet="utf-8" /> <title>Buat Apl Seterusnya</title> <meta name="description" content="Dihasilkan oleh create next app" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <skrip src="/_next/static/chunks/polyfills.js" noModule=""></script> </head> <badan> <utama> <h1>Hello World</h1> </utama> <skrip src="/_next/static/chunks/webpack.js" async=""></script> <skrip src="/_next/static/chunks/main-app.js" async=""></script> <skrip>(self.__next_f = self.__next_f || []).push([0])</script> <skrip>self.__next_f.push([1, "0:"$L1"n"])</script> <skrip>self.__next_f.push([1, "2:I{"id":"(app-client)/./node_modules/next/dist/client/components/app-router.js","chunks ":["webpack:static/chunks/webpack.js"],"name":"","async":false}n4:I{"id":"(app-client)/./node_modules/next/ dist/client/components/error-boundary.js","chunks":["webpack:static/chunks/webpack.js"],"name":"","async":false}n6:I{"id ":"(app-client)/./node_modules/next/dist/client/components/layout-router.js","chunks":["app-client-internals:static/chunks/app-client-internals. js"],"name":"","async":false}n7:I{"id":"(app-client)/"])</script> <skrip>self.__next_f.push([1, "./node_modules/next/dist/client/components/render-from-template-context.js","chunks":["app-client-internals:static /chunks/app-client-internals.js"],"name":"","async":false}n"])</script> <skrip>self.__next_f.push([1, "1:[[],["$","$L2",null,{"assetPrefix":"","initialCanonicalUrl":"/","initialTree ":["",{"children":["__PAGE__",{}]},"$udefined","$undefined",true],"initialHead":["$L3",null],"globalErrorComponent" :"$4","notFound":["$","html",null,{"lang":"en","children":["$","body",null,{"children":[ "$L5","$udefined",[["$","title",null,{"children":"404: Halaman ini tidak ditemui."}],["$","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":"Halaman ini tidak ditemui."}]}]]}}]]]}]}],"asNotFound":false,"children":[["$","html",null,{"lang":"en","children":["$","body",null,"{" children":["$","$L6",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$udefined","errorStyles":"$undefined ","loading":"$udefined","loadingStyles":"$undefined","hasLoading":false,"template":["$","$L7",null,{}],"templateStyles": "$udefined","notFound":"$udefined","notFoundStyles":"$udefined","childProp":{"current":[["$","main",null,{"children":[ "$","h1",null,{"children":"Hello World"}]}],null],"segmen":"__PAGE__"},"styles":[]}]}]}],null ]}]]n"])</script> <skrip>self.__next_f.push([1, "5:[[["$","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]n3:[[["$","meta",null,{"charSet":"utf-8"}],["$","title",null ,{"children":"Create Next App"}],["$","meta",null,{"name":"description","content":"Dihasilkan dengan create next app"}],null, null,null,null,n"])</script> <skrip>self.__next_f.push([1, "ull,null,null,null,["$","meta",null,{"name":"viewport","content":"width=device -lebar, skala awal=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> </badan> </html></pre> <h3><code>src/app/page.js</code>(客户端组件)</h3> <pre class="brush:php;toolbar:false;">'use client'; eksport fungsi lalai Laman Utama() { kembali ( <utama> <h1>Hello World</h1> </utama> ) }</pre> <p>Chrome > 查看页面源代码</p> <pre class="brush:php;toolbar:false;"><!DOCTYPE html> <html lang="en"> <head> <meta charSet="utf-8" /> <title>Create Next App</title> <meta name="description" content="Generated by create next app" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <script src="/_next/static/chunks/polyfills.js" noModule=""></script> </head> <body> <main> <h1>Hello World</h1> </main> <script src="/_next/static/chunks/webpack.js" async=""></script> <script src="/_next/static/chunks/main-app.js" async=""></script> <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","chunks":["webpack:static/chunks/webpack.js"],"name":"","async":false}n4:I{"id":"(app-client)/./node_modules/next/dist/client/components/error-boundary.js","chunks":["webpack:static/chunks/webpack.js"],"name":"","async":false}n6:I{"id":"(app-client)/./node_modules/next/dist/client/components/layout-router.js","chunks":["app-client-internals:static/chunks/app-client-internals.js"],"name":"","async":false}n7:I{"id":"(app-client)/"])</script> <script>self.__next_f.push([1, "./node_modules/next/dist/client/components/render-from-template-context.js","chunks":["app-client-internals:static/chunks/app-client-internals.js"],"name":"","async":false}n8:I{"id":"(app-client)/./src/app/page.js","chunks":["app/page:static/chunks/app/page.js"],"name":"","async":false}n"])</script> <skrip>self.__next_f.push([1, "1:[[],["$","$L2",null,{"assetPrefix":"","initialCanonicalUrl":"/","initialTree ":["",{"children":["__PAGE__",{}]},"$udefined","$undefined",true],"initialHead":["$L3",null],"globalErrorComponent" :"$4","notFound":["$","html",null,{"lang":"en","children":["$","body",null,{"children":[ "$L5","$udefined",[["$","title",null,{"children":"404: Halaman ini tidak ditemui."}],["$","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":"Halaman ini tidak ditemui."}]}]]}}]]]}]}],"asNotFound":false,"children":[["$","html",null,{"lang":"en","children":["$","body",null,{"children":["$","$L6",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","loading":"$undefined","loadingStyles":"$undefined","hasLoading":false,"template":["$","$L7",null,{}],"templateStyles":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","childProp":{"current":[["$","$L8",null,{"params":{},"searchParams":{}}],null],"segmen":"__PAGE__"},"styles":[]}]}]}],null]}]]n"])</script> <skrip>self.__next_f.push([1, "5:[[["$","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]n3:[[["$","meta",null,{"charSet":"utf-8"}],["$","title",null ,{"children":"Create Next App"}],["$","meta",null,{"name":"description","content":"Dihasilkan dengan create next app"}],null, null,null,null,n"])</script> <skrip>self.__next_f.push([1, "ull,null,null,null,["$","meta",null,{"name":"viewport","content":"width=device -lebar, skala awal=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> </badan> </html></pre> <hr /> <p>我很困惑,因为客户端组件似乎已预渲染了 HTML,但“Hello World”显然存在于源代码于代码。于 React 根 DOM 节点的东西 - 基本上是一个空的div 等待注入一些 HTML。我在这里缺少什么?</p>
P粉044526217P粉044526217442 hari yang lalu598

membalas semua(1)saya akan balas

  • P粉268654873
  • Batalbalas