How to implement server-side rendering in your React app in three simple steps
React 服务端渲染从入门到精通
什么是服务端渲染
当用户或爬虫程序访问页面 URL 时，将组件或页面通过服务器生成 HTML 字符串，再发送到浏览器，最后将静态标记"混合"为客户端上完全交互的应用程序。服务端渲染只发生在首屏，在客户端处理后面的请求。
服务端渲染和客户端渲染的区别
- 客户端渲染时，浏览器下载一个最小的 HTML 页面，渲染 JavaScript 并填充进去
- 服务端渲染时，在服务端渲染 React 组件，输出 HTML 内容
可以组合使用这 2 种方式创建同构应用
如何在页面中快速判断是否为服务端渲染
- 鼠标右键查看源代码，在页面中看到的内容在源代码中也可以查看到，则是服务端渲染得到的
- 鼠标右键查看源代码，页面中看到的内容在源代码中不可以查看到，则是客户端渲染得到的
在服务端渲染 React 的后果
- 如果应用很小，服务端渲染可以改善性能，但是如果应用很大会降低性能
- 增大了响应时间，如果服务器很忙会更糟糕
- 增大了响应大小，这意味着需要更长的时间来加载页面
- 增大了应用的复杂度
- 在服务端渲染时只会执行到 componentDidMount 之前的生命周期钩子，一些常用的浏览器的 api 可能无法正常使用
什么时候应该使用服务端渲染
- SEO，目前搜索引擎爬虫还不能解析 JavaScript，这是使用服务端渲染最主要的原因，特别是对于着陆页
- 改善性能，在服务端渲染时，应用的性能依赖服务器的资源和用户的网速，这使服务端渲染对于内容密集型网站非常有用；另一个改善是首次用户交互时间，减少白屏等待时间
如何工作
- 首次访问页面时创建一个新的 Redux Store
- 选择性的 dispatch action，服务端渲染时客户端不需要初始化 state 的 action
- 从 Store 中拿到 state 执行 SSR
- 将上一步获取到的 state 一起返回，用这个 state 在客户端初始化 state
// server rendered home page
app.get('/', (req, res) => {
const { preloadedState, content } = ssr(initialState);
const response = template('Server Rendered Page', preloadedState, content);
res.setHeader('Cache-Control', 'assets, max-age=604800');
res.send(response);
});
function ssr(initialState) {
// Configure the store with the initial state provided
const store = configureStore(initialState);
// render the App store static markup ins content variable
let content = renderToString(
<Provider store={store}>
<App />
</Provider>
);
// Get a copy of store data to create the same store on client side
const preloadedState = store.getState();
return { content, preloadedState };
}
function template(title, initialState = {}, content = '') {
// Dynamically ship scripts based on render type
let scripts = '';
if (content) {
// 服务端渲染
scripts = ` <script>
window.__STATE__ = ${JSON.stringify(initialState)}
</script>
<script src="assets/client.js"></script>
`;
} else {
// 客户端渲染
scripts = ` <script src="assets/bundle.js"> </script> `;
}
let page = `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> ${title} </title>
<link href="assets/style.css" rel="stylesheet">
</head>
<body>
<div class="content">
<div id="app" class="wrap-inner">
<!--- magic happens here --> ${content}
</div>
</div>
${scripts}
</body>
`;
return page;
}
// client.js
import React from 'react';
import { hydrate } from 'react-dom';
import { Provider } from 'react-redux';
import configureStore from './redux/configureStore';
import App from './components/app';
// Read the state sent with markup
const state = window.__STATE__;
// delete the state from global window object
delete window.__STATE__;
// reproduce the store used to render the page on server
const store = configureStore(state);
/**
* hydrate the page to make sure both server and client
* side pages are identical. This includes markup checking,
* react comments to identify elements and more.
*/
hydrate(
<Provider store={store}>
<App />
</Provider>,
document.querySelector('#app')
);
网友评论