Client vs Server Rendering

Let's learn how Next.js handles client and server rendering.

There are so many terms that are used with the term "Rendering". Let's break it down here.

Breaking down the terms

With all these rendering-related terms being thrown around, it can get confusing! Let's break it down into two main comparisons:

Server Rendering vs Client Rendering

The key difference here is about where things happen:

• Where is JavaScript downloaded?
• Where is HTML pre-processed?

Static Rendering vs Dynamic Rendering

This comparison is about when rendering happens:

• Does it happen at build time?
• Or does it happen at request time?

The cool thing about Next.js is that you're not locked into just one approach! You can mix these approaches based on your needs. We'll dive deeper into different data fetching methods later, which will make all of this even clearer.

Quiz 🧠