Static vs Dynamic Rendering
The Course is launching in Early Access! 🎉
The Modern Full Stack Next.js Course is launching in Early Access only to the folks on the waitlist in a couple of weeks.
Feedback
Curriculum
Let's explore the difference between Static and Dynamic Rendering with a practical example a bit more.
I want to help you truly understand the differences so it serves as a solid foundation for the rest of the course.
Below is an interactive demo where you can generate mock products and see how they're rendered differently in Static and Dynamic contexts.
Here is a simple app called Mocky which generates mock products and renders them in a grid. We're rendering the same data in two different ways: Static and Dynamic.
Now, you can use the slider to generate different number of mock products and observe how the data is rendered differently in Static and Dynamic contexts. The slider automatically updates the number of products and the timestamp based on the type of rendering.
Note the build time and the number of products rendered in both Static and Dynamic sections.
Number of Products: 4
Generated at: 12:00:00 AM (Build Time)
Note: This data would not change after build
ID: 1
ID: 2
ID: 3
ID: 4
Generated at:
In Static Rendering, the build time is 12:00 am ⏰ as that's when we kicked off the build.
In Static Rendering, the data is generated at build time and not fetched from an API. This means that the data will not change after the build is created. This is why Generated at time does not change.
On the other hand, in Dynamic Rendering, the data is fetched from an API on each request. This means that the data will change on each request. This is why Generated at time changes and also why the number of products changes.