So we are building a React templated webpage where a page comprises of N number of widgets which our customer can configure on the dashboard. This 'N' is in order of 100s, so direct import was out of question. At first we used asyncComponent. We imported all our 100 widgets using asyncComponent by creating a map like this -
{
widget1: asyncComponent({ loader: 'path-to-widget-1' }),
widget2: asyncComponent({ loader: 'path-to-widget-2' })
}
And guess what, it worked! Now a customer who has chosen widget1, widget3 and widget4 would only have chunks downloaded for these files and not for widget2 or others. And I was a happy man.
And then came the damn SEO!
By lazy loading all the widgets, now google SEO crawlbots are unable to view the page and on Google Search Console the error says "Cannot load chunk1.widget1.js" and so on. And well it made sense, I am lazy loading the widgets so my SSR inadvertently I have converted to a sophisticated CSR.
So, after a lot of googling, I found @loadable/components have support for SSR also, and so my hope is somehow internally loadable-component merges widget1, widget3, widget4 chunks or do some magic to load these components during SSR also.
The catch - I have been unable to make @loadable/component play with After.js.
I have searched for previous threads and there dont seem to be any answer on it,
So my first question -
Is it possible to use @loadable/component - obviously my page component will still use asyncComponent to take advantage of getInitialProps. But my widget would be declared using @loadable/component
If yes, then can anyone point me to a sample repo of after.js integrated with loadable to get me started.
❓Question
So we are building a React templated webpage where a page comprises of N number of widgets which our customer can configure on the dashboard. This 'N' is in order of 100s, so direct import was out of question. At first we used asyncComponent. We imported all our 100 widgets using asyncComponent by creating a map like this - { widget1: asyncComponent({ loader: 'path-to-widget-1' }), widget2: asyncComponent({ loader: 'path-to-widget-2' }) }
And guess what, it worked! Now a customer who has chosen widget1, widget3 and widget4 would only have chunks downloaded for these files and not for widget2 or others. And I was a happy man.
And then came the damn SEO!
By lazy loading all the widgets, now google SEO crawlbots are unable to view the page and on Google Search Console the error says "Cannot load chunk1.widget1.js" and so on. And well it made sense, I am lazy loading the widgets so my SSR inadvertently I have converted to a sophisticated CSR.
So, after a lot of googling, I found @loadable/components have support for SSR also, and so my hope is somehow internally loadable-component merges widget1, widget3, widget4 chunks or do some magic to load these components during SSR also.
The catch - I have been unable to make @loadable/component play with After.js. I have searched for previous threads and there dont seem to be any answer on it,
So my first question -
Any or all help will be greatly appreciated!