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 ?
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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.
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