Teknik SSR React Lanjutan dengan Penstriman dan Data Dinamik

Apabila aplikasi anda berkembang, cabaran juga akan bertambah. Untuk kekal di hadapan, menguasai teknik SSR lanjutan adalah penting untuk menyampaikan pengalaman pengguna yang lancar dan berprestasi tinggi.

Setelah membina asas untuk pemaparan sebelah pelayan dalam projek React dalam artikel sebelumnya, saya teruja untuk berkongsi ciri yang boleh membantu anda mengekalkan kebolehskalaan projek, memuatkan data daripada pelayan kepada pelanggan dengan cekap dan menyelesaikan isu penghidratan.

Jadual Kandungan

• Apakah itu Penstriman dalam SSR
• Lazy Loading dan SSR
• Melaksanakan Penstriman dengan Lazy Loading
  • Mengemas kini Komponen Reaksi
  • Mengemas kini Pelayan untuk Penstriman
• Data Pelayan-kepada-Pelanggan
  • Melalukan Data pada Pelayan
  • Kendalikan Pembolehubah Persekitaran pada Pelanggan
• Isu Penghidratan
  • Contoh Senario
  • Memperbaiki Isu Penghidratan
• Kesimpulan

Apakah itu Penstriman dalam SSR

Penstriman dalam pemaparan sisi pelayan (SSR) ialah teknik di mana pelayan menghantar bahagian halaman HTML kepada penyemak imbas dalam ketulan semasa ia dijana, dan bukannya menunggu seluruh halaman siap sebelum menyampaikannya. Ini membolehkan penyemak imbas mula memaparkan kandungan serta-merta, meningkatkan masa muat dan prestasi pengguna.

Penstriman amat berkesan untuk:

• Halaman Besar: Di mana penjanaan keseluruhan HTML boleh mengambil masa yang ketara.
• Kandungan Dinamik: Apabila bahagian halaman bergantung pada panggilan API luaran atau bahagian yang dijana secara dinamik.
• Aplikasi Trafik Tinggi: Untuk mengurangkan beban pelayan dan kependaman semasa penggunaan puncak.

Penstriman merapatkan jurang antara SSR tradisional dan interaktiviti sisi pelanggan moden, memastikan pengguna melihat kandungan yang bermakna dengan lebih pantas tanpa menjejaskan prestasi.

Lazy Loading dan SSR

Pemuatan malas ialah teknik yang menangguhkan pemuatan komponen atau modul sehingga ia benar-benar diperlukan, mengurangkan masa pemuatan awal dan meningkatkan prestasi. Apabila digabungkan dengan SSR, pemuatan malas boleh mengoptimumkan kedua-dua beban kerja pelayan dan pelanggan dengan ketara.

Lazy loading bergantung pada React.lazy, yang mengimport komponen secara dinamik sebagai Promises. Dalam SSR tradisional, perenderan adalah segerak, bermakna pelayan mesti menyelesaikan semua Promises sebelum menjana dan menghantar HTML lengkap ke penyemak imbas.

Penstriman menyelesaikan cabaran ini dengan membenarkan pelayan menghantar HTML dalam ketulan semasa komponen dipaparkan. Pendekatan ini membolehkan sandaran Suspense dihantar ke penyemak imbas dengan segera, memastikan pengguna melihat kandungan yang bermakna lebih awal. Memandangkan komponen yang dimuatkan malas diselesaikan, HTML yang dihasilkan distrim secara berperingkat ke penyemak imbas, menggantikan kandungan sandaran dengan lancar. Ini mengelakkan daripada menyekat proses pemaparan, mengurangkan kelewatan dan menambah baik masa pemuatan yang dirasakan.

Melaksanakan Penstriman dengan Lazy Loading

Panduan ini dibina berdasarkan konsep yang diperkenalkan dalam artikel sebelumnya, Membina Aplikasi Reaksi SSR Sedia Pengeluaran, yang boleh anda temui dipautkan di bahagian bawah. Untuk mendayakan SSR dengan React dan menyokong komponen yang dimuatkan secara malas, kami akan membuat beberapa kemas kini pada kedua-dua komponen React dan pelayan.

Mengemas kini Komponen React

Titik Masuk Pelayan

Kaedah renderToString React biasanya digunakan untuk SSR, tetapi ia menunggu sehingga keseluruhan kandungan HTML sedia sebelum menghantarnya ke penyemak imbas. Dengan bertukar kepada renderToPipeableStream, kami boleh mendayakan penstriman, yang menghantar bahagian HTML semasa ia dijana.

