Static vs Dynamic Rendering

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.

Mocky Demo

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.

Here's how it works:

• The "Static Rendering" section shows how the data would be rendered at build time
• The "Dynamic Rendering" section shows how the data is fetched and rendered on each request
• Notice the timestamp differences between static and dynamic renders

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.