Traditional React Applications

In a traditional React website, the client is served a static bundle of files (yes - static!) which never changes (except for when you update the code 🤪).

This static bundle will include extremely bare-bones HTML, often just a single empty div. Then the JavaScript kicks in, runs React-DOM to populate the DOM, and makes fetch requests to the API server to populate the content. Powerful interactive websites with dynamic content can be displayed this way, even though the bundle that the client initially receives is in fact static.

Check out a react website for a live example. This is literally the default website created when you run the create-react-app tool, unaltered by the stoats. It simply took these two commands to create it:

npx create-react-app .
npm run build


Visit the website, open the dev tools, and refresh the page. Inspect the network requests, especially the HTML in the document request. You will see that there is essentially no HTML, which means that when you navigate to the page, you have to wait for the JavaScript to load and run before any content will be rendered. If you don't have JavaScript enabled, you can't even see the website at all! You can try this with the dev tools as well.

This really highlights the difference between NextJS and a traditional React website.

Back
5