ReactJS - 使用伺服器指令

---

---

指令有點像詳細的說明。它們是使用 React 伺服器元件或開發使用它們的某些內容（例如庫）所必需的。

React 中存在兩種型別的指令：use client 和 use server。

• 'use client 定義程式碼的哪些部分在客戶端執行，這類似於我們網路瀏覽器的工作方式。

• 'use server' 定義伺服器端程序，客戶端程式碼可以訪問這些程序，這些程序在我們的網路瀏覽器中執行。這些指令確保 React 伺服器元件中的所有內容都能正常執行。

因此，在本教程中，我們將介紹“use server”一詞。

什麼是“use server”？

'use server' 是我們在開發 Web 應用程式時使用的 React 中的一個特定命令。它在建立在伺服器上執行並可以從客戶端呼叫的函式時提供幫助。這對於諸如儲存資料或更新我們網站之類的任務非常有用。

語法

要使非同步函式可由客戶端呼叫，請在其主體頂部新增“use server”。這些被稱為伺服器操作。

async function MyApp(data) {
   'use server';
   // ...
}

示例

示例 1

假設我們想要建立一個按鈕，用於增加特定帖子的點贊數。當用戶點選該按鈕時，我們需要在伺服器上更新點贊數，然後向用戶顯示新的計數。

為此，我們建立一個名為“incrementLike”的函式，並在頂部新增單詞“use server”。這通知 React 它是一個可以從客戶端呼叫的函式。因此，我們將建立一個名為 actions.js 的檔案並使用以下程式碼 -

actions.js

'use server';

let likeCount = 0;
export default async function incrementLike() {
   likeCount++;
   return likeCount;
}

在此程式碼中，“likeCount”從 0 開始。當有人點選點贊按鈕時，將呼叫“incrementLike”函式，並且“likeCount”將增加 1。然後返回更新後的計數。

現在在客戶端，當點選點贊按鈕時，它將呼叫“incrementLike”函式。這是它的程式碼 -

import incrementLike from './actions';
import { useState, useTransition } from 'react';

export default function App() {
   const [isPending, startTransition] = useTransition();
   const [likeCount, setLikeCount] = useState(0);
   
   const onClick = () => {
      startTransition(async () => {
         const currentCount = await incrementLike();
         setLikeCount(currentCount);
      });
   };
   
   return (
      <>
         <p>Total Likes: {likeCount}</p>
         <button onClick={onClick} disabled={isPending}>Like</button>
      </>
   );
}

輸出

當有人點選點贊按鈕時，將呼叫“incrementLike”函式，並更新伺服器上的點贊數。然後向用戶顯示更新後的計數。

示例 2

這是另一個使用“use-server”方法的應用程式示例。在此示例中，應用程式包含一個按鈕，用於從伺服器檢索資料。然後，頁面將顯示檢索到的資料，或者如果在獲取資料時出現問題，則顯示錯誤訊息。因此，讓我們看看下面的程式碼 -

App.js

'use server';

import { useState } from 'react';
import './App.css';

export default function App() {
   const [message, setMessage] = useState('');   
   const fetchData = async () => {
      try {
         // A server request
         const response = await fetch('https://api.github.com/users/john123/repos/12');
         const data = await response.json();
         
         setMessage(`Data from server: ${JSON.stringify(data)}`);
      } catch (error) {
         setMessage('Error fetching data from the server.');
      }
   };
   
   return (
      <div className='App'>
         <p>{message}</p>
         <button onClick={fetchData}>Fetch Data</button>
      </div>
   );
}

輸出

因此，我們可以在上面的輸出影像中看到，當我們點選“獲取資料”按鈕時，獲取到的資料將顯示在按鈕上方。請記住，我們可以修改程式碼以滿足個人需求，並將佔位符 URL 替換為您要從中檢索資料的實際端點。

示例 3

這是另一個使用“use-server”方法的應用程式，這次我們將處理非同步操作。該應用程式將包含一個按鈕來執行非同步操作（延遲）。在操作進行時，它將顯示載入訊息。然後，它將在成功後顯示獲取到的資料，並在發生錯誤時顯示錯誤訊息。因此，相同的程式碼如下 -

asyncApp.js

'use server';

import { useState } from 'react';

export default function AsyncApp() {
   const [isLoading, setIsLoading] = useState(false);
   const [data, setData] = useState(null);
   const [error, setError] = useState(null);
   
   const fetchData = async () => {
      try {
         setIsLoading(true);
         
         // server request delay
         await new Promise(resolve => setTimeout(resolve, 1500));
         
         // Successful response
         const response = { message: 'Data fetched successfully!' };
         setData(response);
      } catch (err) {
         // An error during the request
         setError('Error fetching data from the server.');
      } finally {
         setIsLoading(false);
      }
   };
   
   return (
      <div>
         <h2>Async App</h2>
         {isLoading && <p>Loading...</p>}
         {data && <p>{data.message}</p>}
         {error && <p style={{ color: 'red' }}>{error}</p>}
         <button onClick={fetchData} disabled={isLoading}>
            Fetch Data
         </button>
      </div>
   );
}

輸出

在上面的輸出影像中，我們可以看到非同步應用程式。因此，當我們點選“獲取資料”按鈕時，它將顯示“載入”訊息，然後它將顯示“資料獲取成功”的訊息。

限制

• 如果我們想要在客戶端程式碼中使用“伺服器操作”，則必須在定義該操作的檔案頂部包含術語“use server”。

• 'use server' 只能與非同步方法一起使用，這些方法可能需要一些時間才能完成。

• 始終小心我們提供給“伺服器操作”的資訊。假設我們正在郵寄包裹；確保它安全可靠。檢查並保護我們傳送的資訊。

總結

“use server”是一個神奇的咒語，它允許我們建立可以從我們的網站上對伺服器進行更改並保持同步的函式。它對於更新計數和儲存資料等操作很有用。