Understand Next.js in just 5 minutes

Check my last post on next.js if you are new

There are 4 important things in next.js that makes it special , in this post i will give both analogy and it's real use

1) SSR

2) SSG

3) ISR / ISG

4) CSR

Now what are these

1. SSR (Server Side Rendering)

Analogy = when you go to a restaurant and order something , chef (server) cooks the meal(content) and bring it to you to your table and you(browser) are now ready to eat

Meaning = server prepares entire webpage with all it's content before sending it to webpage so basically it is fast because my browser need not to wait for multiple requests to complete , it happens all in one go

2. CSR ( Client Side Rendering)

Analogy = basically it is like ordering a meal and then waiter will bring all of the parts one by one like first he brings salad , then main meal and then desert , so that is the in CSR you might want to wait compared to SSR

Meaning = Basic structure of website is sent first and then calls are made to get content and then JS does it's magic and assembles web page

3. SSG ( Static site generation)

Analogy = it's like restaurant menu's so they are already present readymade and kept on some table and when a customer asks for menu waiter will give this menu which is already pre made

Meaning = Server will generate all the webpages in advance in build time and saves them as static files and when you request a page it won't delay but give you the page instantly

4. ISR ( Incremental Static Regeneration)

Analogy = In a Restaurant if there were less sales today and they don't sell the food they won't keep those exact foods for tomorrow instead they make new ones like always keeping them fresh

Meaning = Next.js will allow some pages to be regenerated at run time based on user request , even if a page is pre made they have capacity to be updated on fly when data is present , it is like constant refreshment.

Yup that's it , hope these help in your next.js interview

Thank you , god's great