Đây là 2 cách riêng biệt để xây dựng ứng dụng hay chúng có thể được sử dụng cùng nhau?
Chúng có thể được sử dụng cùng nhau.
Nếu chúng ta có thể sử dụng nó cùng nhau, làm thế nào để làm điều đó - chúng ta có cần sao chép các phần tử giống nhau ở phía máy chủ và phía máy khách không? Hoặc, chúng ta có thể chỉ xây dựng các phần tĩnh của ứng dụng của chúng ta trên máy chủ và các phần động ở phía máy khách, mà không có bất kỳ kết nối nào với phía máy chủ đã được kết xuất trước không?
Tốt hơn hết bạn nên có cùng một bố cục được kết xuất để tránh thao tác chỉnh lại và sơn lại, ít nhấp nháy / nhấp nháy hơn, trang của bạn sẽ mượt mà hơn. Tuy nhiên, nó không phải là một hạn chế. Bạn rất có thể lưu cache SSR html (một cái gì đó Electrode làm để giảm thời gian phản hồi) / gửi một html tĩnh bị ghi đè bởi CSR (kết xuất phía máy khách).
Nếu bạn chỉ mới bắt đầu với SSR, tôi khuyên bạn nên bắt đầu đơn giản, SSR có thể rất phức tạp rất nhanh. Để xây dựng html trên máy chủ có nghĩa là mất quyền truy cập vào các đối tượng như cửa sổ, tài liệu (bạn có những thứ này trên máy khách), mất khả năng kết hợp các hoạt động không đồng bộ (ngoài hộp) và nói chung là rất nhiều chỉnh sửa mã để mã của bạn tương thích với SSR ( vì bạn sẽ phải sử dụng webpack để đóng gói pack.js của mình). Những thứ như nhập CSS, yêu cầu và nhập đột nhiên bắt đầu cắn bạn (đây không phải là trường hợp trong ứng dụng React mặc định không có webpack).
Mô hình chung của SSR trông như thế này. Máy chủ Express phục vụ các yêu cầu:
const app = Express();
const port = 8092;
// This is fired every time the server side receives a request
app.use(handleRender);
function handleRender(req, res) {
const fullUrl = req.protocol + '://' + req.get('host') + req.originalUrl;
console.log('fullUrl: ', fullUrl);
console.log('req.url: ', req.url);
// Create a new Redux store instance
const store = createStore(reducerFn);
const urlToRender = req.url;
// Render the component to a string
const html = renderToString(
<Provider store={store}>
<StaticRouter location={urlToRender} context={{}}>
{routes}
</StaticRouter>
</Provider>
);
const helmet = Helmet.renderStatic();
// Grab the initial state from our Redux store
const preloadedState = store.getState();
// Send the rendered page back to the client
res.send(renderFullPage(helmet, html, preloadedState));
}
Đề xuất của tôi cho những người bắt đầu với SSR sẽ là cung cấp html tĩnh. Bạn có thể lấy html tĩnh bằng cách chạy ứng dụng CSR SPA:
document.getElementById('root').innerHTML
Đừng quên, lý do duy nhất để sử dụng SSR phải là:
- SEO
- Tải nhanh hơn (tôi sẽ giảm giá này)
Hack: https://medium.com/@gagan_goku/react-and-server-side-rendering-ssr-444d8c48abfc
