React サーバー コンポーネントの力を解き放つ |パート 1

?みなさん、こんにちは！
React.js は、ユーザー インターフェイスを構築するための最も人気のある JavaScript ライブラリの 1 つです。 React コミュニティには十分に文書化されていますが、まだあまり知られていないテーマや概念がいくつかあります。
お茶かコーヒーを作りましょう、行きましょう!
React Server Components (RSC) は、レンダリング パフォーマンスを最適化するために React チームによって導入された新しい実験的な機能です。これにより、開発者は React コンポーネント モデルを維持しながら、サーバー上でレンダリングされるアプリの一部を構築できます。
クライアントまたは SSR サーバーとは別の環境で実行され、CI サーバーでビルド時に 1 回呼び出すことも、Web サーバーを使用してリクエストごとに実行することもできます。
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 は一時停止し、Promise が解決されるまで待機してからレンダリングを再開します。これは、サスペンスのストリーミング サポートにより、サーバー/クライアントの境界を越えて機能します。
サーバーコンポーネントの例:

// 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 をクライアントに送信する必要がなくなり、読み込み時間が短縮され、ユーザー エクスペリエンスがよりスムーズになります。