`getServerSideProps` 和 `getClientSideProps`用法

getServerSideProps 例子

getServerSideProps 是 Next.js 中用于在服务端渲染时获取数据的方法。它在每个请求时运行，适用于需要预渲染且数据依赖于每个请求的情况。

// pages/index.js
import React from 'react';

export async function getServerSideProps(context) {
   
  // Fetch data from an API
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  // Pass data to the page via props
  return {
    props: {
    data } };
}

const Home = ({
     data }) => {
   
  return (
    <div>
      <h1>Server Side Rendered Page</h1>
      <pre>{
   JSON.stringify(data, null, 2)}</pre>
    </div>
  );
};

export default Home;

在这个例子中，getServerSideProps 每次请求时都会被调用，获取 API 数据并将其传递给页面组件。

getClientSideProps 例子

虽然 Next.js 并没有 getClientSideProps 这个特定的函数，但我们可以通过在 React 组件中使用 useEffect 和 useState 来实现客户端数据获取。

// pages/client-side.js
import React, {
    useEffect, useState } from 'react';

const ClientSidePage = () => {
   
  const [data, setData] = useState(null);

  useEffect(() => {
   
    const fetchData = async () => {
   
      const res = await fetch('https://api.example.com/data');
      const result = await res.json();
      setData(result);
    };

    fetchData();
  }, []);

  if (!data) {
   
    return <div>Loading...</div>;
  }

  return (
    <div>
      <h1>Client Side Rendered Page</h1>
      <pre>{
   JSON.stringify(data, null, 2)}</pre>
    <<