Rendering Modes in React

Let’s use a restaurant as an analogy.

• The food : the web pages
• Our table : client side
• The kitchen : server side

CSR (Client Side Rendering)

Let’s imagine we go to a shabu shabu restaurant. We order the package and the food materials are served directly in our table. We cook it with the hotpot in the table. After it’s cooked, we serve it in our plate. That is client side rendering, the client receive the packages, parsing it directly and serve the web pages. Example: create-react-app

SSR (Server Side Rendering)

Let’s imagine we are going to a conventional restaurant. We see the menu first, pick some menu we want to order, waiting for the food to be cooked, and finally the food are served from the kitchen to our table. That is server side rendering, we request the page, the server process the requested page, and then we are served with parsed web page. We need to wait for the server to process the page before being served to client side. Example: Next.js getServerSide

SSG (Static Site Generation)

Let’s imagine we are going to a fast-food restaurant. We just need to pick which one we want to eat, take the food and eat it right away. The menus are already cooked before we came. That is static site generation, the pages are really fast to load, it’s already built at build time (before being deployed). Example: GatsbyJS

ISR (Incremental Static Regeneration)

This one I cannot use a restaurant analogy because it will be horrible 😆. But the point of Incremental Static Regeneration is to combine the best of both SSG and SSR. With SSG, we get a fast served page but the data is static, if we want to update the page we need to re-build it again. With SSR, we get a page which serve dynamic data but we need to wait for the server to process the page first. With Incremental Static Regeneration, we can get a fast served pages, but also updates itself when the data are updated. It’s currently possible with Next.js since version 9.5 using getStaticPath + revalidate.