Fetch data by a API

Fetch the Data

🚀 If using Next.js:

• For SEO and fast load time, use getServerSideProps (SSR) or getStaticProps (SSG) to fetch the data on the server.
• This allows the content to be rendered on the server, improving SEO and Largest Contentful Paint (LCP).

tsxCopy code// Next.js - getServerSideProps
export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/strings');
  const data = await res.json();
  return { props: { data } };
}

---

🧠 2. Render Efficiently in the Component

Use fast rendering strategies:

tsxCopy codeexport default function List({ data }) {
  return (
    <ul className="space-y-2">
      {data.map((item, i) => (
        <li key={i} className="text-gray-800">{item}</li>
      ))}
    </ul>
  );
}