React-SSR

发表于   |   分类于

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
1
2
3
4
5
6
7
// 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);
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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 };
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// 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')
);