Anyone have any experience converting a react app created with create-react-app to using server side rendering and code splitting via loadable-components? I know this is a general question, but mostly looking for general guidance or any major red flags for this approach. I'd like to keep the nice things you get out of box with create-react-app - especially the live reload dev environment - while adding in optimizations using SSR and code splitting. I was able to mostly get this working using express backend and handlebars templating, but I'm facing many challenges getting code splitting working correctly with this setup. Any hints / stories are appreciated!
Server side rendering and codesplitting using create react app and loadable components
1k Views Asked by Murcielago At
1
There are 1 best solutions below
Related Questions in REACTJS
- What is `_dereq_()` inside React?
- React TypeError: React.renderComponent is not a function
- React - saving a component in the ref callback
- React Rails component: manually triggering a re-render
- React, ES6 - getInitialState was defined on a plain JavaScript class
- How to get multiple selected options value in React JS?
- React.render replace container instead of inserting into
- reactjs datagrid use html
- props is not initialized in react component
- How to display xml data using Reactjs
- hooking up the data model in ReactJS - syntax
- ReactJS: How to use an immutable empty array or object
- How to use Sinon.js FakeXMLHttpRequest with superagent?
- React select onChange is not working
- ReactJS - Tutorial Comment System > Threaded commenting
Related Questions in WEBPACK
- RequireJS shim config in webpack
- Webpack Uglify plugin returns "Killed" on Ubuntu
- Log to node console or debug during webpack build
- Gulp with WebPack. Which should be building my coffee/jade etc.?
- Webpack: silence output
- Webpack: Must i specify the domain in publicPath for url() directive to work in CSS?
- webpack-dev-server & jsxhint: const '$__0' has already been declared
- Use Webpack to split out a module so that it can be loaded in a WebWorker
- oclazyLoad with webpack to support lazy loading for Angularjs is not working on minification
- How to make webpack to produce only one file and include all chunks?
- Reduce transpiled code helpers with babel and webpack
- webpack sass compliation stuck, however same works with similar other file also same problamatic sass file works with gulp-sass module
- Webpack html-loader returns full module definition
- Webpack: Create a bundle with each file in directory
- Include paths for imports in babel using webpack
Related Questions in CREATE-REACT-APP
- Error on npm run build with create-react-app
- What is the correct way to include jquery libraries including CSS when using create-react-app?
- How to include a frontend script when using create-react-app
- How to run reactjs (using create-react-app) on a server
- How can I add loader for React-FlexBox-Grid in webpack.config.dev.js file?
- How to access backend data in reactjs (via create-react-app's npm start)
- How to extend create-react-app?
- create-react-app and lite-server
- create-react-app not currently working
- Create react app `npm run build` only build favicon.ico file?
- Why babel-loader may ignore .babelrc?
- matchMedia not present when testing create-react-app component which contain react-slick?
- react-scripts: not found on create-react-app project on ubuntu?
- Hosting create-react-app on gh-pages
- How to configure create-react-app server to not redirect requests or URL stems?
Related Questions in SERVER-SIDE-RENDERING
- Rendering React.js clientside webapp with PhantomJS
- Elixir- phoenix server side rendering react using std_json_io and react-stdio
- Vue.js Server Side Rendering: document is not defined
- react server side rendering and hot reloading
- window, document and local Storage in React server side rendering
- React Context undefined in Server Side Render
- Server side rendering with React router
- React bundle.js resets whole DOM created by server side rendering
- Redux Server Side Rendering: Actions
- What options are there to render Javascript "document.write" code serverside with PHP?
- create-react-app Server Side Rendering
- Angular 4 Universal - Google Analytics / Client Side Only Code
- React server side rendering renders incorrect content
- SSRS textbox rotating incorrectly
- Browser history needs a DOM when server side rendering
Related Questions in LOADABLE-COMPONENT
- Are Next.js and Gatsby.js using the split code Loadable Component?
- How to call the public directory from functions directory in Google cloud functions
- Delaying the load of a @loadable/component
- loadable component require not found with webpack
- Getting error "Path" argument must be string while deploying React - Loadable components sample code in cloud functions
- 404 errors for the chunks files generated from @loadable/component
- @loadable/server pass the whole stats JSON to eval('require')(modulePath)
- why is Loadable Components throwing a requireAsync .then is not a function error
- Server side rendering and codesplitting using create react app and loadable components
- Some react Lottie Animations code-splitted with loadable crash on Gatsby development but work in prod
- SSR React Application using loadable library, throws “Cannot convert undefined or null to object” error intermittently on the server for Home Route
- React SSR blinks when starting client
- Loadable Components + SSR + Webpack 5 - duplicate main.js
- Is there a way to avoid blanks in react loadable components
- How to Lazy-Load a React Native module from a path stored in a variable
Trending Questions
- UIImageView Frame Doesn't Reflect Constraints
- Is it possible to use adb commands to click on a view by finding its ID?
- How to create a new web character symbol recognizable by html/javascript?
- Why isn't my CSS3 animation smooth in Google Chrome (but very smooth on other browsers)?
- Heap Gives Page Fault
- Connect ffmpeg to Visual Studio 2008
- Both Object- and ValueAnimator jumps when Duration is set above API LvL 24
- How to avoid default initialization of objects in std::vector?
- second argument of the command line arguments in a format other than char** argv or char* argv[]
- How to improve efficiency of algorithm which generates next lexicographic permutation?
- Navigating to the another actvity app getting crash in android
- How to read the particular message format in android and store in sqlite database?
- Resetting inventory status after order is cancelled
- Efficiently compute powers of X in SSE/AVX
- Insert into an external database using ajax and php : POST 500 (Internal Server Error)
Popular Questions
- How do I undo the most recent local commits in Git?
- How can I remove a specific item from an array in JavaScript?
- How do I delete a Git branch locally and remotely?
- Find all files containing a specific text (string) on Linux?
- How do I revert a Git repository to a previous commit?
- How do I create an HTML button that acts like a link?
- How do I check out a remote Git branch?
- How do I force "git pull" to overwrite local files?
- How do I list all files of a directory?
- How to check whether a string contains a substring in JavaScript?
- How do I redirect to another webpage?
- How can I iterate over rows in a Pandas DataFrame?
- How do I convert a String to an int in Java?
- Does Python have a string 'contains' substring method?
- How do I check if a string contains a specific word?
There is craco "an easy and comprehensible configuration layer for create-react-app".
Webpack custom configurations go into
craco.config.js, inside root folder.SSR is possible, you can check two related questions that might help you with your case:
Code splitting loads all chunk files on chrome but load them separately in firefox
Loadable Components SSR - chunkNames in Server Stats file different from Client stats file