recherche

Maison  >  Questions et réponses  >  le corps du texte

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

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 ?

P粉832212776P粉832212776455 Il y a quelques jours855

répondre à tous(2)je répondrai

  • P粉904405941

    P粉9044059412023-10-27 13:25:50

    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.

    répondre
    0
  • P粉345302753

    P粉3453027532023-10-27 12:33:01

    Pour refléter les données mises à jour par le composant client sur le composant serveur, vous pouvez utiliser router.refresh(),其中routeruseRouter(). 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

    répondre
    0
  • Annulerrépondre