Membuka Kunci Kuasa Komponen Pelayan React | Bahagian 1

? Hai, semua!
React.js ialah salah satu perpustakaan JavaScript yang paling popular untuk membina antara muka pengguna. Walaupun komuniti React didokumentasikan dengan baik, masih terdapat beberapa tema dan konsep yang kurang dikenali.
Jom buat teh atau kopi, jom!
Komponen Pelayan React (RSC) ialah ciri percubaan baharu yang diperkenalkan oleh pasukan React untuk mengoptimumkan prestasi pemaparan. Mereka membenarkan pembangun membina bahagian apl mereka yang dipaparkan pada pelayan sambil mengekalkan model komponen React.
Ia berjalan dalam persekitaran yang berasingan daripada klien atau pelayan SSR, dan boleh dipanggil sekali pada masa binaan pada pelayan CI, atau ia boleh dijalankan untuk setiap permintaan menggunakan pelayan web.
Dengan kuasa komponen Pelayan React, kami boleh membaca kandungan fail terus dalam komponen React kami.
Di bawah, terdapat contoh mudah, bagaimana kita boleh melakukannya.

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>;
}

Pelanggan hanya akan melihat output yang diberikan daripada fail. Ini bermakna kandungan boleh dilihat semasa pemuatan halaman pertama dan himpunan itu tidak termasuk perpustakaan mahal (ditanda, sanitize-html) yang diperlukan untuk memaparkan kandungan statik.

Komponen Pelayan dengan Pelayan

Dengan Komponen Pelayan kita boleh berkomunikasi dengan pangkalan data, mengambil sebarang data dan digunakan dalam klien. Kita juga boleh melakukannya dalam aplikasi Next.js, sepadukan mana-mana ORM.
Di bawah ialah contoh mudah penggunaan Komponen Pelayan untuk mengambil data daripada pangkalan data.

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]);
    }
  }
};

Pengikat kemudiannya menggabungkan data, menjadikan Komponen Pelayan dan Komponen Pelanggan dinamik ke dalam satu berkas. Apabila halaman dimuatkan, penyemak imbas tidak melihat komponen Nota dan Pengarang asal; hanya output yang diberikan dihantar kepada klien. Komponen Pelayan boleh dibuat dinamik dengan mengambil semula komponen tersebut daripada pelayan, di mana ia boleh mengakses data dan memaparkan semula.

Kuasa Komponen Async dengan Komponen Pelayan

Komponen Pelayan memperkenalkan cara baharu untuk menulis Komponen menggunakan async/menunggu. Apabila anda menunggu dalam komponen async, React akan menggantung dan menunggu janji diselesaikan sebelum menyambung semula pemaparan. Ini berfungsi merentasi sempadan pelayan/klien dengan sokongan penstriman untuk Suspense.
Contoh Komponen Pelayan:

// 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>);
}

Komen adalah keutamaan yang lebih rendah, jadi kami memulakan janji pada pelayan, dan menunggunya pada klien dengan *gunakan * API. Ini akan Menggantung pada pelanggan, tanpa menyekat kandungan nota daripada dipaparkan.

Dalam bahagian seterusnya, kita akan membincangkan Tindakan dan Arahan Pelayan ("guna klien", "guna pelayan") kuasa, dan mengapa "guna pelayan" tidak mempunyai peranan yang sama seperti "guna klien"?

Jumpa lagi!

Sementara Komponen Pelayan masih dalam fasa percubaan, mereka perlahan-lahan mendapat perhatian untuk potensi mereka untuk menambah baik aplikasi berskala besar. Mereka menghapuskan keperluan untuk JavaScript yang tidak perlu dihantar kepada pelanggan, yang menghasilkan masa pemuatan yang lebih cepat dan pengalaman pengguna yang lebih lancar.