# gatsby dynamic modules, solutions

the most viable solutions are here

- [Better Performance using Dynamic Code Splitting in Gatsby with loadable-components - DEV](https://dev.to/itmayziii/better-performance-using-dynamic-code-splitting-in-gatsby-with-loadable-components-6am)
- [An SEO approach to async components with loadable-components - LogRocket Blog](https://blog.logrocket.com/seo-approach-async-loadable-components/)
- [Getting Started - Loadable Components](https://loadable-components.com/docs/getting-started/)
- [loadable-components/main.js at master · gregberge/loadable-components](https://github.com/gregberge/loadable-components/blob/master/examples/server-side-rendering-async-node/src/server/main.js)
- [hector-del-rio/gatsby-plugin-loadable-components-ssr: Gatsby plugin for using @loadable/component with Gatsby's SSR](https://github.com/hector-del-rio/gatsby-plugin-loadable-components-ssr)
- [pristas-peter/gatsby-plugin-graphql-component: Query React Components in Gatsby GraphQL queries](https://github.com/pristas-peter/gatsby-plugin-graphql-component)


## loadable-components

strong general solution. try this one first.

https://loadable-components.com/
https://github.com/hector-del-rio/gatsby-plugin-loadable-components-ssr

##  gatsby-plugin-graphql-component

https://github.com/pristas-peter/gatsby-plugin-graphql-component

allows you to register components within graphQL schema, so that you can query them out in pages and use them

## Gatsby Page Modules Draft

PR: https://github.com/gatsbyjs/gatsby/pull/24903
demo: https://github.com/pieh/query-webpack-modules-demo-site/
published: `gatsby@query-webpack-modules`

- `context.pageModel.setModule` is a function enabled in graphQL resolvers, so it would be accessed in `gatsby-node.js` inside the `creatSchemaCustomization` or `createResolvers` hooks
  ```js
  context.pageModel.setModule({
    source: 'abs/path/to/module',
    type: "default" | "named" | "namespace",
    importName: 'nameOfImport' // only if type == 'name'
  }); // returns a string identifier
  ```

- `getModule` is a function which can be imported from gatsby, and can retrieve the module by name
  ```js
  import { getModule } from 'gatsby';

  const Component = getModule('uid-returned-from-setModule');
  ```
- needs `process.env.GATSBY_EXPERIMENTAL_QUERY_MODULES = 1` set, in `gatsby-config.js`