You are right, I have been studying these days, to realize the dynamic import and SSR,
If my words are wrong, please forgive me, sometimes express the meaning of the translation software and you want to express the meaning of different, can only read the meaning is very good
Because of the meteor and Apollo involved, and the need for dynamic imports and SSR, I felt like I was trying a tough task
Your npdev:react-loadable is perfect without Apollo and that’s why it’s recommended
but
After the addition of Apollo, I have found two problems
The first one is, repeat rendering, which is a serious one, and I haven’t solved it yet,
The rendering process looks like this
The request data => server side return data => render => client request data return => render (page flicker)
Looking at the data request on the back end, the data is requested three times in a row
The second problem is that the current rendering route involves files that are not accurate enough and may contain files that are not used.
Well, I mentioned the question before and you answered it, but I didn’t understand it. However, it doesn’t matter much
Due to the problem of repeating the request for data 3 times in a row, I tried another example, which is perfect and has local caching effect.
The first request, the background read data 1 times
Refresh the page, the background will not read, directly from the slow access to the data
This is something I have never experienced before and have been using your package since
The request data => server side return data => render => client request data return => render (page flicker)
Looking at the data request on the back end, the data is requested three times in a row
I tried using Meteor’s dynamic import method to load files dynamically at the route level,
But the methods I know so far do not support SSR,
router.js
const Routes = (props) => {
const staticRouter = [
<Route exact path="/" component={Home} key="s1"/>,
];
const [loading, setLoading] = useState(false);
const [routes, setRoutes] = useState(staticRouter);
const account = props.location.pathname === '/user/center';
const dynamicRouter = async () => {
setLoading(true);
if (account) {
const dynamic = await import('./event/dynamic');
const resultRouter = dynamic.Generate(props);
setRoutes([...staticRouter, ...resultRouter]);
} else {
setRoutes([...staticRouter]);
}
setLoading(false);
}
useEffect(async () => {
await dynamicRouter();
}, [account]);
if (loading) {
return <Loading/>
}
return (
<Layout>
<Switch>
{routes}
<Route component={NotFound} key='n1'/>
</Switch>
</Layout>
)
./event/dynamic.js
import React from 'react';
import { Route } from 'react-router-dom';
import UCenter from '../../pages/UCenter';
export const Generate = props => {
return [
<Route path="/user/center" component={UCenter} {...props} key="d1"/>,
];
};
I will continue to research and feel closer to the truth
If the dynamic import cannot work with SSR, I will try to use your npdev:react-loadable to cooperate with Apollo again
