Dynamic vs Static Rendering

Great job! We've obtained some data and successfully displayed it to the user. However, we've encountered an issue. The problem stems from our static dashboard, which means that any updates to the data won't be reflected in the application.

Let's delve into the concepts of static and dynamic rendering.

Static Rendering

Static rendering means preparing and showing content before a user even asks for it. It's like making a bunch of sandwiches before people arrive at a party.

Example

Imagine you're hosting a picnic. Instead of making sandwiches when guests arrive, you prepare a bunch of sandwiches beforehand and put them on a table. When people come, they grab a pre-made sandwich. This makes it faster and easier for everyone.

Benefits

• Faster Websites: Like having ready-made sandwiches, pre-prepared content can be quickly and easily served to users;
• Less Work for Server: Since everything is prepared in advance, the server doesn't have to make sandwiches (generate content) for each person as they arrive;
• Better Search Engine Ranking: Search engines find it easier to understand and rank pre-made content, similar to having a well-organized picnic table.

Use Cases

Static rendering is great for things like static blog posts or product pages where the content stays mostly the same and is the same for everyone.

Dynamic Rendering

Dynamic rendering means creating content on the spot as users request it. It's like a chef making personalized dishes for each customer at a restaurant.

Example

Think of a restaurant where the chef cooks meals based on what each customer orders. The chef gets requests, cooks the meal, and serves it fresh. This is like dynamic rendering, where content is generated for each user visiting a page.

Benefits

• Real-Time Updates: Just like a chef can make a dish with fresh ingredients, dynamic rendering allows your application to display real-time or frequently updated data;
• Personalized Content: Like a chef making dishes based on customer preferences, dynamic rendering is great for showing personalized content like dashboards or user profiles;
• Access to User-Specific Information: It's like a chef asking customers for their preferences before cooking – dynamic rendering allows you to access information specific to each user, like cookies or URL search parameters.

Use Cases

Dynamic rendering is useful for applications where data changes often or where personalized content is important, like social media feeds or real-time dashboards.

Back to the Project

For our app, we always prefer to display the most up-to-date information.

When using @vercel/postgres, the caching rules are not predefined, giving us the flexibility to decide how data is handled – whether static or dynamic.

To make the dashboard dynamic, we can use a feature in Next.js called unstable_noStore. It allows us to skip static rendering. Here's how:

In the data.ts file, include the line import unstable_noStore from next/cache at the top. Then, use it in the data fetching functions to customize how the data is handled.

In Practice