I am developing a Single Page Application with React + Redux + Webpack. Webpack is great tool to package all stuffs but i couldn't figure out some pt
my application simply construct a parent page and once user select the function from top menu, particular function will launch as a new tab within the tab container and the tabs itself require interaction. let say when tab A complete something, tab B has to refresh part of the information.
My drafted idea is that each function is BIG component of React and the parent component controls which function (component) should be append to the tab container. But i imagine the problems may comes if i use Webpack to bundle the whole application into 1 .js file, the .js file size would be very HUGE even if i split the vendor source bundle into external resources
i believe it is common problem for Single Page Application by using Webpack and there should have better way to solve this.
Please kindly correct me if anything i misuse React + Webpack
When webpack compiles/bundles your code in production mode it will be much smaller than the bundle sizes you're currently seeing. Also if you're concerned, check out Preact (https://preactjs.com/) which is API-compatible with React but much smaller
Webpack supports dynamic imports which can be used to load code on demand, e.g. when a top-level tab is opened. That way your initial js bundle stays small and the application can start very quickly.
https://webpack.js.org/guides/code-splitting/#dynamic-imports
Related
So I get the difference between next build && next export and next build && next start from here.
In short, next build && next export generates a fully static app which does not require a server to host, whereas next build && next start starts a server which renders and serves content.
My question is then, how is next build && next export different from just using React? Seems both approaches generate static files (html, css, js). If I want to optimize SEO, is next export better than using react?
There are many ways to create a React web app. And there are many types of them as well.
Client-Side Rendering
Noticeable toolchain: Create React App
Everything is done on the client side. You send a blank HTML file and various JS bundles to the browser. And the browser parses the bundle and renders contents on the HTML and presents it to the users.
It takes less effort to set up so it best suits small projects.
This is properly what you were referring to when you said: "just using React".
Server-Side Rendering
Noticeable Toolchain: Next.js
Most of the works is done on the server-side. When a user requests to view a page, the server generates the need HTML file dynamically with static contents in it. Then, it sends the file to the user together with JS bundles for interactive content. The browser then attaches those JS to the HTML and present it to the users.
It requires far more effort to set up compared to Create React App. It best suits mid to large projects.
Static Site Generator (Prerender)
Noticeable Toolchain: Gatsby
Similar to Next.js, but instead of generating the HTML dynamically. It generates ALL OF THEM at build time and just sends it to users upon being requested.
This property has the best performance overall. But it can become a nightmare when the site is growing bigger and have hundreds of pages. Building a large, static Gatsby site takes ages to complete.
p.s. Next.js is also capable of generating static sites, but why don't you pick the right tool which is designed and optimized for generating a static site in the first place?
Answering my own question after I tried the following:
Launch a create-next-app then do next build && next export
Launch a create-react-app then do yarn build
Compare out/index.html in the next app and build/index.html in the react app
I found out that out/index.html actually contains all the static contents, whereas build/index.html contains nothing but <script> elements in its <body>. Everything including paragraphs (<p> elements) are later generated (or hydrated) when opened in the browser.
So in conclusion, even though both Next and React can be used to generate static site (SSG), Next is still better for SEO purposes since the contents are already in the html file.
Next.js can be used as static side builder (in the case you are referencing) which means it will generate all of you html at the time of build and along provide some performance features.
React(if not used on server) will always just have 1 HTML page which then loads of all your App(or chunks if you are code splitting) when the client requests it.
If you are not familiar about the concept read more on Static side building.
For SEO purposes using Next.js with either static or server side rendering would be the best approach since everything is prebuilt and easily accessible by robots(Although Google bot should already read javascript apps as well).
I've been trying to optimize my code based on the official guide: https://reactjs.org/docs/code-splitting.html
My app only displays a login form at the beginning. So having it load the whole app is pointless. It would be ideal for it to just load enough for it do display quickly (React, HTML, and CSS - the login form does not use any of the UI widgets we use inside). And in the background, prefetch the rest of the code while the user is logging in.
But the problem seems to be (I think) that webpack tries to create a "vendor" bundle with everything in it, and this includes React and the rest of the UI widget library. So even though I can try to split with dynamic components loaded with React router, all this does is split my code. The libraries for all components (even the login form) are all in the main bundle, and all of them reference this bundle anyways.
How can I split my code in such a way that the login form will load only what it actually requires to work, and then the rest (ideally) silently on the background while the user is entering their credentials?
Every time I search about this I get something related to react router and lazy loading. Isn't there a way to create an entirely separate page independent of index.js?
I created admin.js within my react project. If I go to http://localhost:3000/admin, it still loads index.js. I quite do not understand this bit of react if it is possible.
No, this is not possible without router. And here is why: your index.js has nothing to do with what is loaded in the browser.
When navigating to http://localhost:3000 your dev server actually serves a index.html to your browser. In it is a reference to a bundle.js (or however you name it) containing a bundled version of your .js files. So, http://localhost:3000/admin references to a admin.html which does of course not exist (unless you create it). But, doing this has several disadvantages over react-router. Because at build (or bundle) time index.js and admin.js will be two separate apps. Two separate bundle.js. Twice the amount of work needed to package it. Twice the amount of (maybe generated) .html files. Means no shared data at all. Twice the loading time in your browser. And many more.
I'd opt for react-router ;)
Edit: Of course it is not exactly twice in the points mentioned above. I am aware of that. But you get my point.
So the question is if it is possible to split a React app into two different separate apps hosted on two different hosts, where the app A is a kind of a frame which controls the app B and C in the future. I have a problem, where I would like to make a common fundament for both apps (the A app) and then load two other as a content of it. It would be as if I had lazy loading with a bundle fetched from a different place. I was thinking about three main possibilities:
Iframe
Single SPA project from github
using ReactDOM.render method
I am not sure if it is possible at all, beacuse there still may be a problem with React Router - does the inside app have access to manipulate the browser routing?
It is quite possible to split your react Application into multiple smaller react applications.
Suppose you have a react application such as an e-commerce platform . You can choose to write the cart Page using a separate react-App and the products page using another separate react app and integrate them together using Module Federation Plugin webpack/lib/container/ModuleFederationPlugin.
A good reason to do something like that would be to develop different parts of your application in isolation ..and they can be taken care by different teams altogether.
There is a udemy course that teaches you exactly that. Very much recommended. You can make react dependency as singleton to avoid several installs of react.
All 3 of these options you've stated are valid and can be used to share components but there are few disadvantages to each one, for example- iFrames makes it hard to create responsiveness, ReactDOM splits your app so that the different parts won't have the same global scope...
Module-Federation is the best and most efficient way to share remote components that i know of, here is a github link to a basic project.
The MF plugin makes use of webpack's abilities, which means that the shared components are being consumed as runtime objects of the app's scope, rather then as a promise of an iframe.
NOTE: Debugging and updating a Module Federation project is a much deeper task then debugging a create-react-app application, you'll need to share dependencies correctly and remember to update desired changes at all the right places all the time.
This is not possible. Each react app can only have a single package.json in the hierarchy. if you nest it, the app will fail and say you have several installs of react. what you should do is think more react minded and objecty. You can have a folder for common components to share inside src/. You can also have src/A which is one "app". src/B which is another.
What you described in your question is exactly what you should do, just dont think of it as a react app separation, rather a seperation of component and app inside the src folder. App A can be comprised of components from /components as well as App B.
I am planing to develop a huge app (Let's say more than 100 pages with a lot of JS charts and maps) using React, React-Router and Webpack. I believe the size of final JS file is going to be so large and that is going to be so annoying for User during first page load.
Is there any way to load the final JS partially, for example based on the selected route? or I should stick to server-side rendering and using some other libraries like PJAX? I appreciate any other solution as well.