So funktioniert die Anweisung „Use Client' in Next.js 13
P粉044526217
2023-08-26 21:55:31
<p>Ich versuche, etwas über serverseitiges Rendering mit Next.js 13.4 und dem neuen Verzeichnis <code>app/</code> zu lernen. Soweit ich weiß, ist jede Komponente standardmäßig eine <em>Server</em>-Komponente (d. h. serverseitig gerendert). </p>
<p>Wir können jedoch die Anweisung <code>'use client'</em> verwenden, um die Komponente zu einer <em>client</em>-Komponente zu machen. </p>
<p>Im Folgenden habe ich eine einfache „Hello World“-Komponente eingerichtet, zunächst als Serverkomponente und dann als Clientkomponente. In jedem Fall vergleiche ich den Quellcode der Seite.</p>
<h3><code>src/app/page.js</code>（服务器组件）</h3>
<pre class="brush:php;toolbar:false;">Standardfunktion exportieren Home() {
zurückkehren (
<Haupt>
<h1>Hallo Welt</h1>
</main>
)
}</pre>
<p>Chrome > 查看页面源代码</p>
<pre class="brush:php;toolbar:false;"><!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charSet="utf-8" />
<title>Nächste App erstellen</title>
<meta name="description" content="Generiert durch „Nächste App erstellen“ />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="/_next/static/chunks/polyfills.js" noModule=""></script>
</head>
<Körper>
<Haupt>
<h1>Hallo Welt</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}n"])</script>
<script>self.__next_f.push([1, "1:[[],["$","$L2",null,{"assetPrefix":"","initialCanonicalUrl":"/","initialTree ":["",{"children":["__PAGE__",{}]},"$undefiniert",$undefiniert",true],"initialHead":["$L3",null],"globalErrorComponent" :"$4",notFound":["$","html",null,{"lang":"en","children":["$","body",null,{"children":[ „$L5“, „$undefiniert“,[[“$“, „title“,null,{“children“: „404: Diese Seite konnte nicht gefunden werden.“}],[“$“, „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“: „Diese Seite konnte nicht gefunden werden.“}]}]]}]}]]]}]}],"asNotFound":false,"children":[["$","html",null,{"lang":"en","children":["$","body",null,{" children":["$",$L6",null,{"parallelRouterKey":children",segmentPath":["children"],"error":$undefiniert,errorStyles:$undefiniert ","loading":"$undefiniert","loadingStyles":"$undefiniert","hasLoading":false,"template":["$","$L7",null,{}],"templateStyles": „$undefiniert“, „notFound“: „$undefiniert“, „notFoundStyles“: „$undefiniert“, „childProp“:{“current“:[[“$“, „main“,null,{“children“:[ "$", "h1",null,{"children":Hello World"}]}],null],"segment":__PAGE__"},"styles":[]}]}]}],null ]}]]n"])</script>
<script>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": "Nächste App erstellen"}],["$", "meta",null,{"name": "Beschreibung", "Inhalt": "Generiert durch "Nächste App erstellen"}],null, null,null,null,n"])</script>
<script>self.__next_f.push([1, "ull,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>
</body>
</html></pre>
<h3><code>src/app/page.js</code>（客户端组件）</h3>
<pre class="brush:php;toolbar:false;">'use client';
Standardfunktion Home() exportieren {
zurückkehren (
<Haupt>
<h1>Hallo Welt</h1>
</main>
)
}</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>
<script>self.__next_f.push([1, "1:[[],["$","$L2",null,{"assetPrefix":"","initialCanonicalUrl":"/","initialTree ":["",{"children":["__PAGE__",{}]},"$undefiniert",$undefiniert",true],"initialHead":["$L3",null],"globalErrorComponent" :"$4",notFound":["$","html",null,{"lang":"en","children":["$","body",null,{"children":[ „$L5“, „$undefiniert“,[[“$“, „title“,null,{“children“: „404: Diese Seite konnte nicht gefunden werden.“}],[“$“, „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“: „Diese Seite konnte nicht gefunden werden.“}]}]]}]}]]]}]}],"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],"segment":"__PAGE__"},"styles":[]}]}]}],null]}]]n"])</script>
<script>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": "Nächste App erstellen"}],["$", "meta", null, {"name": "Beschreibung", "Inhalt": "Generiert durch "Nächste App erstellen"}], null, null,null,null,n"])</script>
<script>self.__next_f.push([1, "ull,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>
</body>
</html></pre>
<hr />
<p>于 React 根 DOM 节点的东西 - 基本上是一个空的div 等待注入一些 HTML.我在这里缺少什么？</p>
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
从这里
服务器和客户端组件在静态渲染期间的渲染方式不同：
现在，通过服务器和客户端组件，React 可以在客户端和服务器上进行渲染，这意味着您可以可以在组件级别选择渲染环境。
默认情况下，
app路由器使用服务器组件，允许您轻松地在服务器上渲染组件并减少发送到客户端的 JavaScript 量。