Kết xuất phía máy chủ với React

Kết xuất phía máy chủ là gì? Làm thế nào để làm điều đó với React?

Kết xuất phía máy chủ, còn được gọi làSSR, là khả năng của một ứng dụng JavaScript hiển thị trên máy chủ chứ không phải trong trình duyệt.

Tại sao chúng ta lại muốn làm như vậy?

nó cho phép trang web của bạn có thời gian tải trang đầu tiên nhanh hơn, đây là chìa khóa cho trải nghiệm người dùng tốt
điều cần thiết cho SEO: các công cụ tìm kiếm không thể (chưa?) lập chỉ mục các ứng dụng độc quyền hiển thị phía máy khách một cách hiệu quả và chính xác. Mặc dù có những cải tiến mới nhất đối với việc lập chỉ mục trong Google, nhưng cũng có những công cụ tìm kiếm khác và Google không hoàn hảo trong mọi trường hợp. Ngoài ra, Google ưu tiên các trang web có thời gian tải nhanh và việc phải tải phía máy khách sẽ không tốt cho tốc độ
thật tuyệt khi mọi người chia sẻ một trang của trang web của bạn trên phương tiện truyền thông xã hội, vì họ có thể dễ dàng thu thập siêu dữ liệu cần thiết để chia sẻ liên kết một cách độc đáo (hình ảnh, tiêu đề, mô tả ..)

Nếu không có Kết xuất Phía Máy chủ, tất cả các máy chủ của bạn đều là một trang HTML không có nội dung, chỉ là một số thẻ tập lệnh sau đó được trình duyệt sử dụng để hiển thị ứng dụng.

Ứng dụng do khách hàng hiển thị rất tuyệt vời trong bất kỳ tương tác tiếp theo của người dùng sau khi tải trang đầu tiên. Kết xuất phía máy chủ cho phép chúng tôi có được vị trí thú vị ở giữa ứng dụng do máy khách kết xuất và ứng dụng được kết xuất phụ trợ: trang được tạo phía máy chủ, nhưng tất cả các tương tác với trang sau khi được tải đều được xử lý ở phía máy khách.

Tuy nhiên, kết xuất phía máy chủ cũng có nhược điểm của nó:

Công bằng mà nói, một khái niệm bằng chứng SSR đơn giản là đơn giản, nhưng mức độ phức tạp của SSR có thể tăng lên cùng với sự phức tạp của ứng dụng của bạn
hiển thị một ứng dụng lớn phía máy chủ có thể khá tốn tài nguyên và khi tải nặng, nó thậm chí có thể cung cấp trải nghiệm chậm hơn so với hiển thị phía máy khách, vì bạn có một nút cổ chai

Một ví dụ rất đơn giản về những gì nó cần để Server-Side hiển thị một ứng dụng React

Các thiết lập SSR có thể phát triển rất, rất phức tạp và hầu hết các hướng dẫn sẽ hoàn thànhRedux,Bộ định tuyến Reactvà nhiều khái niệm khác ngay từ đầu.

Để hiểu cách hoạt động của SSR, hãy bắt đầu từ những điều cơ bản để triển khai một khái niệm bằng chứng.

Vui lòng bỏ qua đoạn này nếu bạn chỉ muốn xem xét các thư viện cung cấp SSR và không bận tâm đến công việc trên mặt đất

Để triển khai SSR cơ bản, chúng tôi sẽ sử dụng Express.

Nếu bạn chưa quen với Express hoặc cần cập nhật thông tin, hãy xem Cẩm nang cấp tốc miễn phí của tôi tại đây:https://flaviocopes.com/page/ebooks/.

Cảnh báo: mức độ phức tạp của SSR có thể tăng lên cùng với sự phức tạp của ứng dụng của bạn. Đây là thiết lập tối thiểu để hiển thị một ứng dụng React cơ bản. Đối với những nhu cầu phức tạp hơn, bạn có thể cần phải làm nhiều việc hơn một chút hoặc cũng có thể kiểm tra các thư viện SSR cho React.

Tôi cho rằng bạn đã bắt đầu một ứng dụng React vớicreate-react-app. Nếu bạn chỉ đang thử, hãy cài đặt ngay bây giờ bằng cách sử dụngnpx create-react-app ssr.

Đi tới thư mục ứng dụng chính với thiết bị đầu cuối, sau đó chạy:

npm install express

Bạn có một tập hợp các thư mục trong thư mục ứng dụng của mình. Tạo một thư mục mới có tênserver, sau đó vào đó và tạo một tệp có tênserver.js.

Theo dõicreate-react-appquy ước, ứng dụng sống trongsrc/App.jstập tin. Chúng tôi sẽ tải thành phần đó và hiển thị nó thành một chuỗi bằng cách sử dụngReactDOMServer.renderToString (), được cung cấp bởireact-dom.

