react首屏SSR,nodejs同构解决方案

本文介绍了使用create-react-app、Koa和react-loadable进行React首屏SSR的实践过程,包括解决import支持、代码分割问题,并提供了一个可直接复制使用的解决方案。虽然存在基于流的解决方案,但作者选择了当前方案。文章最后提到SSR仍存在的数据获取问题,并表示新人可能面临挑战,作者计划尝试umi+ts+antd+dva的组合寻找更简便的途径。
摘要由CSDN通过智能技术生成

网上看了N篇文章,有几篇比较高级的我看不太懂,其他基本全是吹逼复制不讲实质性东西的,我结合了一些自己的见解,写下了这篇可直接复制可用的,虽然还有基于流的解决方案,但是资料不多,时间也有限,就采用这个吧暂时。

1.create-react-app

2.src同级目录下新建server文件夹,新建index.js和entry.js

3.第一个问题:让koa支持import

//index.js 写koa
import Koa from 'koa';
const app = new Koa();
app.listen(8889, () => {
    console.log('ssr starting');
})

//entry.js 作为入口文件处理koa使用import
require('babel-register')({
    presets:["env","react"]
});
require('babel-polyfill');
module.exports = require('./index');

//依赖
"devDependencies": {
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "babel-register": "^6.26.0"
}

4.第二个问题:我之前使用的是react提供的lazy和Suspense来处理code splitting,做SSR的时候发现不行࿰

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值