Next.js: Kemas kini komponen pelayan selepas komponen klien mengubah suai data

Question

Saya masih cuba memahami senario ini. Bolehkah sesiapa mencadangkan cara yang betul untuk melakukan ini dalam Next.js 13?

Saya memaparkan senarai pengguna dalam komponen pelayan, contohnya seperti ini (menggunakan MongoDB):

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

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

Pada halaman yang sama saya juga menentukan komponen pelanggan untuk menambah pengguna:

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

Kedua-duanya dipaparkan bersama dalam halaman komponen pelayan, seperti yang ditunjukkan di bawah:

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

Bagaimanakah saya harus "memuat semula" atau "memberitahu" UsersList bahawa pengguna baharu telah ditambahkan pada koleksi untuk memaksanya menunjukkan pengguna baharu/dikemas kini?

Answer 1

https://stackoverflow.com/a/75127011/17964403 Ini bagus untuk bermutasi pada sisi klien, tetapi jika anda ingin melakukan sesuatu seperti mencari/menapis menggunakan input daripada klien, dan ingin mengambil semula data yang sama, anda boleh melakukan sesuatu seperti

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

Dalam komponen pelayan anda akan menerima parameter carian sebagai prop, lihat jika parameter carian wujud, jika wujud kemudian lulus parameter itu dalam panggilan ambil dan anda akan mendapat item yang ditapis.

Answer 2

Untuk menggambarkan data yang dikemas kini oleh komponen klien pada komponen pelayan, anda boleh menggunakan router.refresh()，其中router是useRouter(). Berikut ialah contoh menggunakan apl senarai tugasan:

// 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>
  );
}

⚠️: Cache hasil yang sama mungkin dijana semula jika permintaan pengambilan dicache . Inilah sebabnya cache: 'no-store'cache: 'no-store' dalam contoh ini