1

I used react-router to build a spa application successfully with async component months ago.

But it is too slow when i first open the page( because of the size of resource , even though code splitting and async load )

Now that it is important to make it ssr to approve the speed for its first render.

Something wrong after i finish the server side render work according to the api document. When i open my page ,warnning like this:

 (client) " data-reactid="1"><!-- react-empty: 2 -
 (server) " data-reactid="1"><div class="Detail_mo

and a flash occurs between the true renders.

Thought that it is caused by the async component(which is finished after react-router's first render) .

Now i remove the async loader for component and then everything comes true without any warnnings!

Routes.js

module.exports = {
path: '/',
getChildRoutes:(location,callback)=>{
    callback(null,[
        {
            path: 'item.html',
            getComponent: (nextState, cb)=>{
                console.log('Detail start')
                const Detail = require('react-router-proxy?name=item!../detail/dev/js/detail/container/RootContainer')
                cb(null,Detail)
            }
        },
        {
            path: 'home',
            getComponent: (nextState, cb)=>{
                const Home = require('react-router-proxy?name=home!../home/dev/js/container/RootContainer');
                cb(null,Home)
            }
        },
        {
            path: 'user',
            component: require('react-router-proxy?name=user!../home/dev/js/container/RootContainer')
        },
    ]);
}
};
If it is possible to set an async and dynamic component to the initComponent , or make react-router to start render after the async component callback ( it is all about the first screen rendering ),can both resolve this question i thought.

Thank you!

priceless
  • 11
  • 3

0 Answers0