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

跳跳虎Rain

于 2019-11-09 21:50:31 发布

阅读量766

点赞数

CC 4.0 BY-SA版权

分类专栏： react koa 文章标签： react koa nodejs ssr

本文链接：https://blog.csdn.net/weixin_42450794/article/details/102974119

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

网上看了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的时候发现不行，改为react-loadable，

抽离组件,新建util>loadable>index.js

import React from 'react';
import Loadable from 'react-loadable';

const loadingComponent = () => {
    return (
        <div>我正在加

最低0.47元/天解锁文章

200万优质内容无限畅学