在客戶端取得資料

當您的頁面不需要做搜尋引擎優化、資料不需要提前做渲染,或是資料需要頻繁的更新時,在客戶端取得資料是非常方便的。與伺服器端渲染的 API 不同之處在於,您可以在元件 (component) 層級從客戶端取得資料。

在頁面 (pages) 層級取得資料的話,資料會在程式運行時就被抓取,頁面上的內容會隨著資料改變一起更新。 在元件層級取得資料的話,資料會在元件 mount 的時候被抓取,元件裡的內容也會隨著資料的改變而一起被更新。

在客戶端取得資料時必須記得,這有可能會影響您應用程式的效能。因為資料是在元件或是頁面 mount 時抓取,還有這些資料是不會進行快取的。

搭配 useEffect 在客戶端取得資料

下面的範例展示了如何搭配 useEffect hook 在客戶端取得資料。

function Profile() { const [data, setData] = useState(null) const [isLoading, setLoading] = useState(false) useEffect(() => { setLoading(true) fetch('/api/profile-data') .then((res) => res.json()) .then((data) => { setData(data) setLoading(false) }) }, []) if (isLoading) return <p>Loading...</p> if (!data) return <p>No profile data</p> return ( <div> <h1>{data.name}</h1> <p>{data.bio}</p> </div> ) }

搭配 SWR 在客戶端取得資料

維護 Next.js 的團隊同時也開發了另一個用來取得資料的 React hook library:SWR,如果您會在客戶端取得資料的話,我們 強烈推薦 您搭配著 SWR 一起使用。

他自動處理了資料快取、資料更新、追蹤使用者動態、定時取得資料...等功能。

與上一個範例類似,但在這裡我們使用 SWR 來獲取個人資料。SWR 會自動的幫我們快取資料,資料過期時也會自動的幫我們更新快取。 如果您想取得更多關於使用 SWR 的資訊,推薦您前往 SWR 的文件.

import useSWR from 'swr' const fetcher = (...args) => fetch(...args).then((res) => res.json()) function Profile() { const { data, error } = useSWR('/api/profile-data', fetcher) if (error) return <div>Failed to load</div> if (!data) return <div>Loading...</div> return ( <div> <h1>{data.name}</h1> <p>{data.bio}</p> </div> ) }

相關文件

想知道更多下一步的資訊, 我們推薦以下的文章:

本篇文章由f312213213

f312213213

貢獻翻譯。瞭解如何參與貢獻