// app/page.tsx
import Image from 'next/image';

export default function Home() {
  return (
    <main>
      <h1>Welcome to our Web Solution</h1>
      <Image src="/logo.jpg" alt="Our Team" width={200} height={400} />
      <p>We’re a team passionate about building great web experiences.</p>
    </main>
  );
}

const getServerSideProps = async () => {
  const response = await fetch(`http://localhost:3000/api/product`, { cache: "no-store" });
  const data = await response.json();
  return { props: { product: data } };
}

export default function Home({ product }) {
  return (
    <main className="lg:px-20 md:px-10 px-5 py-10 text-blue-950">
      <h1>Server-Side Rendering</h1>
      <p>{product.name}</p>
    </main>
  );
}

'use client'

import { useEffect, useState } from 'react';

export default function Page() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(res => res.json())
      .then(json => setData(json));
  }, []);

  return (
    <main>
      <h1>Client-Side Rendering</h1>
      <p>{data ? JSON.stringify(data) : "Loading..."}</p>
    </main>
  );
}

export async function getStaticProps() {
  const data = await fetchData();
  return {
    props: { data },
    revalidate: 60, // Tái tạo lại trang mỗi 60 giây
  };
}

export default function Page({ data }) {
  return (
    <main>
      <h1>Incremental Static Regeneration</h1>
      <div>{JSON.stringify(data)}</div>
    </main>
  );
}