// ./src/entry-server.tsx
import { renderToPipeableStream, RenderToPipeableStreamOptions } from 'react-dom/server'
import App from './App'

export function render(options?: RenderToPipeableStreamOptions) {
  return renderToPipeableStream(<App />, options)
}

Mencipta Komponen Lazy-Loaded

Dalam contoh ini, kami akan mencipta komponen Kad ringkas untuk menunjukkan konsep tersebut. Dalam aplikasi pengeluaran, teknik ini biasanya digunakan dengan modul yang lebih besar atau keseluruhan halaman untuk mengoptimumkan prestasi.

// ./src/Card.tsx
import { useState } from 'react'

function Card() {
  const [count, setCount] = useState(0)

  return (
    <div className="card">
      <button onClick={() => setCount((count) => count + 1)}>
        count is {count}
      </button>
      <p>
        Edit <code>src/App.tsx</code> and save to test HMR
      </p>
    </div>
  )
}

export default Card

Menggunakan Komponen Lazy-Loaded dalam Apl

Untuk menggunakan komponen yang dimuatkan malas, importnya secara dinamik menggunakan React.lazy dan bungkusnya dengan Suspense untuk menyediakan UI sandaran semasa memuatkan

// ./src/App.tsx
import { lazy, Suspense } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'

const Card = lazy(() => import('./Card'))

function App() {
  return (
    <>
      <div>
        <a href="https://vite.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>
      <Suspense fallback='Loading...'>
        <Card />
      </Suspense>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </>
  )
}

export default App

Mengemas kini Pelayan untuk Penstriman

Untuk mendayakan penstriman, kedua-dua persediaan pembangunan dan pengeluaran perlu menyokong proses pemaparan HTML yang konsisten. Memandangkan prosesnya adalah sama untuk kedua-dua persekitaran, anda boleh mencipta satu fungsi boleh guna semula untuk mengendalikan kandungan penstriman dengan berkesan.

Mencipta Fungsi Kandungan Strim

// ./server/constants.ts
export const ABORT_DELAY = 5000

Fungsi streamContent memulakan proses pemaparan, menulis potongan tambahan HTML kepada respons dan memastikan pengendalian ralat yang betul.

// ./server/streamContent.ts
import { Transform } from 'node:stream'
import { Request, Response, NextFunction } from 'express'
import { ABORT_DELAY, HTML_KEY } from './constants'
import type { render } from '../src/entry-server'

export type StreamContentArgs = {
  render: typeof render
  html: string
  req: Request
  res: Response
  next: NextFunction
}

