Memahami Komponen Pelayan React: Panduan Praktikal

Komponen Pelayan React (RSC) sedang merevolusikan cara kami mendekati pemaparan bahagian pelayan dalam aplikasi React. Panduan ini akan membimbing anda tentang sifatnya, faedahnya dan cara melaksanakannya dalam projek anda.

Apakah Komponen Pelayan React?

Komponen Pelayan React ialah jenis komponen baharu yang dijalankan secara eksklusif pada pelayan. Mereka membuat pada pelayan dan menghantar output mereka kepada pelanggan, menggabungkan faedah pemaparan bahagian pelayan dengan interaktiviti React sebelah klien.

Ciri utama:

• Pelaksanaan bahagian pelayan
• Akses terus kepada sumber pelayan
• Tiada peningkatan dalam saiz bundle sebelah pelanggan
• Tidak boleh menyatakan atau menggunakan API pelayar sahaja

Faedah Komponen Pelayan React

1. Peningkatan Prestasi: Pemuatan awal yang lebih pantas dan berkas pelanggan yang lebih kecil.
2. SEO Dipertingkat: Kandungan yang diberikan pelayan lebih mudah diindeks.
3. Pengambilan Data Ringkas: Akses terus kepada sumber data sebelah pelayan.
4. Keselamatan yang Dipertingkat: Operasi sensitif kekal pada pelayan.

Menyediakan Komponen Pelayan React

Sehingga 2024, Komponen Pelayan React paling sesuai digunakan dengan rangka kerja seperti Next.js. Berikut ialah persediaan pantas:

1. Buat projek Next.js baharu:

   npx create-next-app@latest my-rsc-app
   cd my-rsc-app

1. Pilih untuk menggunakan Penghala Apl apabila digesa.

2. Buat Komponen Pelayan dalam app/ServerComponent.tsx:
   

   async function getData() {
     const res = await fetch('https://api.example.com/data')
     return res.json()
   }

   export default async function ServerComponent() {
     const data = await getData()
     return <div>{data.message}</div>
   }

1. Gunakan dalam app/page.tsx:

   import ServerComponent from './ServerComponent'

   export default function Home() {
     return (
       <main>
         <h1>Welcome to React Server Components</h1>
         <ServerComponent />
       </main>
     )
   }

1. Jalankan aplikasi anda:

   npm run dev

Melaksanakan Komponen Pelayan React

Mari kita buat contoh yang lebih kompleks - senarai catatan blog yang mengambil data daripada CMS:

// app/BlogList.tsx
import { getBlogPosts } from '../lib/cms'

export default async function BlogList() {
  const posts = await getBlogPosts()

  return (
    <ul>
      {posts.map(post => (
        <li key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.excerpt}</p>
        </li>
      ))}
    </ul>
  )
}

// app/page.tsx
import BlogList from './BlogList'

export default function Home() {
  return (
    <main>
      <h1>Our Blog</h1>
      <BlogList />
    </main>
  )
}

Dalam contoh ini, BlogList mengambil data terus daripada CMS pada pelayan, meningkatkan prestasi dan memudahkan kod pihak pelanggan.

Corak Lanjutan

1. Mencampurkan Komponen Pelayan dan Pelanggan

// ClientComponent.tsx
'use client'

import { useState } from 'react'

export default function LikeButton() {
  const [likes, setLikes] = useState(0)
  return <button onClick={() => setLikes(likes + 1)}>Likes: {likes}</button>
}

// ServerComponent.tsx
import LikeButton from './ClientComponent'

export default function BlogPost({ content }) {
  return (
    <article>
      <p>{content}</p>
      <LikeButton />
    </article>
  )
}

2. Penstriman untuk UX yang Diperbaiki

import { Suspense } from 'react'
import BlogList from './BlogList'

export default function Home() {
  return (
    <main>
      <h1>Our Blog</h1>
      <Suspense fallback={<p>Loading posts...</p>}>
        <BlogList />
      </Suspense>
    </main>
  )
}

3. Pengendalian Ralat

'use client'

export default function ErrorBoundary({ error, reset }) {
  return (
    <div>
      <h2>Something went wrong!</h2>
      <button onClick={reset}>Try again</button>
    </div>
  )
}

// In your page file
import ErrorBoundary from './ErrorBoundary'

export default function Page() {
  return (
    <ErrorBoundary>
      <BlogList />
    </ErrorBoundary>
  )
}

Kesimpulan

Komponen Pelayan React menawarkan pendekatan yang hebat untuk membina aplikasi web yang berprestasi, mesra SEO dan selamat. Ia mewakili hala tuju yang menarik untuk pembangunan React, membolehkan pengambilan dan pemaparan data sebelah pelayan sambil mengekalkan interaktiviti React sebelah pelanggan.

Sambil anda meneroka Komponen Pelayan, ingat ia bukan pengganti untuk React pihak pelanggan, tetapi teknologi pelengkap. Gunakannya di tempat yang sesuai dalam seni bina aplikasi anda.

Kami menggalakkan anda untuk bereksperimen dengan Komponen Pelayan dalam projek anda dan nantikan perkembangan selanjutnya dalam ruang yang menarik ini!

Atas ialah kandungan terperinci Memahami Komponen Pelayan React: Panduan Praktikal. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!