[译] 使用 styled-components 的 React 服务端渲染极简指南

原文地址：The simple guide to server-side rendering React with styled-components

原文作者：Dennis Brotzky

译文出自：掘金翻译计划

本文永久链接：github.com/xitu/gold-m…

译者：Elliott Zhao

校对者：hannah lance10030

本指南旨在分享服务端渲染的 React App 中使用 style-components 的核心原则。当你意识到把 styled-components 集成到你的程序中是多么的完美，它的美才真正凸显出来。除此之外，styled-components 还很容易集成到使用其他样式方案的现有应用程序中。

在本指南中，没有类似于 Redux，React Router 这类额外的库，或者代码拆分之类的概念 —— 让我们从基础开始。

你可以在这里看到最终能工作的例子： https://github.com/Jobeir/styled-components-server-side-rendering，这里参与此文的讨论： https://spectrum.chat/thread/b95c9ef2-20cb-4bab-952f-fadd90add391

开始构建我们的 React 应用

应用架构。

首先，让我们来看看在这个指南中我们的应用程序的架构是怎样的。我们需要把所有的依赖和脚本放在 package.json 中，并且我们的构建步骤会通过 webpack.config.js 进行处理。

除此之外，一个单独的 server.js 文件来处理我们的 React 应用程序的路由和服务。 client/ 目录中有含 App.js，Html.js 和 index.js 在内的我们实际的应用程序。

首先，新建一个空的文件目录，通过下面的指令创建一个空的 package.json 文件：

npm init --yes 或者 yarn init --yes

然后把下方展示的脚本和依赖都粘进去。这个应用的依赖有 React，styled-components，Express，Wepback 和 Babel。

"scripts": {
  "start": "node ./dist/server",
  "build": "webpack"
},
"devDependencies": {
  "babel-core": "^6.10.4",
  "babel-loader": "^7.1.2",
  "babel-preset-env": "^1.6.1",
  "babel-preset-react": "^6.11.1",
  "webpack": "^3.8.1",
  "webpack-node-externals": "^1.2.0"
},
"dependencies": {
  "express": "^4.14.0",
  "react": "^16.2.0",
  "react-dom": "^16.2.0",
  "styled-components": "^2.2.4"
}
复制代码

既然我们所有的依赖关系都已经被考虑到了，并且我们已经设置了脚本来启动和构建我们的项目，我们现在可以设置我们的 React 应用程序了。

1.**src/client/App.js**

import React from 'react';

const App = () => ?;

export default App;
复制代码

App.js 返回一个包裹 ? 表情符的 div。这是一个非常基本的 React 组件，我们将把它渲染到浏览器中。

2.**src/client/index.js**

import React from 'react';
import { render } from 'react-dom';
import App from './App';

render(<App />, document.getElementById('app'));
复制代码

index.js 是将 React 应用程序装入 DOM 的标准方式。它会取出 App.js 组件并渲染它。

3.**src/client/Html.js**

/**
 * Html
 * 这个 Html.js 文件充当了一个模板，我们将所有生成的应用程序代码插入其中
 * 然后作为常规的 HTML 发送给客户端。
 * 注意我们从这个函数返回一个模板字符串。
 */
const Html = ({ body, title }) => `
  
  
    
      <span class="hljs-subst">${title}</span>
    
    
      ${body}
    
  
`;

export default Html;
复制代码

到目前为止，我们已经有了一个 package.json，它包含了我们所有的依赖和脚本，还有在 src/client/ 文件夹中的一个基本的 React 应用程序。这个 React 应用程序会把 Html.js 文件返回的模板字符串渲染为 HTML。

创建服务

为了在服务器上渲染我们的应用，我们需要安装 express 处理请求并返回我们的 HTML。express 添加进来以后，我们就可以创建服务了。

**src/server.js**

import express from 'express';
import React from 'react';
import { renderToString } from 'react-dom/server';
import App from './client/App';
import Html from './client/Html';

const port = 3000;
const server = express();

server.get('/', (req, res) => {
  /**
   * renderToString()  将获取我们的 React 应用程序并将其转换为一个字
   * 符串，以便插入到我们的 Html 模板函数中。
   */
  const body = renderToString(<App />);
  const title = 'Server side Rendering with Styled Components';

  res.send(
    Html({
      body,
      title
    })
  );
});

server.listen(port);
console.log(`Serving at http://localhost:${port}`);
复制代码

配置 Webpack

本指南专注于非常基础的知识，因此我们让 Webpack 配置保持简单。我们使用 Webpack 和 Babel 在生产模式下构建我们的 React 应用程序。有一个单入口在 src/server.js 中，它将被输出到 dist/ 下。

const webpack = require('webpack');
const nodeExternals = require('webpack-node-externals');
const path = require('path');

