New React docs faux SPAs do not exist anymore
React simply launched their new docs at https://react.dev/. Whereas it appears to be like nice and packs a whole lot of enhancements, one part that caught the group’s consideration is “Start a New React Project”. The strongly really useful technique to begin a brand new React mission is to make use of a framework corresponding to Subsequent.js, whereas the standard route of utilizing bundlers like Vite or CRA is pretty strongly discouraged.
Subsequent.js is a good framework, and its rise in recognition is due in a big half to the return of Search engine marketing optimization through Server-Facet-Rendering (SSR) inside the collective developer conscience. And it positively does make sense to make use of a framework that gives SSR for static websites and pages that depend on Search engine marketing.
However what about typical Single Web page Apps (SPAs)? Dashboard-like instruments that dwell behind the auth (and don’t want Search engine marketing in any respect), and for which React was initially designed, nonetheless very a lot exist.
The brand new React docs – use a framework until your app has “uncommon” constraints
The brand new docs make a fairly sturdy declare for utilizing a framework when beginning a brand new React mission. Even should you learn via the “Can I take advantage of React with no framework” part (hidden behind a collapsed toggle by default), you need to undergo a wall of textual content convincing you why not utilizing a framework is a nasty thought, primarily as a result of lack of SSR. Solely then, in the long run, comes the piece mentioning different choices, corresponding to Vite and Parcel:
Even then, first you’ll need to admit your app has uncommon constraints (and no examples got of what that might be) earlier than you’re truly “allowed” to not use a framework. It feels very very like you’re doing it regardless of all of the warnings and that there truly isn’t a case the place it is best to do it.
Why SPAs (nonetheless) matter
SSR/SSG has been getting a whole lot of consideration currently and has been a flagship function of most new frameworks constructed on high of React. And rightly so – it has solved a serious subject of utilizing React for static & Search engine marketing-facing websites the place time to first content material (FCP) is essential.
However, the use case the place React, Angular, and different UI frameworks initially shined had been dashboard apps (e.g., mission administration techniques, CRMs, …) – it allowed for a radically higher UX, which resembled that of desktop apps.
Though interactive content-rich apps (running a blog platforms, marketplaces, social platforms) are as we speak a typical poster youngster demo app for frameworks, dashboard-like apps nonetheless very a lot exist, and there are extra of them than ever. 1000’s of firms are constructing their inside instruments every day, similar to new SaaS-es pop up daily.
Search engine marketing is basically irrelevant for them since all the pieces is occurring behind the auth layer, the place all the pieces is centered round workflows, not content material. SSR would possibly even be counter-productive because it places extra strain in your servers as an alternative of distributing the rendering load throughout the purchasers.
How then would you develop SPAs?
Historically, React was solely a UI library in your stack of selection. You’ll use CRA (or Vite these days) as a bundler/starter on your React mission. Then you definitely’d in all probability add a routing library (e.g., react-router) and possibly a state administration library (e.g., Redux, or react-query), and also you’d already be set fairly properly. You’ll develop your backend in no matter you select – Node.js/Categorical, Rails, or anything.
There are additionally new frameworks rising that target this specific use case (e.g., RedwoodJS and Wasp (disclaimer: that is us!)) whose flagship function shouldn’t be SSR, however relatively the abstraction of API and CRUD on information fashions, and getting full-stack performance from UI to the database, with additional options corresponding to straightforward authentication and deployment out of the field.
With a “go for Subsequent or you’re uncommon” and “you want SSR” message, React is making a robust sign in opposition to different options that don’t emphasize SSR as their important function.
So what’s the large deal? No person forces you to make use of SSR in Subsequent/Remix
That’s right, but in addition it’s true {that a} buy-in into a complete framework is a a lot larger step than simply choosing a UI library. Frameworks are (extra) opinionated and include many choices (code construction, structure, deployment) made upfront for you. Which is nice and that’s why they’re precious and why we’ll preserve utilizing them.
However, either side of the story ought to be introduced, and the ultimate name ought to be left to the developer. React is just too helpful, precious, and in style a device and group to permit itself to skip this step.
Need to keep within the loop? → Join our newsletter!