从零开始NEXT.js——服务器组件

在NEXT.js中，我们可以使用“服务器组件”来处理需要直接在服务器端执行的逻辑，并将结果传递给客户端。服务器组件是一个以.server.js结尾的文件，它可以导入任何Node.js模块，并且只在服务器端执行。

以下是一个简单的服务器组件示例，它返回当前的服务器时间：

// pages/api/time.server.js
export default async function handler(req, res) {
  const time = new Date().toLocaleTimeString();
  res.send(`当前服务器时间是：${time}`);
}

在客户端，你可以使用fetch函数来获取这个服务器组件的响应：

// pages/index.js
export default function Home() {
  const [serverTime, setServerTime] = useState('');
 
  useEffect(() => {
    fetch('/api/time')
      .then(res => res.text())
      .then(time => setServerTime(time));
  }, []);
 
  return (
    <div>
      <p>服务器时间: {serverTime}</p>
    </div>
  );
}

在这个例子中，服务器组件/pages/api/time.server.js返回服务器的当前时间，然后客户端通过调用这个API，获取并展示服务器时间。这个过程是在服务器端完成的，客户端只负责展示。