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!