[譯] 使用 styled-components 的 React 服務端渲染極簡指南

elliott_zhao發表於2018-05-31
React服務端

本指南旨在分享服務端渲染的 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 應用

[譯] 使用 styled-components 的 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 = () => <div>?</div>;

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 }) => `
  <!DOCTYPE html>
  <html>
    <head>
      <title>${title}</title>
    </head>
    <body style="margin:0">
      <div id="app">${body}</div>
    </body>
  </html>
`;

export default Html;
複製程式碼

到目前為止，我們已經有了一個 package.json，它包含了我們所有的依賴和指令碼，還有在 src/client/ 資料夾中的一個基本的 React 應用程式。這個 React 應用程式會把 Html.js 檔案返回的模板字串渲染為 HTML。

建立服務

[譯] 使用 styled-components 的 React 服務端渲染極簡指南

為了在伺服器上渲染我們的應用，我們需要安裝 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_ 檔案。

[譯] 使用 styled-components 的 React 服務端渲染極簡指南

yarn build，然後 yarn start，成功後訪問 http://localhost:3000。

新增 styled-components

到目前為止，一切都很好。我們已經成功建立了一個在伺服器上渲染的 React 應用程式。我們沒有任何類似 React Router，Redux 的第三方庫，而且我們的 Webpack 配置也是直奔主題的。

接下來，讓我們開始使用 styled-components 樣式化我們的應用。

  1. **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 = () => <AppContaienr>?</AppContaienr>;

export default App;
複製程式碼

把一個 styled component 新增到我們的應用

2. **src/server.js**

這是最大的變化發生的地方。 styled-components 暴露了 ServerStyleSheet，它允許我們用 <App /> 中的所有 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 }) => `
  <!DOCTYPE html>
  <html>
    <head>
      <title>${title}</title>
      ${styles}
    </head>
    <body style="margin:0">
      <div id="app">${body}</div>
    </body>
  </html>
`;

export default Html;
複製程式碼

就是這樣！讓我們構建並執行使用服務端渲染的 React 和 styled-components 應用程式吧。

yarn build 或者 npm build

然後用過執行以下命令啟動程式：

yarn start 或者 npm start

[譯] 使用 styled-components 的 React 服務端渲染極簡指南

結論

我們已經建立了服務端渲染中使用 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、前端、後端、區塊鏈、產品、設計、人工智慧等領域，想要檢視更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。

相關文章