Next.js 13 應用目錄下依賴useEffect 的服務端組件如何制作？

Question

我正在嘗試在 app 目錄中編寫一個 Next.js 13 時事通訊頁面，該頁面使用依賴於 useEffect 的服務器端組件。 useEffect 從 REST API 獲取數據以獲取將呈現頁面內容的時事通訊。 我正在使用的代碼如下。 當我需要“使用客戶端”進行交互時，我無法弄清楚如何配置服務器端組件才能工作。 如何確保在將服務器端組件發送到客戶端之前呈現服務器端組件？

代碼：

import Navbar from '@/components/navbar'
import Footer from '@/components/footer'
import Pagination from './pagination'
import IssueCards from './issueCards';
import { useState, useEffect } from 'react';
import axios from 'axios';


const Newsletters = () => {
    const [issues, setIssues] = useState([]);
    const [currentPage, setCurrentPage] = useState(1);
    const [issuesPerPage, setIssuesPerPage] = useState(5);

    useEffect(() => {
        const fetchIssue = async () => {
            const res = await axios.get(`${process.env.NEXT_PUBLIC_BACKEND_API}/newsletters`)
            setIssues(res.data)
        }
        fetchIssue()
    }, [])
    
    // Change page
    const paginate = (pageNumber) => setCurrentPage(pageNumber);

    const indexOfLastIssue = currentPage * issuesPerPage;
    const indexOfFirstIssue = indexOfLastIssue - issuesPerPage;
    const currentIssues = issues.slice(indexOfFirstIssue, indexOfLastIssue)

    return (
        <>
            <Navbar />
            <div className="newsletter-container" id='newsletter-container'>
                <h1>Newsletters</h1>
                <hr></hr>
                <div className="newsletter-wrapper">
                    <IssueCards issues={currentIssues} />
                    <Pagination 
                        issuesPerPage={issuesPerPage} 
                        totalIssues={issues.length} 
                        paginate={paginate} 
                    />
                </div>
            </div>
            <Footer />
        </>
    );
}

export default Newsletters;

Next.js 13 服務端組件依賴 useEffect 的 props 如何保證內容在發送到客戶端之前渲染完成？

我嘗試按照服務器和客戶端組件上的Nextjs 文檔進行操作，但我不確定如何將 props 信息傳遞到服務器上。

Answer 1

不幸的是，服務器組件不允許使用諸如useEffect類的鈎子，請參閱此處的文檔。

您有兩個主要選擇：

1. 新的數據獲取方式
   服務器組件允許一種在組件中獲取數據的新方法，如這里所述。
   這種方法看起來像這樣：

    async function getData() { const res = await fetch('https://api.example.com/...'); // The return value is *not* serialized // You can return Date, Map, Set, etc. // Recommendation: handle errors if (.res.ok) { // This will activate the closest `error;js` Error Boundary throw new Error('Failed to fetch data'). } return res;json(); } export default async function Page() { const data = await getData(); return <main></main>; }

2. 恢復到客戶端組件
   您的另一個選擇是在文件頂部use client指令，並將 Newsletter 作為客戶端組件。 當然，通過這種方式，您將無法獲得服務器組件的好處，但這可以避免您不得不大幅更改代碼。 另外，請記住服務器組件仍處於測試階段。