this is how i am learning next.js
when i first heard about next.js two main things popped up in front of me one is server side rendering and other static site generation , in this particular i will explain it so clear that even after 10 years you'll remember what i've said and also why next.js even exist when we have react , we'll discuss everything in this series so without wasting a sec let's gooooooooooooooooooo.
You see react was all about making webapps that were interactive and getting dynamic data playing with data and UI layer react was all fun but in real life there are Atleast on an average like 30% websites that needs dynamic interaction suppose for example if i take example of any social media site that is an example for dynamic interaction and constantly changing both UI layer and Data layer but normal websites like blogs , Wikipedia page , government sites or any portfolio sites whatever these almost or don't take that much of dynamic interaction so for that reason and many other they introduced next.js
Okay answering the second normal question what actually is next.js ? see next.js is a fullstack framework built on react , yeah you heard it right . Next.js offers full stack capabilities and also these 2 buzz words SSR and SSG , let's discuss what are they and why they make next.js beautiful
i know it's a lot but hold on ,fun begins now , i am so much excited
1) Server side rendering (remember these steps to make an analogy)
Server-side rendering (SSR) is like preparing a dish in a restaurant kitchen before serving it to the customer. Imagine you order a pizza. With SSR, the kitchen (server) prepares the pizza (web page) with all the toppings (content) and sends it directly to your table (browser). So, when you receive the pizza (web page), it's ready to eat (display) right away. This approach helps make web pages load faster because the server does most of the work before sending them to your browser.
Normal websites typically use client-side rendering (CSR). It's like ordering a pizza and having the ingredients sent to your table. With CSR, your browser receives the basic dough and sauce (HTML and CSS) first. Then, it waits for additional toppings (JavaScript) to arrive before assembling the pizza (rendering the webpage). This can sometimes lead to a slower initial loading time compared to SSR, as the browser needs to do more work to display the webpage.
1. server side rendering will render a page on a server and will send that page to client's browser
and whenever user requests a page the server dynamically generates html content
so this approach will make search engine crawl and index the content better which will indirectly help in SEO
SSR is commonly used in Next.js applications, where pages can be pre-rendered on the server and then served to clients.
2) Static site generation
Static site generation (SSG) is like making a bunch of pre-made pizzas ahead of time and putting them on display in a buffet. Imagine you walk into a pizza buffet, and all the pizzas are already there, fully prepared and waiting for you to pick one. Similarly, with SSG, the web pages are generated in advance, before they are requested by the user. This means that when someone visits the website, the pages are already created and can be served instantly, without the need for any server-side processing. It's a bit like having a ready-to-eat pizza available without having to wait for it to be made to order. This approach can result in extremely fast load times and improved performance for websites
SSG involves generating HTML files for each page of a website at build time
During the build process, the server fetches data, renders React components, and generates HTML files for all pages in the application
These HTML files are then served to clients without the need for server-side processing at request time.
Next.js provides built-in support for SSG, allowing developers to pre-render entire pages or specific parts of a page at build time, resulting in faster page loads and better SEO
That is all about next.js and this journey involves all my learnings regarding next.js