Gorbus/meteor-react-apollo-ssr

Can you increase the code splitting part, do you have such an idea

eugle opened this issue · 9 comments

eugle commented

I want to know how to use code splitting in a project with ssr enabled. As far as I know, there are several ways to achieve it.

The first is the method I currently use, with the help of npdev-react-loadable, but there is a problem. The files loaded by npdev-react-loadable are not accurate, which leads to too many and large files.

The second type, using @loadable/components, file splitting is very precise and powerful. Variables and node plugin packages can be dynamically loaded. This is the only package that can do this level. However, due to the need to configure webpack, in meteor It can’t be used, at least I don’t know how to use it.

The third one is to use import(), but I don’t know how to use it or whether it will work.

Finally, use react's lazy, but lazy does not support ssr, so give up

I have moved the project to this demonstration, which is very good, but I lack the function of code splitting and urgently need this function, because my project has too many files and I need SEO, and I hope that the first loading speed is fast enough. Do you see this question, do you have any ideas to increase the code splitting, take a moment to make this demonstration more powerful and perfect, I will always pay attention to this question, check it out every few hours, have you come back, poor people :)

eugle commented

Can the Dynamic Imports portion be SSR

nathanschwarz commented

yes it will work on both server and client

eugle commented

I tried using dynamic imports and found that SSR didn't work
This is my code

function App(props) {
    //some code

    const [Official, setOfficial] = useState(null);
    async function ImportOfficial() {
        const dynamicImport = (await import('/imports/ui/template/official/App')).default;
        setOfficial(dynamicImport);
    }

    useEffect(() => {
        ImportOfficial().then();
    }, []);

    return (
      <div>
        {Official}
      </div>
    )
}

Indicates that all is well loaded, but if you open the source code


<body><noscript>You need to enable JavaScript to run this app.</noscript>
  | <div id="app"></div><script id='__MODULES__'>window.__APOLLO_STATE__={"ROOT_QUERY": 
 {"__typename":"Query","start({})":{"__typename":"StartResponse","code":200,"message":"success","data":

only

<div id="app"></div>

The SSR has no normal output

but，

Normal import, use

import Official from '/imports/ui/template/jimuku/App';

 //some code
return (
      <div>
        <Official/>
      </div>
    )

SSR is fine

I am the dynamic import method is wrong？What's the problem?
teach me, thank you

eugle commented

Sorry, I use your method, I will get an error, the error code is as follows

=> Meteor server restarted
E20210212-20:10:08.529(8) (webapp_server.js:1065) Error running template: Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.

This is my code

return (
        <ErrorBoundary translation={value}>
            <GlobalContext.Provider value={value}>
                {import('/imports/ui/template/official/App').then(({default: Official}) => <Official/>)}
            </GlobalContext.Provider>
        </ErrorBoundary>
    );
nathanschwarz commented

My bad about the state thing, it was actually correct. Go back to your original code.
You should not use dynamic loading on the server with react component because it will send the html before finishing loading the components.
You should use a pattern like this :

function ComponentWrapper({ ...rest, Component }) {
  if (Component === null) {
     return (<div>loading...</div>  
  }
  return <Component {...rest} />
}

let IsomorphicComponent = null
if (Meteor.isServer) {
   import Whatever from 'somepath'
   IsomorphicComponent = props => <MyComponent {...props} Component={Whatever} />
} else {
  IsomorphicComponent = props => {
      const [Component, setComponent] = useState(null)
      useEffect(() => {
           import('somepath').then((c) => setComponent(c))
      }, [])
     return <ComponentWrapper {...props} Component={Component} />
   }
}

export default IsomorphicComponent
eugle commented

It's so complicated, I don't understand it at all, can you add this to this example?

eugle commented

Please, add it to Example. All it takes is for an arbitrary component to load successfully and support SSR，
My project is in a hurry to use it, and my project uses your example

eugle commented

I added a PR, add dynamic-import, please have a look, there is some error, help to fix and then merge, thank you very much