natterstefan / loadable-components-example

This example repository illustrates how to use loadable-components with an SSR app and TypeScript.

Loadable Components SSR TypeScript Example

This example repository illustrates how to use loadable-components with an SSR app and TypeScript.

Features

• loadable-components with full support for Client- and Server-Side Rendering
• ReactJS Frontend
• NodeJS Backend
• TypeScript
• change webpack's publicPath during runtime
• with loadable routes (home and about), as well as loadable components (compare when and how the image is loaded in the client).

Start

yarn
yarn build
yarn start

# or start the watch mode
yarn watch

Open http://localhost:3000 and check out the network tab in your dev tools.

Preview

References

Docs

• loadable-components
  • Server Side Rendering

Examples

• Server Side Rendering
• Server Side Rendering with Apollo

Tutorials

• Code splitting React components with TypeScript and NO Babel
• Typescript plugin for working better with styled-components react-loadable and loadable-components.

Typescript Plugins

• typescript-loadable-components-plugin
• typescript-react-loadable-plugin
• or https://github.com/Quramy/loadable-ts-transformer

Issues

• Typescript: nodeExtractor.requireEntrypoint returns undefined

Misc

• How To Improve React App Performance with SSR and Rust (Example)
• React Server Side Rendering with Koa Part II
• TSC Watch, Nodemon and Concurrently
• Alternative: react-loadable

Tasks and Ideas

• use ForkTsCheckerWebpackPlugin and use only babel-loader (Example)
• Evaluate if we watch mode can be optimized

License

MIT