服務端渲染react+mobx+webpack+express實戰（同時也支持客戶端渲染）

用戶83 發布于2019-08-20 16:14 / 3485人閱讀

摘要：但是在服務器環境中，并沒有和這個對象，所以我們在服務器環境中拋出一個異常，然后捕獲到之后進行跳轉。我相信我們所采用的一些方法也許并不是最完美的解法，如果有更好的歡迎來中提探討交流，互相學習項目地址在此

目前絕大多數網站還是一個多頁的結構，但其實一個網站已經完全可以做成一個spa，比如youtube就是一個spa，最近公司項目都是采用react+mobx服務端渲染的單頁面應用的形式，踩了一些坑，有一些自己的體驗，所以把項目抽了出來去掉了業務代碼，留了一個架子分享一下。

項目github地址

目前react主流的狀態管理使用的比較多的是redux，我司之前有個項目也是react+redux，從我個人使用下來的感受來說，對于絕大多數的前端應用場景，mobx遠比redux更合適，更簡單使用，更容易上手。

效果 登陸，注冊

添加item到列表中

如果路由中沒有的頁面，處理404

如何使用

git clone git@github.com:L-x-C/isomorphic-react-with-mobx.git
cd isomorphic-react-with-mobx
npm install

Dev (客戶端渲染)

npm start
open http://localhost:3000

Production (服務端渲染)

npm run server
open http://localhost:20000

一些經常會遇到的情況 如何在服務端獲取數據?

在每個component中增加一個onEnter,用一個promise來處理，在這個promise中發起一個action，改變mobx中的states值

@action
static onEnter({states, pathname, query, params}) {
    return Promise.all([
      menuActions.setTDK(states, "列表"),
      jobActions.fetchJobList(states, query)
    ]);
}

之所以能這么做，是因為在serverRender中有一個onEnter的預處理，會根據component的嵌套從最外層一直遍歷到最里層的onEnter，并執行其中的的方法

import async from "async";

export default (renderProps, states) => {
  const params = renderProps.params;
  const query = renderProps.location.query;
  const pathname = renderProps.location.pathname;

  let onEnterArr = renderProps.components.filter(c => c.onEnter);
  return new Promise((resolve, reject) => {
    async.eachOfSeries(onEnterArr, function(c, key, callback) {
      let enterFn = c.onEnter({states, query, params, pathname});
      if (enterFn) {
        enterFn.then(res => {
          if (res) {
            //處理Promise回調執行，比如登陸
            res.forEach((fn) => {
              if (Object.prototype.toString.call(fn) === "[object Function]") {
                fn();
              }
            });
          }

          if (key === (onEnterArr.length - 1)) {
            resolve();
          }

          callback();
        }).catch(err => {
          reject(err);
        });
      } else {
        callback();
      }
    });
  });
};

如何在服務端設置tdk(title, description, keywords)?

這其實在上一個問題中就已經出現了，onEnter中有一個setTDK(states, t, d, k)的方法，使用他就可以設置tdk的值

如何在服務端進行跳轉?

在瀏覽器環境中，我們可以設置window.location.href = url來進行跳轉。
但是在服務器環境中，并沒有window和document這2個對象，所以我們在服務器環境中拋出一個異常，然后捕獲到之后進行302跳轉。
具體可以看src/helpers/location.js, 中的redirect function
他會自動判斷當前環境，來選擇使用哪一種跳轉

import {redirect} from "./helpers/location";

@action
static onEnter({states, query, params}) {
    redirect("http://www.xxx.com");
}

mobx的原理及使用就不在這里做詳細的介紹了，網上搜一搜有很多。
我相信我們所采用的一些方法也許并不是最完美的解法，如果有更好的歡迎來github中提issue探討交流，互相學習~項目地址在此

GPU云服務器云服務器服務端渲染云服務器支持gpu渲染嗎網頁端webrtc視頻渲染網頁端3d云渲染

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/82807.html

前端每周清單半年盤點之 React 與 ReactNative 篇

摘要：前端每周清單半年盤點之與篇前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發者了解一周前端熱點分為新聞熱點開發教程工程實踐深度閱讀開源項目巔峰人生等欄目。與求同存異近日，宣布將的構建工具由遷移到，引發了很多開發者的討論。前端每周清單半年盤點之 React 與 ReactNative 篇前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發者了解一周前端熱點；分為...

Barry_Ng 2019-08-22 10:54 評論0 收藏0
前端每周清單第 50 期: AngularJS and Long Term Support, Web

摘要：在該版本發布之后，開發團隊并不會繼續發布新的特性，而會著眼于進行重大的錯誤修復。發布每六個星期，團隊就會創建新的分支作為發布通道，本文即是對新近發布的版本進行簡要介紹。 showImg(https://segmentfault.com/img/remote/1460000013229009); 前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發者了解一周前端熱點；分為新聞熱...

DobbyKim 2019-08-26 11:38 評論0 收藏0
基于 Webpack 4 多入口生成模板用于服務端渲染的方案及實戰

摘要：原作者原鏈接基于多入口生成模板用于服務端渲染的方案及實戰法律聲明警告本作品遵循署名非商業性使用禁止演繹未本地化版本協議發布。這是什么背景現代化的前端項目中很多都使用了客戶端渲染的單頁面應用。原作者：@LinuxerPHL原鏈接：基于 Webpack 4 多入口生成模板用于服務端渲染的方案及實戰法律聲明警告：本作品遵循署名-非商業性使用-禁止演繹3.0 未本地化版本（CC BY-...

big_cat 2019-08-26 10:37 評論0 收藏0
基于 Webpack 4 多入口生成模板用于服務端渲染的方案及實戰

摘要：原作者原博文地址基于多入口生成模板用于服務端渲染的方案及實戰法律聲明警告本作品遵循署名非商業性使用禁止演繹未本地化版本協議發布。這是什么背景現代化的前端項目中很多都使用了客戶端渲染的單頁面應用。原作者：@LinuxerPHL原博文地址: 基于 Webpack 4 多入口生成模板用于服務端渲染的方案及實戰法律聲明警告：本作品遵循署名-非商業性使用-禁止演繹3.0 未本地化版本（...

Lavender 2019-08-26 10:37 評論0 收藏0
干貨實例：什么是React服務端渲染？

摘要：今天分享一篇公司大佬的文章，非常厲害的大神崇拜臉，講講服務端渲染。服務端渲染，它到底用了什么原理呢服務端渲染原理服務端渲染的方式有很多，主流的服務端語言為使用渲染。富婆來報道，今天想問題想不出來，隨手抓了一下頭發，沒想到啊沒想到，我那濃（mei）密(sheng)茂(ji)盛(gen)的秀發又少了好幾根，一定要改掉這個想不出來問題就揪頭發的壞習慣。今天分享一篇公司大佬的文章，非常厲害的...

Jason_Geng 2019-08-26 13:42 評論0 收藏0