Bạn nhận được nội dung của./build/index.htmlvà thay thế<div id="root"></div>trình giữ chỗ, là thẻ nơi ứng dụng kết nối theo mặc định, với `<div id="root">\${ReactDOMServer.renderToString(<App />)}</div>.

Tất cả nội dung bên trongbuildthư mục sẽ được cung cấp nguyên trạng, tĩnh bởi Express.

import path from 'path'
import fs from 'fs'
import express from ‘express’
import React from ‘react’
import ReactDOMServer from ‘react-dom/server’
import App from ‘…/src/App’
const PORT = 8080
const app = express()
const router = express.Router()
const serverRenderer = (req, res, next) => {
fs.readFile(path.resolve(’./build/index.html’), ‘utf8’, (err, data) => {
if (err) {
console.error(err)
return res.status(500).send(‘An error occurred’)
}
return res.send(
data.replace(
‘<div id=“root”></div>’,
&lt;div id="root"&gt;</span><span style="color:#e6db74">${</span><span style="color:#a6e22e">ReactDOMServer</span>.<span style="color:#a6e22e">renderToString</span>(<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">App</span> <span style="color:#f92672">/&gt;</span>)<span style="color:#e6db74">}</span><span style="color:#e6db74">&lt;/div&gt;
)
)
})
}
router.use(’^/$’, serverRenderer)
router.use(
express.static(path.resolve(__dirname, ‘…’, ‘build’), { maxAge: ‘30d’ })
)
// tell the app to use the above rules
app.use(router)
// app.use(express.static(’./build’))
app.listen(PORT, () => {
console.log(SSR running on port </span><span style="color:#e6db74">${</span><span style="color:#a6e22e">PORT</span><span style="color:#e6db74">}</span><span style="color:#e6db74">)
})

Bây giờ, trong ứng dụng khách, trongsrc/index.js, thay vì gọiReactDOM.render():

ReactDOM.render(<App />, document.getElementById('root'))

gọiReactDOM.hydrate(), tương tự nhưng có thêm khả năng gắn trình nghe sự kiện vào đánh dấu hiện có sau khi React tải:

ReactDOM.hydrate(<App />, document.getElementById('root'))

Tất cả mã Node.js cần được chuyển bằngBabel, vì mã Node.js phía máy chủ không biết gì về JSX, cũng như Mô-đun ES (chúng tôi sử dụng choincludecác câu lệnh).

Cài đặt 4 gói này:

npm install @babel/register @babel/preset-env @babel/preset-react ignore-styles

ignore-styleslà một tiện ích Babel sẽ yêu cầu nó bỏ qua các tệp CSS được nhập bằng cách sử dụngimportcú pháp.

Hãy tạo một điểm vàoserver/index.js:

require('ignore-styles')
require(’@babel/register’)({
ignore: [/(node_modules)/],
presets: [’@babel/preset-env’, ‘@babel/preset-react’]
})
require(’./server’)

Xây dựng ứng dụng React, để xây dựng / thư mục được điền:

npm run build

và hãy chạy cái này:

node server/index.js

Tôi đã nói đây là một cách tiếp cận đơn giản và nó là:

nó không xử lý hình ảnh kết xuất một cách chính xác khi sử dụng nhập, vốn cần có Webpack để hoạt động (và điều này làm phức tạp quá trình rất nhiều)
nó không xử lý siêu dữ liệu tiêu đề trang, điều này cần thiết cho các mục đích SEO và chia sẻ xã hội (trong số những thứ khác)

Vì vậy, trong khi đây là một ví dụ điển hình về việc sử dụngReactDOMServer.renderToString()vàReactDOM.hydrateđể có được kết xuất phía máy chủ cơ bản này, nó không đủ để sử dụng trong thế giới thực.

Kết xuất phía máy chủ sử dụng thư viện

SSR rất khó thực hiện đúng và React không có cách thực tế nào để thực hiện nó.

Vẫn còn rất nhiều tranh cãi nếu nó đáng gặp rắc rối, phức tạp và chi phí để có được những lợi ích, hơn là sử dụng một công nghệ khác để phục vụ các trang đó.Cuộc thảo luận này trên Redditcó rất nhiều ý kiến về vấn đề đó.

Khi kết xuất phía máy chủ là một vấn đề quan trọng, đề xuất của tôi là dựa vào các thư viện và công cụ được tạo sẵn đã có mục tiêu này ngay từ đầu.

Đặc biệt, tôi đề nghịNext.jsvàGatsby.

Tải xuống miễn phí của tôiSổ tay React

Kết xuất phía máy chủ với React

Kết xuất phía máy chủ là gì? Làm thế nào để làm điều đó với React?

Một ví dụ rất đơn giản về những gì nó cần để Server-Side hiển thị một ứng dụng React

Kết xuất phía máy chủ sử dụng thư viện

Các hướng dẫn về phản ứng khác: