[SOLVED] Dynamic import and server-render

help
1

I’m trying to make 2 these awesome things work together but had no luck.

dynamic import works fine.
server-render works fine.

But when I tried to make them work together, server-render didn’t work as expected. Components loaded via dynamic import didn’t appear in source code of web page.

2

Hi @minhna, to get help here you have to show some codes…

3

@martineboh, thank you for your reply.
I use react, I created an “AsyncComponent” react component to load other component asynchronously.

class AsyncComponent extends Component {
   constructor(props) {
     super(props);
     this.state = {
       component: null,
     };
   }

   async componentWillMount() {
      let C = await import('/imports/ui/someComponent.js');
      if(C){
         this.setState({
            component: C.default
         });
      }
   }

   render() {
      const C = this.state.component;
      return C ? <C {...this.props} /> : null;
   }
}

Dynamic import works well. But when when I view page source on browser, there is no content of “SomeComponent” appear.

But if I don’t use dynamic import like this:

import SomeComponent from '/imports/ui/someComponent.js';
class AsyncComponent extends Component {
   constructor(props) {
     //nothing
   }

   async componentWillMount() {
      //nothing
   }

   render() {
      //just render imported component
      <SomeComponent {...this.props} />
   }
}

then server-render works correctly. I can now see the source of “SomeComponent” in browser.

4

You need to use componentDidMount instead as componentWillMount only runs once before the component is mounted to the DOM. So, there’s not guarantee that component will be rendered after the await import call…and async means “don’t wait”

1 Like
5

I changed to componentDidMount but the problem still remains.

6

@martineboh, do you know a solution which allows to split codes but still supports server-render? I want to reduce page load time. Thank you.

7

You should look into using React Loadable. I am currently on mobile…

1 Like
8

@martineboh: thank you.

9

React loadable needs webpack settings , can you show meteor example?

10

Here is example: https://github.com/minhna/meteor-react-ssr

11

Thank, but this example uses react loadable on client only.
as far I understand, problem in splitting initial bundle with ssr, no?

12

I think it does. In the root page of demo site, it doesn’t load the moment package. But if you go to admin page, it will load the package.

13

This is client side functional :slight_smile:

14

What was the solution for this? React Loadable and SSR doesn’t load the loadable content server side totally defeating the purpose of SSR.

15

I viewed the source of web page on the browser and the content was there. What did you mean when you say so?