Does a React.js app get entirely shipped to the browser on request?

Question

This is going to sound like a really dumb question but does the entire React app get shipped to the browser on first page load? Or is it shipped to the browser as-needed? If it is shipped as-needed then who decides what is needed when?

Let's say its a 3-pager. (e.g. /login, /users, /users/:userId).

I can probably just inspect the network calls or curl my server... but I consider that anecdotal and would like to get a more comprehensive idea.

Answer 1

This is not a problem specific to React, and is called choosing a bundling strategy, which translates to how you ship to the browser the resource files (js, css etc). In demand vs full preload vs a mix of the former ... It really depends on how you structured your app. For example, there are many apps which load the different parts of the application route based. This would be doing it in demand. There are pros / cons to the different approaches, and you should generally consider your bundle size, caching strategies etc.

I suggest you look at webpack, which is kind of today's standard for achieving this.