Learn how easy it is to do Server Side Rendering with React and NextJS
Client-side rendering is a way of rendering the content of a web application on the client-side(browser). What it means is when a user makes the initial request the server will return a blank page or a loading screen with some scripts.
<meta charset="utf-8" />
<title>Client side rendered SPA </title>
The page renders and delivers content to the user after the scripts are fully loaded and compiled. This might lead to a slow initial render time but the upside is that when another request to the server is made, only the content will need to travel from server to client. The script will be responsible for rendering the response. This in turn makes all the subsequent requests after the first one super fast. The major downside of this approach is the script tends to grow as the application grows which can make it less performant as it scales.
A solution to this approach is a hybrid of SSR and CSR which is called a Universal or Isomorphic app in some circles. In an Isomorphic app, we can eliminate the slow initial load time by Client-side rendered applications by rendering the initial HTML from the server and then letting the client take over rendering responsibilities thereby eliminating the frequent requests that have to be made to the server in SSR apps.
Benefits of SSR
Cons of SSR
Learn how easy it is to do Server Side Rendering with React and NextJS. Server-side rendering (SSR) is a popular technique for rendering a client-side single page application (SPA) on the server and then sending a fully rendered page to the client.