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.
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:
Penstriman merapatkan jurang antara SSR tradisional dan interaktiviti sisi pelanggan moden, memastikan pengguna melihat kandungan yang bermakna dengan lebih pantas tanpa menjejaskan prestasi.
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.
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.
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)
}
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
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
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.
// ./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)
}
// ./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)
}
})
}
// ./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)
}
})
}
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:
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
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.
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)
}
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
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
Kemas kini pengisytiharan jenis global untuk memasukkan kunci __INITIAL_DATA__ dan strukturnya.
// ./server/constants.ts export const ABORT_DELAY = 5000
// ./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)
}
// ./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.
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.
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.
Untuk menyelesaikan ralat, hantar initialData kepada komponen Apl melalui titik masuk pelayan.
// ./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
// ./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
// ./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.
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.
Ini adalah sebahagian daripada siri saya tentang SSR dengan React. Nantikan lebih banyak artikel!
Saya sentiasa terbuka untuk maklum balas, kerjasama atau membincangkan idea teknologi — jangan ragu untuk menghubungi kami!
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!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
