easy-team / egg-view-react-ssr Goto Github PK

View Code? Open in Web Editor NEW

62.0 5.0 9.0 142 KB

Egg React Server Side Render (SSR) Plugin

Home Page: https://easyjs.cn

License: MIT License

JavaScript 100.00%

egg react react-server-render egg-plugin egg-view-react egg-react webpack render-engine

egg-view-react-ssr's Issues

为什么取消了no state component render的功能？

在git的分支中有看到，2.3.2版本是支持stateless component的渲染的，为什么后来的版本里没有支持，而且也没有相应的警告信息？

若不使用easywebpack，而只使用egg-view-react-ssr该如何配置呢？

请问，若不使用easywebpack，而只使用egg-view-react-ssr该怎样配置呢？

我在egg的项目里引入了egg-view-react-ssr，并开启插件后，然后自己配置webpack环境，却总是提示can't inject of undefined，若不使用easywebpack，配置webpack的思路大概是怎样的呢

feature: spa ssr渲染模式时layout也需要获取ctx和初始数据

现象：使用spa ssr渲染模式时，页面入口可以获取到服务端的ctx和初始数据，但在layout里面无法获取ctx和初始数据，正常多页面启用loader或者客户端渲染时是可以在layout获取到ctx的，没看出明白问题在哪?

预期：spa ssr渲染模式时layout也需要获取ctx和初始数据

version：[email protected]

demo code
spa ssr demo entry

const serverRender = (context, options)=> {
  const { ctx, request, helper, url} = context.state;
  console.log("==================context")
  // console.log(context) // 可以拿到ctx
  const branch = matchRoutes(routes, url);
  const promises = branch.map(({route}) => {
    const fetch = route.component.fetch;
    return fetch instanceof Function ? fetch(ctx) : Promise.resolve(null)
  });
  return Promise.all(promises).then(data => {
    const initState = context.state;
    data.forEach(item => {
      Object.assign(initState, item);
    });
    context.state = Object.assign({}, context.state, initState);
    const store = create(initState);
    return () =>(
      <Layout>
        <Provider store={store}>
          <StaticRouter basename="/ssrdemo" location={url} context={{}}>
            <App url={url}/>
          </StaticRouter>
        </Provider>
      </Layout>
    )
  });
};

layout.js

export default class Layout extends React.Component {
  render() {
    let { ctx, request, helper, ...initState } = this.props;
    console.log('===================layout')
    console.log(this.props) // 无法拿到ctx
    // const serialize = require('serialize-javascript');
    // initState = initState.state || initState;
    return (
      <html>
        <head>
          <title>{this.props.title}</title>
          <meta charSet="utf-8"></meta>
          <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"></meta>
          <meta httpEquiv="X-UA-Compatible" content="IE=edge"></meta>
          <meta name="keywords" content={this.props.keywords}></meta>
          <meta name="description" content={this.props.description}></meta>
          { EASY_ENV_IS_PROD && (
            <script dangerouslySetInnerHTML={{__html: baiduTongji}}></script>
          ) }
          { ctx && ctx.query.debug==='vconsole' && (
            <React.Fragment>
              <script src="https://cdnjs.cloudflare.com/ajax/libs/vConsole/3.2.0/vconsole.min.js"></script>
              <script dangerouslySetInnerHTML={{__html:`new VConsole();`}}></script>
            </React.Fragment>
          ) }
          <script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.5.7/core.min.js"></script>
          <script dangerouslySetInnerHTML={{__html:`document.write('${ie9Mixins}')`}}></script>
          { ctx && !/\/lowVersionBrowser/.test(ctx.request.url) && <script dangerouslySetInnerHTML={{__html:`document.write('${ie8Mixins}')`}}></script> }
          <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"></link>
        </head>
        <body>
          <div id="app">{this.props.children}</div>
          {/* <script id="__INITIAL_STATE__" dangerouslySetInnerHTML={{__html: `window.__INITIAL_STATE__= ${serialize(initState, { isJSON: true })};`}}></script> */}
        </body>
      </html>
    )
  }
}

ssr开启less报错