module.exports = {
  entry: './src/server.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'server.js',
    publicPath: '/'
  },
  target: 'node',
  externals: nodeExternals(),
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: `'production'`
      }
    })
  ],
  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel-loader'
      }
    ]
  }
};
复制代码

现在我们已经可以构建并服务一个服务端渲染的 React 应用程序了。我们可以运行两个命令并做好准备。

首先，运行：

yarn build 或者 npm build

然后用过运行以下命令启动程序：

yarn start 或者 npm start

如果它没有启动，你可能需要在项目的根目录中添加一个 _.babelrc_ 文件。

yarn build，然后 yarn start，成功后访问 http://localhost:3000。

添加 styled-components

到目前为止，一切都很好。我们已经成功创建了一个在服务器上渲染的 React 应用程序。我们没有任何类似 React Router，Redux 的第三方库，而且我们的 Webpack 配置也是直奔主题的。

接下来，让我们开始使用 styled-components 样式化我们的应用。

**src/client/App.js**

让我们创建我们的第一个 styled component。要创建一个 styled component，首先要导入 styled 并且定义你的组件。

import React from 'react';
import styled from 'styled-components';

// 我们的单个styled component 定义
const AppContaienr = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  width: 100%;
  height: 100%;
  font-size: 40px;
  background: linear-gradient(20deg, rgb(219, 112, 147), #daa357);
`;

const App = () => ?;

export default App;
复制代码

把一个 styled component 添加到我们的应用

2. **src/server.js**

这是最大的变化发生的地方。 styled-components 暴露了 ServerStyleSheet，它允许我们用中的所有 styled 组件创建一个样式表。这个样式表稍后会传入我们的 Html 模板。

import express from 'express';
import React from 'react';
import { renderToString } from 'react-dom/server';
import App from './client/App';
import Html from './client/Html';
import { ServerStyleSheet } from 'styled-components'; // <-- 导入 ServerStyleSheet

const port = 3000;
const server = express();

// 创建索引路由为我们的 React 应用程序提供服务。
server.get('/', (req, res) => {
  const sheet = new ServerStyleSheet(); // <-- 创建样式表

  const body = renderToString(sheet.collectStyles(<App />)); // <-- 搜集样式
  const styles = sheet.getStyleTags(); // <-- 从表中获取所有标签
  const title = 'Server side Rendering with Styled Components';

  res.send(
    Html({
      body,
      styles, // <-- 将样式传递给我们的 Html 模板
      title
    })
  );
});

server.listen(port);
console.log(`Serving at http://localhost:${
       port}`);
复制代码

向 server.js 添加5行代码。

3. **src/client/Html.js**

将 styles 作为参数添加到我们的 Html 函数中，并将 $ {styles} 参数插入到我们的模板字符串中。

/**
 * Html
 * 这个 Html.js 文件充当了一个模板，我们将所有生成的应用程序代码插入其中
 * 成的应用程序字符串插入进去。
 */
const Html = ({ body, styles, title }) => `
  
  
    
      <span class="hljs-subst">${title}</span>
      ${styles}
    
    
      ${body}
    
  
`;

export default Html;
复制代码

就是这样！让我们构建并运行使用服务端渲染的 React 和 styled-components 应用程序吧。

yarn build 或者 npm build

然后用过运行以下命令启动程序：

yarn start 或者 npm start

结论

我们已经创建了服务端渲染中使用 styled-components 的 React 应用程序的分步指南。本指南周围没有各种花哨的技巧，因为我们想要关注核心概念。从这里开始，您可以在现有应用程序中使用这些原则，或者在本指南的基础上构建更复杂的应用程序。还有其他一些指南可以帮助您添加状态管理，路由，性能改进等等。

不要停止学习！

感谢您阅读本指南到最后。希望它能帮助你理解并开始使用 React / SSR 和 styled-components。如果您认识任何可能从本指南中受益的人，我会很乐意推荐给他们！

如果您希望看到使用样式化组件的服务端渲染的较大代码库，则可以查看我的另一个项目，Jobeir, on Github. 最重要的是，styled-components文档总是一个不错的去处。

在 Jobeir 的在 SSR React 中使用 styled-components

我是谁？我是 Jobeir 的创始人，Jobeir 是一个专注于帮助每个人找到科技领域最好的工作的工作布告栏。我在加拿大温哥华担任高级前端开发人员。可以在 Twitter 上问我问题，或者跟我打招呼，又或者检索我们的 Github 仓库。

如果发现译文存在错误或其他需要改进的地方，欢迎到掘金翻译计划对译文进行修改并 PR，也可获得相应奖励积分。文章开头的 本文永久链接 即为本文在 GitHub 上的 MarkDown 链接。

掘金翻译计划是一个翻译优质互联网技术文章的社区，文章来源为掘金上的英文分享文章。内容覆盖 Android、iOS、前端、后端、区块链、产品、设计、人工智能等领域，想要查看更多优质译文请持续关注掘金翻译计划、官方微博、知乎专栏。