export function streamContent({ render, html, res }: StreamContentArgs) {
  let renderFailed = false

  // Initiates the streaming process by calling the render function
  const { pipe, abort } = render({
    // Handles errors that occur before the shell is ready
    onShellError() {
      res.status(500).set({ 'Content-Type': 'text/html' }).send('<pre class="brush:php;toolbar:false">Something went wrong

') }, // Called when the shell (initial HTML) is ready for streaming onShellReady() { res.status(renderFailed ? 500 : 200).set({ 'Content-Type': 'text/html' }) // Split the HTML into two parts using the placeholder const [htmlStart, htmlEnd] = html.split(HTML_KEY) // Write the starting part of the HTML to the response res.write(htmlStart) // Create a transform stream to handle the chunks of HTML from the renderer const transformStream = new Transform({ transform(chunk, encoding, callback) { // Write each chunk to the response res.write(chunk, encoding) callback() }, }) // When the streaming is finished, write the closing part of the HTML transformStream.on('finish', () => { res.end(htmlEnd) }) // Pipe the render output through the transform stream pipe(transformStream) }, onError(error) { // Logs errors encountered during rendering renderFailed = true console.error((error as Error).stack) }, }) // Abort the rendering process after a delay to avoid hanging requests setTimeout(abort, ABORT_DELAY) }

Mengemas kini Konfigurasi Pembangunan

// ./server/dev.ts
import { Application } from 'express'
import fs from 'fs'
import path from 'path'
import { StreamContentArgs } from './streamContent'

const HTML_PATH = path.resolve(process.cwd(), 'index.html')
const ENTRY_SERVER_PATH = path.resolve(process.cwd(), 'src/entry-server.tsx')

// Add to args the streamContent callback
export async function setupDev(app: Application, streamContent: (args: StreamContentArgs) => void) {
  const vite = await (
    await import('vite')
  ).createServer({
    root: process.cwd(),
    server: { middlewareMode: true },
    appType: 'custom',
  })

  app.use(vite.middlewares)

  app.get('*', async (req, res, next) => {
    try {
      let html = fs.readFileSync(HTML_PATH, 'utf-8')
      html = await vite.transformIndexHtml(req.originalUrl, html)

      const { render } = await vite.ssrLoadModule(ENTRY_SERVER_PATH)

      // Use the same callback for production and development process
      streamContent({ render, html, req, res, next })
    } catch (e) {
      vite.ssrFixStacktrace(e as Error)
      console.error((e as Error).stack)
      next(e)
    }
  })
}

Mengemas kini Konfigurasi Pengeluaran

// ./server/prod.ts
import { Application } from 'express'
import fs from 'fs'
import path from 'path'
import compression from 'compression'
import sirv from 'sirv'
import { StreamContentArgs } from './streamContent'

const CLIENT_PATH = path.resolve(process.cwd(), 'dist/client')
const HTML_PATH = path.resolve(process.cwd(), 'dist/client/index.html')
const ENTRY_SERVER_PATH = path.resolve(process.cwd(), 'dist/ssr/entry-server.js')

// Add to Args the streamContent callback
export async function setupProd(app: Application, streamContent: (args: StreamContentArgs) => void) {
  app.use(compression())
  app.use(sirv(CLIENT_PATH, { extensions: [] }))

  app.get('*', async (req, res, next) => {
    try {
      const html = fs.readFileSync(HTML_PATH, 'utf-8')

      const { render } = await import(ENTRY_SERVER_PATH)

      // Use the same callback for production and development process
      streamContent({ render, html, req, res, next })
    } catch (e) {
      console.error((e as Error).stack)
      next(e)
    }
  })
}

Mengemas kini Pelayan Ekspres

Lepaskan fungsi streamContent ke setiap konfigurasi:

// ./server/app.ts
import express from 'express'
import { PROD, APP_PORT } from './constants'
import { setupProd } from './prod'
import { setupDev } from './dev'
import { streamContent } from './streamContent'

export async function createServer() {
  const app = express()

  if (PROD) {
    await setupProd(app, streamContent)
  } else {
    await setupDev(app, streamContent)
  }

  app.listen(APP_PORT, () => {
    console.log(`http://localhost:${APP_PORT}`)
  })
}

createServer()

Selepas melaksanakan perubahan ini, pelayan anda akan:

• Strim HTML ke penyemak imbas secara berperingkat, mengurangkan masa untuk melukis pertama.
• Kendalikan komponen yang dimuatkan malas dengan lancar, meningkatkan prestasi dan pengalaman pengguna.

Data Pelayan-kepada-Pelanggan

Sebelum menghantar HTML kepada pelanggan, anda mempunyai kawalan penuh ke atas HTML yang dijana pelayan. Ini membolehkan anda mengubah suai struktur secara dinamik dengan menambahkan teg, gaya, pautan atau mana-mana elemen lain mengikut keperluan.

Satu teknik yang sangat berkesan ialah menyuntik tag ke dalam HTML. Pendekatan ini membolehkan anda menghantar data dinamik terus kepada pelanggan.

Dalam contoh ini, kami akan menumpukan pada menghantar pembolehubah persekitaran, tetapi anda boleh menghantar sebarang objek JavaScript yang anda perlukan. Dengan menghantar pembolehubah persekitaran kepada klien, anda mengelak daripada membina semula keseluruhan aplikasi apabila pembolehubah tersebut berubah. Dalam contoh repositori yang dipautkan di bahagian bawah, anda juga boleh melihat cara data profil dihantar secara dinamik.

Menghantar Data pada Pelayan

Tentukan API_URL

Tetapkan pembolehubah persekitaran API_URL pada pelayan. Secara lalai, ini akan menunjuk kepada jsonplaceholder. __INITIAL_DATA__ akan bertindak sebagai kunci untuk menyimpan data pada objek tetingkap global.

// ./src/entry-server.tsx
import { renderToPipeableStream, RenderToPipeableStreamOptions } from 'react-dom/server'
import App from './App'

export function render(options?: RenderToPipeableStreamOptions) {
  return renderToPipeableStream(<App />, options)
}

Suntikan Data Awal ke dalam HTML

Buat fungsi utiliti untuk menyuntik data awal ke dalam rentetan HTML sebelum menghantarnya kepada klien. Data ini akan termasuk pembolehubah persekitaran seperti API_URL.

// ./src/Card.tsx
import { useState } from 'react'

function Card() {
  const [count, setCount] = useState(0)

  return (
    <div className="card">
      <button onClick={() => setCount((count) => count + 1)}>
        count is {count}
      </button>
      <p>
        Edit <code>src/App.tsx</code> and save to test HMR
      </p>
    </div>
  )
}

export default Card

Kemas kini streamContent

Gunakan fungsi applyInitialData untuk menyuntik data awal ke dalam HTML dan menghantarnya kepada klien.

// ./src/App.tsx
import { lazy, Suspense } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'

const Card = lazy(() => import('./Card'))

function App() {
  return (
    <>
      <div>
        <a href="https://vite.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>
      <Suspense fallback='Loading...'>
        <Card />
      </Suspense>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </>
  )
}

export default App

Mengendalikan Pembolehubah Persekitaran pada Pelanggan

Panjangkan Jenis tetingkap Global

Kemas kini pengisytiharan jenis global untuk memasukkan kunci __INITIAL_DATA__ dan strukturnya.

// ./server/constants.ts
export const ABORT_DELAY = 5000

Akses API_URL daripada Objek Tetingkap

// ./server/streamContent.ts
import { Transform } from 'node:stream'
import { Request, Response, NextFunction } from 'express'
import { ABORT_DELAY, HTML_KEY } from './constants'
import type { render } from '../src/entry-server'

export type StreamContentArgs = {
  render: typeof render
  html: string
  req: Request
  res: Response
  next: NextFunction
}

export function streamContent({ render, html, res }: StreamContentArgs) {
  let renderFailed = false

  // Initiates the streaming process by calling the render function
  const { pipe, abort } = render({
    // Handles errors that occur before the shell is ready
    onShellError() {
      res.status(500).set({ 'Content-Type': 'text/html' }).send('<pre class="brush:php;toolbar:false">Something went wrong

') }, // Called when the shell (initial HTML) is ready for streaming onShellReady() { res.status(renderFailed ? 500 : 200).set({ 'Content-Type': 'text/html' }) // Split the HTML into two parts using the placeholder const [htmlStart, htmlEnd] = html.split(HTML_KEY) // Write the starting part of the HTML to the response res.write(htmlStart) // Create a transform stream to handle the chunks of HTML from the renderer const transformStream = new Transform({ transform(chunk, encoding, callback) { // Write each chunk to the response res.write(chunk, encoding) callback() }, }) // When the streaming is finished, write the closing part of the HTML transformStream.on('finish', () => { res.end(htmlEnd) }) // Pipe the render output through the transform stream pipe(transformStream) }, onError(error) { // Logs errors encountered during rendering renderFailed = true console.error((error as Error).stack) }, }) // Abort the rendering process after a delay to avoid hanging requests setTimeout(abort, ABORT_DELAY) }

Buat Permintaan Menggunakan API_URL Dinamik

// ./server/dev.ts
import { Application } from 'express'
import fs from 'fs'
import path from 'path'
import { StreamContentArgs } from './streamContent'

const HTML_PATH = path.resolve(process.cwd(), 'index.html')
const ENTRY_SERVER_PATH = path.resolve(process.cwd(), 'src/entry-server.tsx')

// Add to args the streamContent callback
export async function setupDev(app: Application, streamContent: (args: StreamContentArgs) => void) {
  const vite = await (
    await import('vite')
  ).createServer({
    root: process.cwd(),
    server: { middlewareMode: true },
    appType: 'custom',
  })

  app.use(vite.middlewares)

  app.get('*', async (req, res, next) => {
    try {
      let html = fs.readFileSync(HTML_PATH, 'utf-8')
      html = await vite.transformIndexHtml(req.originalUrl, html)

      const { render } = await vite.ssrLoadModule(ENTRY_SERVER_PATH)

      // Use the same callback for production and development process
      streamContent({ render, html, req, res, next })
    } catch (e) {
      vite.ssrFixStacktrace(e as Error)
      console.error((e as Error).stack)
      next(e)
    }
  })
}

Kini anda mempunyai pembolehubah persekitaran dinamik yang tersedia dalam kod sisi klien anda, membolehkan anda mengurus data pelayan ke pelanggan tanpa perlu membina semula berkas JavaScript. Pendekatan ini memudahkan konfigurasi dan menjadikan apl anda lebih fleksibel dan berskala.

Isu Penghidratan

Sekarang anda boleh menghantar data daripada pelayan kepada pelanggan, anda mungkin menghadapi masalah penghidratan jika anda cuba menggunakan data ini terus di dalam komponen. Ralat ini berlaku kerana HTML yang diberikan pelayan tidak sepadan dengan pemaparan React awal pada klien.

Contoh Senario

Pertimbangkan untuk menggunakan API_URL sebagai rentetan ringkas dalam komponen anda

// ./src/entry-server.tsx
import { renderToPipeableStream, RenderToPipeableStreamOptions } from 'react-dom/server'
import App from './App'

export function render(options?: RenderToPipeableStreamOptions) {
  return renderToPipeableStream(<App />, options)
}

Dalam kes ini, pelayan akan menjadikan komponen dengan API_URL sebagai rentetan kosong, tetapi pada klien, API_URL sudah pun mempunyai nilai daripada objek tetingkap. Ketidakpadanan ini menyebabkan ralat penghidratan kerana React mengesan perbezaan antara HTML yang diberikan pelayan dan pepohon React klien.

Walaupun pengguna boleh melihat kemas kini kandungan dengan cepat, React merekodkan amaran penghidratan dalam konsol. Untuk menyelesaikan isu ini, anda perlu memastikan pelayan dan klien memaparkan HTML awal yang sama atau menghantar API_URL secara eksplisit ke titik masuk pelayan.

Memperbaiki Isu Penghidratan

Untuk menyelesaikan ralat, hantar initialData kepada komponen Apl melalui titik masuk pelayan.

Kemas kini streamContent

// ./src/Card.tsx
import { useState } from 'react'

function Card() {
  const [count, setCount] = useState(0)

  return (
    <div className="card">
      <button onClick={() => setCount((count) => count + 1)}>
        count is {count}
      </button>
      <p>
        Edit <code>src/App.tsx</code> and save to test HMR
      </p>
    </div>
  )
}

export default Card

Mengendalikan Data dalam Fungsi render

// ./src/App.tsx
import { lazy, Suspense } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'

const Card = lazy(() => import('./Card'))

function App() {
  return (
    <>
      <div>
        <a href="https://vite.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>
      <Suspense fallback='Loading...'>
        <Card />
      </Suspense>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </>
  )
}

export default App

Gunakan initialData dalam Komponen Apl

// ./server/constants.ts
export const ABORT_DELAY = 5000

Kini, HTML yang diberikan pelayan anda akan sepadan dengan pemaparan React awal pada klien, menghapuskan ralat penghidratan. React akan mendamaikan pokok pelayan dan pelanggan dengan betul, memastikan pengalaman yang lancar.

Untuk data dinamik seperti API_URL, pertimbangkan untuk menggunakan React Context untuk mengurus dan menghantar nilai lalai antara pelayan dan klien. Pendekatan ini memudahkan pengurusan data yang dikongsi merentas komponen. Anda boleh menemui contoh pelaksanaan dalam repositori terpaut di bahagian bawah.

Kesimpulan

Dalam artikel ini, kami meneroka teknik SSR lanjutan untuk React, memfokuskan pada melaksanakan penstriman, mengurus data pelayan ke pelanggan dan menyelesaikan isu penghidratan. Kaedah ini memastikan aplikasi anda berskala, berprestasi tinggi dan mencipta pengalaman pengguna yang lancar.

Terokai Kod

• Contoh: react-ssr-advanced-example
• Templat: react-ssr-streaming-template
• Templat Tambahan Vite: template-ssr-react-streaming-ts

Artikel Berkaitan

Ini adalah sebahagian daripada siri saya tentang SSR dengan React. Nantikan lebih banyak artikel!

• Membina Aplikasi SSR React Sedia Pengeluaran
• Teknik SSR React Terperinci dengan Penstriman dan Data Dinamik (Anda di sini)
• Menyediakan Tema dalam Aplikasi SSR React (Akan datang)

Kekal Terhubung

Saya sentiasa terbuka untuk maklum balas, kerjasama atau membincangkan idea teknologi — jangan ragu untuk menghubungi kami!

• Portfolio: maxh1t.xyz
• E-mel: m4xh17@gmail.com

Atas ialah kandungan terperinci Teknik SSR React Lanjutan dengan Penstriman dan Data Dinamik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!