按文档添加
// webapck.config.js module: { rules: [ { less: true } ] },
// package.json "less": "^2.7.2", "less-loader": "^4.0.5",
配置后执行npm run dev报错
`
easyteam/node_modules/@easy-team/easywebpack-react/lib/base.js:23
if (Array.isArray(itemLoader.use)) {
^

TypeError: Cannot read property 'use' of undefined
at /Users/zhangyuliang/Desktop/workspace/ssr/easyteam/node_modules/@easy-team/easywebpack-react/lib/base.js:23:36
at Array.forEach ()
at WebpackClientBuilder.prepareCssModuleLoader (/Users/zhangyuliang/Desktop/workspace/ssr/easyteam/node_modules/@easy-team/easywebpack-react/lib/base.js:21:26)
at WebpackClientBuilder.createWebpackLoader (/Users/zhangyuliang/Desktop/workspace/ssr/easyteam/node_modules/@easy-team/easywebpack/lib/core/loader.js:394:10)
at WebpackClientBuilder.combineWebpackConfig (/Users/zhangyuliang/Desktop/workspace/ssr/easyteam/node_modules/@easy-team/easywebpack/lib/target/base.js:141:21)
at WebpackClientBuilder.create (/Users/zhangyuliang/Desktop/workspace/ssr/easyteam/node_modules/@easy-team/easywebpack/lib/target/base.js:164:17)
at /Users/zhangyuliang/Desktop/workspace/ssr/easyteam/node_modules/@easy-team/easywebpack/lib/builder.js:152:61
at Array.forEach ()
at Object.exports.getWebpackConfig (/Users/zhangyuliang/Desktop/workspace/ssr/easyteam/node_modules/@easy-team/easywebpack/lib/builder.js:147:12)
at Object.exports.getWebpackConfig (/Users/zhangyuliang/Desktop/workspace/ssr/easyteam/node_modules/@easy-team/easywebpack-react/index.js:8:37)
at module.exports (/Users/zhangyuliang/Desktop/workspace/ssr/easyteam/config/config.local.js:22:36)
at AgentWorkerLoader.loadFile (/Users/zhangyuliang/Desktop/workspace/ssr/easyteam/node_modules/egg-core/lib/loader/egg_loader.js:304:13)
at AgentWorkerLoader._loadConfig (/Users/zhangyuliang/Desktop/workspace/ssr/easyteam/node_modules/egg-core/lib/loader/mixin/config.js:83:25)
at AgentWorkerLoader._preloadAppConfig (/Users/zhangyuliang/Desktop/workspace/ssr/easyteam/node_modules/egg-core/lib/loader/mixin/config.js:68:27)
at AgentWorkerLoader.loadConfig (/Users/zhangyuliang/Desktop/workspace/ssr/easyteam/node_modules/egg-core/lib/loader/mixin/config.js:26:28)
at AgentWorkerLoader.loadConfig (/Users/zhangyuliang/Desktop/workspace/ssr/easyteam/node_modules/egg/lib/loader/agent_worker_loader.js:16:11)
2020-10-26 19:25:01,294 ERROR 14479 nodejs.AgentWorkerDiedError: [master] agent_worker#1:14480 died (code: 1, signal: null)
at Master.onAgentExit (/Users/zhangyuliang/Desktop/workspace/ssr/easyteam/node_modules/egg-cluster/lib/master.js:425:17)
at Master.emit (events.js:315:20)
at Messenger.sendToMaster (/Users/zhangyuliang/Desktop/workspace/ssr/easyteam/node_modules/egg-cluster/lib/utils/messenger.js:137:17)
at Messenger.send (/Users/zhangyuliang/Desktop/workspace/ssr/easyteam/node_modules/egg-cluster/lib/utils/messenger.js:102:12)
at ChildProcess. (/Users/zhangyuliang/Desktop/workspace/ssr/easyteam/node_modules/egg-cluster/lib/master.js:289:22)
at Object.onceWrapper (events.js:422:26)
at ChildProcess.emit (events.js:315:20)
at Process.ChildProcess._handle.onexit (internal/child_process.js:275:12)
name: "AgentWorkerDiedError"
pid: 14479
`

请问为什么不使用egg-bin

是因为配置上有冲突还是其它别的原因？

请问如何在react hooks中写asyncData方法

react hooks 实例代码

function Index(props) {}
// 此处如何改造?
Index.asyncData = () => {}

看到被包裹成Page的reactClass
app.react.renderElement(reactClass, locals)

有考虑增加在server端支持styled-component的同构

一直在使用easywebpack，项目有场景在运行时对样式的操作/变量的传值，需要使用styled-component，但在server端进行renderToString收集好component的样式表，append进

import { renderToString } from 'react-dom/server'
import { ServerStyleSheet } from 'styled-components'

const sheet = new ServerStyleSheet()
try {
  const html = renderToString(sheet.collectStyles(<YourApp />))
  const styleTags = sheet.getStyleTags() // or sheet.getStyleElement();
} catch (error) {
  // handle error
  console.error(error)
} finally {
  sheet.seal()
}

easy-team / egg-view-react-ssr Goto Github PK

egg-view-react-ssr's Issues

为什么取消了no state component render的功能？

若不使用easywebpack，而只使用egg-view-react-ssr该如何配置呢？

feature: spa ssr渲染模式时layout也需要获取ctx和初始数据

ssr开启less报错

请问为什么不使用egg-bin

请问如何在react hooks中写asyncData方法

有考虑增加在server端支持styled-component的同构

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent