Next.js 13.4와 새로운 app/ 디렉토리를 사용하여 서버 측 렌더링에 대해 배우려고 합니다. 내가 이해한 바로는 모든 구성 요소는 기본적으로 서버 구성 요소입니다(즉, 서버 측에서 렌더링됨).

그러나 'use client' 지시문을 사용하여 구성 요소를 client 구성 요소로 만들 수 있습니다.

아래에서는 간단한 "Hello World" 구성 요소를 먼저 서버 구성 요소로 설정한 다음 클라이언트 구성 요소로 설정했습니다. 각각의 경우에 페이지 소스 코드를 비교합니다.

src/app/page.js（服务器组件）

기본 함수 내보내기 Home() { 반품 ( <메인> 
Hello World
  ) }

크롬 > 查看页면源代码

  <머리>       <본문> <메인> 
Hello World
       <스크립트>self.__next_f.push([1, "./node_modules/next/dist/client/comComponents/render-from-template-context.js","chunks":["app-client-internals:static /chunks/app-client-internals.js"],"name":"","async":false}n"])  <스크립트>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":"다음 앱 만들기"}],["$","meta",null,{"name":"description","content":"다음 앱 만들기에 의해 생성됨"}],null, null,null,null,n"])   

src/app/page.js（客户端组件）

'클라이언트 사용'; 기본 함수 내보내기 Home() { 반품 ( <메인> 
Hello World
  ) }

Chrome > 查看页面源代码

        
  
 
Hello World
 
        <스크립트>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":"다음 앱 만들기"}],["$","meta",null,{"name":"description","content":"다음 앱 만들기에 의해 생성됨"}],null, null,null,null,n"])   

我很困惑，因为客户端组件似乎已预渲染了 HTML，但“Hello World”显然存于源代码中。我期望看到类似于 React 根 DOM节点的东西 - 基本上是一个공적 div 等待注入一些 HTML。내가 어디에 있나요?