国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

從零開始搭建React同構(gòu)應(yīng)用(四):搭建Koa Server & 完善SSR

fizz / 1858人閱讀

摘要:從零開始搭建同構(gòu)應(yīng)用四搭建完善上一篇我們使用了的方式測試了,這篇文章來講如何在前文的基礎(chǔ)上搭建一個(gè),實(shí)現(xiàn)真正意義上的。至此,一個(gè)簡單的框架已經(jīng)搭建完成,剩下的工作就是結(jié)合工作需要,在里面添磚加瓦啦。

從零開始搭建React同構(gòu)應(yīng)用(四):搭建Koa Server & 完善SSR

上一篇我們使用了CLI的方式測試了SSR,這篇文章來講如何在前文的基礎(chǔ)上搭建一個(gè)Koa Server,實(shí)現(xiàn)真正意義上的SSR。

demo在這

主要內(nèi)容

Koa搭建

完善SSR邏輯

Koa搭建

新建server/index.js:

我們使用Koa v2.0的版本;

npm i koa@next -S;

先搭建一個(gè)最簡單的服務(wù)器

const Koa = require("koa");
const app = new Koa();

app.use(ctx => {
  ctx.body = "Hello Koa";
});

app.listen(8088, _ => {
    console.log("server started")
});

添加一個(gè)npm script

  "scripts": {
    "start": "node --harmony server/index", //啟動HTTP服務(wù)器
    "watch": "webpack -d -w --progress --colors --bs",
    "test-server": "anywhere -p 18341 -d ./build",
    "dist": "cross-env NODE_ENV="production" webpack -p",
    "test-ssr": "node --harmony test/cli.js"
  },

執(zhí)行

npm run start

這樣一個(gè)最簡單的Koa框架就搭建起來,下面就可以往里面填充東西了。

配置router

在添加router之前,我們需要加載webpack編譯生成的HTML模板,這里我們沒有使用EJS,HBS等Nodejs渲染引擎,我們而是使用cheerio來幫助我們操作HTML,cheerio可以讓我們在Node環(huán)境下像使用jQuery一樣來操作HTML,非常容易上手,這里是它的API,基本和jQuery無差別。

在server/index.js增加:

const cheerio = require("cheerio");
const fs = require("fs");
const path = require("path");
const Promise = require("bluebird");
const serve = require("koa-static-server");
const readFileAsync = Promise.promisify(fs.readFile);

/**
 * 讀取HTML模版,返回cheerio實(shí)例
 * @param path
 * @return {Promise.<*>}
 */
async function loadHTMLTemplate(path) {
    try {
        let content = await readFileAsync(path);
        return cheerio.load(content);

    } catch (e) {
        console.error(e);
        return false;
    }
}

我們使用koa-better-router中間件作為路由模塊。我們添加一個(gè)router,在server/index.js增加:

const router = require("koa-better-router")().loadMethods();

router.get("/", async(ctx, next) => {

    let $ = await loadHTMLTemplate(path.resolve(__dirname, "../build/index.html"));

    if (!$) {
        return ctx.body = null;
    }

    return ctx.body = $.html();


});

app.use(router.middleware());

執(zhí)行

npm run start

我們會發(fā)現(xiàn)CSS,JS等文件沒有被加載進(jìn)來,因?yàn)闆]有對應(yīng)的路由,下面我們配置靜態(tài)文件服務(wù)。

配置靜態(tài)文件服務(wù)

我們不可能為所有的資源都寫router,因此我們需要配置一個(gè)靜態(tài)文件服務(wù)。這里我使用了koa-static-server中間件。

我們以build目錄作為資源文件根目錄,在server/index.js增加:

const serve = require("koa-static-server");
const readFileAsync = Promise.promisify(fs.readFile);
const RES_PATH = path.resolve(__dirname, "../build/");

//hfs
app.use(serve({rootDir: RES_PATH}));

執(zhí)行

npm run start

資源可以被正確載入了。

完善SSR邏輯

我們先添加一個(gè)API接口,方便模擬Node端的接口調(diào)用,在server/index.js增加:

//API接口
router.get("/api/todo_list", async(ctx, next) => {

    return ctx.body = ["11", "222"];

});

