Understanding the new Suspense SSR architecture in React 18

React's server-side rendering (SSR) is preferred by many developers to improve performance & SEO. SSR involves 4 steps i.e. fetching your app data & rendering to HTML on the server and loading the JavaScript code & hydration on the client-side. Before React 18, each of these steps had to be completed one after other for the entire app. This could cause the bigger & slower part of your app to block the other parts, affecting the UX.Current optimisations in React 18 allow you to use Suspense to split your app into smaller parts that will go through these steps independently. Users can now view the content sooner and start interacting with it much faster.