First time load in React app, Does it load the whole application?

In react applications… when it loads to a user browser, this user is no longer in need to reach the server to render HTML pages as react do this for him. am I right?

So, does this mean when a user visits a website the whole website will load on his browser?, Or at least the App.js and all components imported in it?, so react can easily switch between these components.

And if it is, what will happen in huge projects?, This will make the first time load very slow specially when the components inside the App.js have also nested components and these nested components have nested ones…etc.
And how big sites manage this?

yup it loads the whole application.

with react you can use javascript to conditionally render html so that the browser doesnt have to make a new request to the server everytime you need to open a new page

1 Like

Doesn’t this create a problem?, as loading the whole website will be slow with huge websites…
and how huge projects manage this?

i guess you can say that the few extra seconds spent on the initial download but having each page load instantly some what compensates for having to reload the whole page when you need new html.

also react allows for the conditional rendering of small segments of your page which gives you a lot more design options than with plain html

…also browsers load javascript pretty fast these days, so if youre file is really that huge one should probably consider restructuring the app or optimizing with techniques like minifying the files to make for faster load times.

there are definitely tradeoffs to consider with each approach so react isnt necessarily a one-size-fits-all option when it comes to web/app development

1 Like

React is just a library to render UI.

Don’t get confused with all the external libraries built for it by the community and all its possibile usage that they offers.

As they state on their add react to a website page:

The majority of websites aren’t, and don’t need to be, single-page apps. With a few lines of code and no build tooling , try React in a small part of your website. You can then either gradually expand its presence, or keep it contained to a few dynamic widgets.

Using React doesn’t mean having to write single page application.
You can still have a classic HTML page with some widgets in it powered by React.

However if you are using a building tool an your bundle is growing too much, you can leverage code splitting so your bundles can be dynamically loaded at runtime.

Finally, you can render React on a Node server through react dom server.


@alkapwn3d @Marmiz

Thank you guys for helping :smiley: