Part 104: Enhancing Static Page Updates with Next.js: A Deep Dive

[App] Server Actions

[App] Server Actions

In today's fast-paced digital world, maintaining an up-to-date user interface is crucial for web applications. Next.js offers powerful tools to manage page revalidation and server actions, allowing developers to keep static pages fresh and responsive to user interactions. In this blog post, we’ll explore how to manage static content updates effectively using Server Actions and the revalidatePath function in Next.js.

Understanding Page Revalidation with Server Actions

Previously, we discussed how to use the redirect function in Server Actions to re-render pages dynamically with new data. This is great for immediate user feedback, but what about ensuring that these updates persist across sessions and different users? Let's dive deeper into this concept.

Cleaning Up Test Data

While testing, we often populate our database with sample data. Here's a quick method to clean up those test entries using SQLite:

1. Open your database: Use the terminal to navigate to your working directory and open SQLite.

   sqlite3 dev.db

2. Delete test data: Use SQL commands to remove specific entries. For instance, to delete comments from a user named "Dan":

   DELETE FROM Comment WHERE user = 'Dan';

3. Verify deletion: Run a SELECT query to ensure the data has been removed:

   SELECT * FROM Comment;

This process ensures a clean slate for further testing or deployment.

Static Page Generation and Revalidation

When building your application for production using npm run build, Next.js pre-renders pages based on the current state of your data. This static generation is efficient but doesn't automatically reflect changes made to the database post-build.

Dynamic Updates with Server Actions

When a user submits a form, the Server Action handles the request, updates the database, and uses redirect to re-render the page with fresh data. However, this dynamic update is not cached, meaning it won't persist across user sessions or page reloads.

Here's how you can implement this:

// components/CommentForm.jsx

import { revalidatePath } from 'next/cache';
import { redirect } from 'next/navigation';
import { createComment } from '@/lib/comments';

export default function CommentForm({ slug, title }) {
  async function action(formData) {
    'use server';
    const comment = await createComment({
      slug,
      user: formData.get('user'),
      message: formData.get('message'),
    });
    console.log('created:', comment);
    revalidatePath(`/reviews/${slug}`);
    redirect(`/reviews/${slug}`);
  }

  return (
    <form action={action}
      className="border bg-white flex flex-col gap-2 mt-3 px-3 py-3 rounded">
      <p className="pb-1">
        Already played <strong>{title}</strong>? Have your say!
      </p>
      <div className="flex">
        <label htmlFor="userField" className="shrink-0 w-32">
          Your name
        </label>
        <input id="userField" name="user"
          className="border px-2 py-1 rounded w-48"
        />
      </div>
      <div className="flex">
        <label htmlFor="messageField" className="shrink-0 w-32">
          Your comment
        </label>
        <textarea id="messageField" name="message"
          className="border px-2 py-1 rounded w-full"
        />
      </div>
      <button type="submit"
        className="bg-orange-800 rounded px-2 py-1 self-center
                   text-slate-50 w-32 hover:bg-orange-700">
        Submit
      </button>
    </form>
  );
}

Persisting Updates with revalidatePath

To ensure that updates persist and are available to all users, use the revalidatePath function. This tells Next.js to regenerate the static page and cache the updated version:

// components/CommentForm.jsx

revalidatePath(`/reviews/${slug}`);

This function revalidates the specified route, updating the cached static page. So, when users access the page again, they see the latest version with all new comments included.

Testing in Production Mode

To see these updates in action, build your app and start the server in production mode:

1. Build your app:

   npm run build

2. Start the server:

   npm start

By submitting a form in production mode, you can verify that the page updates dynamically and that changes are cached for subsequent requests.

Conclusion

The combination of Server Actions and revalidatePath in Next.js provides a robust solution for keeping static pages updated with dynamic content. This approach not only enhances the user experience by providing immediate feedback but also ensures that the latest data is available to all users. By leveraging these tools, developers can create applications that are both efficient and responsive to change.