In NextJS 13, how can I dynamically update data in a server-side rendered component? – Javascript

The Problem:

In NextJS 13, a developer has a server-side rendered component that displays a list of categories. They also have a client-side component with an ‘Add’ button that triggers a modal for creating a new category. The developer needs to find the best approach to create a new category on the server from the client component and dynamically display the newly created category in the server-side component without reloading the entire page.

The Solutions:

Solution 1: Re-render Server Component

To dynamically update data in a server-side rendered component, you can re-render the component by using the `getStaticProps` method. This method is called every time the page is visited, so any changes made to the data will be reflected in the rendered page.

Here’s an example of how you can use getStaticProps to re-render a server-side component:

export async function getStaticProps() {
  const data = await fetch('https://api.example.com/data');
  return { props: { data } };
}

In this example, the getStaticProps method fetches data from an API and then returns the data as props to the server-side component. The server-side component can then use the props to render the data on the page.

If the data changes, you can simply re-run the getStaticProps method to fetch the latest data. This will cause the server-side component to be re-rendered with the updated data.

Solution 2: Server Actions and revalidatePath

You can achieve dynamic data updates in NextJS 13 server-side rendered components using server actions and revalidatePath.

Server actions are experimental features that enable asynchronous operations on the server side. Here’s how you can implement this approach:

1. Enable Server Actions: Add this to next.config.js to activate server actions:

const nextConfig = {
  experimental: {
    serverActions: true,
  },
};

2. Server Action: Create an action in categories/actions.ts. This action will handle creating a new category:

export async function createCategory(formData: FormData) {
  try {
    const name: string = formData.get('name') as string;
    const prisma: PrismaClient = new PrismaClient();
    const _category: Category = await prisma.category.create({
      data: {
        name,
      },
    });
  } catch (error: any) {
    throw new Error(error.message ?? 'An unexpected error occurred');
  } finally {
    revalidatePath('/categories');
  }
}

3. Client-Side Form: Your AddCategoryForm will call this action upon submission:

export default function AddCategoryForm() {
  return (
    <form action={createCategory}>
      <input type="hidden" name="otherField" value="some value" />
      <label htmlFor="name">Add new</label>
      <input type="text" name="name" required/>
      <button type="submit">Add</button>
    </form>
  );
}

4. Server-Side Component: In your server-side component, page.tsx, you’ll maintain your category list and use revalidatePath to trigger a refresh:

export default async function CategoriesPage() {
  const categories: Category[] = await getCategories();

  return (
    <div>
      <AddCategoryForm />
      
      <ul>
        {categories.map((category) => (
          <li key={category.id}>{category.name}</li>
        ))}
      </ul>
    </div>
  );
}

5. revalidatePath: When the new category is created, revalidatePath will refresh the /categories URL, causing page.tsx to fetch the updated category list and re-render the page without a full refresh.

Video Explanation: