Next.js : Mettre à jour le composant serveur après que le composant client a modifié les données

Question

J’essaie toujours de comprendre ce scénario. Quelqu'un peut-il suggérer quelle est la bonne façon de procéder dans Next.js 13 ?

J'affiche une liste d'utilisateurs dans un composant serveur, par exemple comme ceci (en utilisant MongoDB) :

// UsersList.jsx
const UsersList = () => {
  const users = await usersCollection.getUsers()

  return (
  <div>
    {users.map(user) => <div>{user}</div>}
  </div>
  )
}

Sur la même page j'ai également défini le composant client pour l'ajout d'utilisateurs :

// UsersEdit.jsx
'use client'
const UsersEdit = () => {
  const handleAdd() => // calls POST to /api/users
  return // render input + button
}

Les deux sont affichés ensemble dans la page des composants du serveur, comme indiqué ci-dessous :

// page.jsx
const Users = () => {
  return (
  <div>
    <UsersList />
    <UsersEdit />
  </div>
  )
}

Comment dois-je « recharger » ou « notifier » UsersList qu'un nouvel utilisateur a été ajouté à la collection pour la forcer à afficher les utilisateurs nouveaux/mis à jour ?

Answer 1

https://stackoverflow.com/a/75127011/17964403 C'est idéal pour muter côté client, mais si vous souhaitez faire quelque chose comme rechercher/filtrer en utilisant les entrées du client et que vous souhaitez récupérer les mêmes données, vous pouvez faire quelque chose comme

const [searchterm, setSearchterm] = useState("");
const handleSearch = (e) => {
   e.preventDefault();
   if(!searchterm)return
   router.push(/home?search=`${searchterm}`)
}

Dans le composant serveur, vous recevrez le paramètre de recherche comme accessoire, voyez si le paramètre de recherche existe, s'il existe, transmettez ce paramètre dans l'appel de récupération et vous obtiendrez les éléments filtrés.

Answer 2

Pour refléter les données mises à jour par le composant client sur le composant serveur, vous pouvez utiliser router.refresh()，其中router是useRouter(). Voici un exemple d'utilisation d'une application de liste de tâches :

// app/page.tsx

import Todo from "./todo";
async function getTodos() {
  const res = await fetch("https://api.example.com/todos", { cache: 'no-store' });
  const todos = await res.json();
  return todos;
}

export default async function Page() {
  const todos = await getTodos();
  return (
    <ul>
      {todos.map((todo) => (
        <Todo key={todo.id} {...todo} />
      ))}
    </ul>
  );
}

// app/todo.tsx

"use client";

import { useRouter } from 'next/navigation';
import { useState, useTransition } from 'react';

export default function Todo(todo) {
  const router = useRouter();
  const [isPending, startTransition] = useTransition();
  const [isFetching, setIsFetching] = useState(false);

  // Create inline loading UI
  const isMutating = isFetching || isPending;

  async function handleChange() {
    setIsFetching(true);
    // Mutate external data source
    await fetch(`https://api.example.com/todo/${todo.id}`, {
      method: 'PUT',
      body: JSON.stringify({ completed: !todo.completed }),
    });
    setIsFetching(false);

    startTransition(() => {
      // Refresh the current route and fetch new data from the server without
      // losing client-side browser or React state.
      router.refresh();
    });
  }

  return (
    <li style={{ opacity: !isMutating ? 1 : 0.7 }}>
      <input
        type="checkbox"
        checked={todo.completed}
        onChange={handleChange}
        disabled={isPending}
      />
      {todo.title}
    </li>
  );
}

⚠️ : Le même cache de résultats peut être régénéré si la requête de récupération est mise en cache . C'est la raison pour cache: 'no-store'cache: 'no-store' dans cet exemple