- read

The New React Documentation Ditches SPA Apps

Tom Smykowski 74

Back in the days if you visited a website, or web app, it had to reload the page each time you navigated to a different page. It was inconvenient for several reasons. One of these was that the whole content was refreshed, so you lost your scroll position and all the data, and it was slow.

Later an idea of SPA was born. Single-page applications don’t refresh the page, rather they are served with one HTML file, and one, or more JS and CSS files. The application is changing content of the app dynamically, so no refresh is needed. That’s how dynamic pages were born.

Unfortunately, there is a disadvantage to this method. Search engine crawlers are unable to index dynamic pages. In spite of all the declarations, Google, and other search engines are incapable of indexing and sensing an SPA website. So SPA always comes with a SEO penalty.

For that reason, some ideas evolved to use modern SPA libraries and frameworks like React, Angular, Ember and satisfy search engines. Also, having a server that serves sub-pages and loads only necessary data as needed, while preserving dynamics can sometimes improve SEO metrics and load speeds.

Of course not all use cases require SEO support and top load speeds. These are necessary for publicly available sites, like e-commerce stores or publishing sites. On the other hand apps you log in to, usually don’t benefit from SEO because they are not indexed, nor the slight improvement in speed doesn’t justify the cost of using a server to serve the initial page.

It means that there is a place to use SPA, and there is a place to use full-stack frontend frameworks like Next.js etc.

Surprisingly however, the new React documentation ditches SPA.

Something I’ve noticed during setting up a new React project lately, the new docs offer an instruction how to set up Next.js, Remix, Gatsby, and Expo. Two first solutions are full stack, SSR (server-side rendered) frameworks, Gatsby is a static site generator that grew to fully fledged SSR framework, while Expo is for building mobile apps.

Missing instructions on how to set up SPA was puzzling, especially because there’s no explanation why there is no info why it happened. Or maybe the authors decided it’s too…