我們還是以Index.jsx為例:

test/cli.js中的代碼copy過來。修改/路由

const Koa = require("koa");
const app = new Koa();
const router = require("koa-better-router")().loadMethods();
const cheerio = require("cheerio");
const fs = require("fs");
const path = require("path");
const Promise = require("bluebird");
const serve = require("koa-static-server");
const readFileAsync = Promise.promisify(fs.readFile);
const RES_PATH = path.resolve(__dirname, "../build/");
const fetch = require("isomorphic-fetch");

router.get("/", async(ctx, next) => {

    let $ = await loadHTMLTemplate(path.resolve(__dirname, "../build/index.html"));

    if (!$) {
        return ctx.body = null;
    }

    let IndexBundle = require("../build_server/index.bundle.js");

    //fetch接口數(shù)據(jù)
    let todoList = await(await fetch("http://localhost:8088/api/todo_list")).json();

    let initialData = {todoList};

    let instance = React.createElement(IndexBundle.default, initialData);

    let str = renderToString(instance);


    $("#wrap").html(str);

    //前后端數(shù)據(jù)要同步
    let syncScript = ``;

    $("head").append(syncScript);

    return ctx.body = $.html();


});

這里要注意前后端數(shù)據(jù)要同步,我把Node端獲取的數(shù)據(jù)放在window._SERVER_DATA中了,前端渲染的時(shí)候會優(yōu)先使用window._SERVER_DATA來渲染。

if (process.browser) {

    //初始數(shù)據(jù),用于和server render數(shù)據(jù)同步
    let initialData = window._SERVER_DATA || {};

    let store = createStore(reducers, initialData, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());

    let App = connect(_ => _)(Layout);//用connect包裝一下,這里只用到mapStateToProps,而且不對state加以過濾

    ReactDOM.render(
        
            
        ,
        document.getElementById("wrap"));
}

執(zhí)行

npm run start

訪問http://127.0.0.1:8088/

可以看到#wrap中已經(jīng)被填充渲染好的HTML文本了,Node端和前端的數(shù)據(jù)也同步了。 ^_^

至此,一個(gè)簡單的SSR框架已經(jīng)搭建完成,剩下的工作就是結(jié)合工作需要,在里面添磚加瓦啦。

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/81407.html

相關(guān)文章

  • 從零開始搭建React同構(gòu)應(yīng)用(三):配置SSR

    摘要:從零開始搭建同構(gòu)應(yīng)用三配置這篇文章來講解來配置,我們先從最簡單的方法開始,用的方式模擬實(shí)現(xiàn)。影響生產(chǎn)環(huán)境下執(zhí)行效率。最后權(quán)衡下,還是決定使用現(xiàn)在多一套編譯配置的方案。新建,寫入以下內(nèi)容以為例,注意不能少。 從零開始搭建React同構(gòu)應(yīng)用(三):配置SSR 這篇文章來講解來配置server side render,我們先從最簡單的方法開始,用cli的方式模擬實(shí)現(xiàn)SSR。 demo在這里 ...

    jzzlee 評論0 收藏0
  • 基于 Webpack 4 多入口生成模板用于服務(wù)端渲染的方案及實(shí)戰(zhàn)

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

    big_cat 評論0 收藏0
  • 基于 Webpack 4 多入口生成模板用于服務(wù)端渲染的方案及實(shí)戰(zhàn)

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

    Lavender 評論0 收藏0
  • 從零開始最小實(shí)現(xiàn) react 服務(wù)器渲染

    摘要:從零開始最小實(shí)現(xiàn)服務(wù)器渲染前言最近在寫的時(shí)候想到,如果我部分代碼提供,部分代碼支持,那我應(yīng)該如何寫呢不想拆成個(gè)服務(wù)的情況下而且最近寫的項(xiàng)目里面也用過一些服務(wù)端渲染,如,自己也搭過的項(xiàng)目,確實(shí)開發(fā)體驗(yàn)都非常友好,但是友好歸友好,具體又是如何實(shí) showImg(https://segmentfault.com/img/bVMbjB?w=1794&h=648); 從零開始最小實(shí)現(xiàn) react...

    cheukyin 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<