React 서버 구성 요소의 강력한 기능 잠금 해제 | 1부

? 안녕하세요 여러분!
React.js는 사용자 인터페이스 구축에 가장 널리 사용되는 JavaScript 라이브러리 중 하나입니다. React 커뮤니티는 잘 문서화되어 있지만 아직 덜 알려진 테마와 개념이 있습니다.
차나 커피 끓여보자, 가자!
RSC(React Server Components)는 렌더링 성능을 최적화하기 위해 React 팀에서 도입한 새로운 실험적 기능입니다. 이를 통해 개발자는 React 구성 요소 모델을 유지하면서 서버에서 렌더링되는 앱의 일부를 구축할 수 있습니다.
클라이언트나 SSR 서버와 별도의 환경에서 실행되며, CI 서버에서 빌드 시 한 번 호출할 수도 있고, 웹 서버를 사용하여 요청마다 실행할 수도 있습니다.
React Server 구성 요소의 강력한 기능을 통해 React 구성 요소에서 바로 파일 콘텐츠를 읽을 수 있습니다.
아래에는 간단한 예가 나와 있습니다. 어떻게 할 수 있나요?

import marked from 'marked'; // Not included in bundle
import sanitizeHtml from 'sanitize-html'; // Not included in bundle

async function Page({page}) {
  // NOTE: loads *during* render, when the app is built.
  const content = await file.readFile(`${page}.md`);

  return <div>{sanitizeHtml(marked(content))}</div>;
}

클라이언트는 파일에서 렌더링된 출력만 볼 수 있습니다. 이는 첫 번째 페이지 로드 중에 콘텐츠가 표시되며 정적 콘텐츠를 렌더링하는 데 필요한 값비싼 라이브러리(sanitize-html로 표시)가 번들에 포함되어 있지 않음을 의미합니다.

서버가 포함된 서버 구성 요소

서버 구성 요소를 사용하면 데이터베이스와 통신하고 데이터를 가져와 클라이언트에서 사용할 수 있습니다. Next.js 애플리케이션에서도 이를 수행할 수 있으며 모든 ORM을 통합할 수 있습니다.
다음은 데이터베이스에서 데이터를 가져오기 위해 서버 구성 요소를 사용하는 간단한 예입니다.

import db from './database';

async function Note({id}) {
  // NOTE: loads *during* render.
  const note = await db.notes.get(id);
  return (
    <div>
      <author>



<p>In database file there can be implementation of data query from database.<br>
For example:<br>
</p>

<pre class="brush:php;toolbar:false">const db = {
  notes: {
    get: async (id) => {
      return dbClient.query('SELECT * FROM notes WHERE id = ?', [id]);
    }
  },
  authors: {
    get: async (id) => {
      return dbClient.query('SELECT * FROM authors WHERE id = ?', [id]);
    }
  }
};

그런 다음 번들러는 데이터, 렌더링된 서버 구성 요소 및 동적 클라이언트 구성 요소를 번들로 결합합니다. 페이지가 로드되면 브라우저에는 원래 Note 및 Author 구성 요소가 표시되지 않습니다. 렌더링된 출력만 클라이언트로 전송됩니다. 서버 구성 요소를 서버에서 다시 가져와서 동적으로 만들 수 있으며, 서버에서 데이터에 액세스하고 다시 렌더링할 수 있습니다.

서버 구성 요소와 비동기 구성 요소의 강력한 기능

서버 구성 요소에는 async/await를 사용하여 구성 요소를 작성하는 새로운 방법이 도입되었습니다. 비동기 구성 요소에서 대기하면 React는 렌더링을 다시 시작하기 전에 약속이 해결될 때까지 일시 중지하고 기다립니다. 이는 Suspense에 대한 스트리밍 지원을 통해 서버/클라이언트 경계 전반에서 작동합니다.
서버 구성 요소의 예:

// Server Component
import db from './database';

async function Page({id}) {
  // Will suspend the Server Component.
  const note = await db.notes.get(id);

  // NOTE: not awaited, will start here and await on the client. 
  const commentsPromise = db.comments.get(note.id);
  return (
    <div>
      {note}
      <suspense fallback="{<p">Loading Comments...}>
        <comments commentspromise="{commentsPromise}"></comments>
      </suspense>
    </div>
  );
}

// Client Component
"use client";
import {use} from 'react';

function Comments({commentsPromise}) {
  // NOTE: this will resume the promise from the server.
  // It will suspend until the data is available.
  const comments = use(commentsPromise);
  return comments.map(commment => <p>{comment}</p>);
}

댓글의 우선순위가 낮으므로 서버에서 Promise를 시작하고 *use * API를 사용하여 클라이언트에서 이를 기다립니다. 그러면 노트 내용의 렌더링을 차단하지 않고 클라이언트에서 일시 중지됩니다.

다음 부분에서는 서버 작업 및 지시문("클라이언트 사용", "서버 사용") 기능에 대해 논의하고 "서버 사용"이 "클라이언트 사용"과 동일한 역할을 갖지 않는 이유는 무엇입니까?

곧 만나요!

서버 구성 요소는 아직 실험 단계에 있지만 대규모 애플리케이션을 개선할 수 있는 잠재력으로 서서히 주목을 받고 있습니다. 불필요한 JavaScript를 클라이언트에 전송할 필요가 없으므로 로딩 시간이 빨라지고 사용자 경험이 더욱 원활해집니다.