Maison > Questions et réponses > le corps du texte
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粉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.
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()
,其中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