Cara arahan "Gunakan Klien" berfungsi dalam Next.js 13
P粉044526217
2023-08-26 21:55:31
<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>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Dari sini
Komponen pelayan dan pelanggan dipaparkan secara berbeza semasa pemaparan statik:
Kini, dengan Pelayan dan Komponen Pelanggan, React boleh membuat pada kedua-dua pelanggan dan pelayan, yang bermaksud anda boleh memilih persekitaran pemaparan pada peringkat komponen.
Secara lalai,
appPenghala menggunakan Komponen Pelayan, membolehkan anda membuat komponen pada pelayan dengan mudah dan mengurangkan jumlah JavaScript yang dihantar kepada pelanggan.