Fetch data from API route with getStaticProps

[lethal sapphire]

Fetch data from API route with getStaticProps

[frigid shell]

Hi @lethal sapphire. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

To fetch data from an API route with getStaticProps, you can use the fetch() API directly in getStaticProps. However, it's recommended to write the server-side code directly in getStaticProps instead of fetching an API route that itself fetches data from an external source. You can share the logic for fetching the data by using a lib/ directory.

Here's an example of how to fetch data from an API route using getStaticProps:

1. Create a shared function in the lib/ directory to fetch data:

lib/load-posts.js

export async function loadPosts() {
  const res = await fetch('https://.../posts/');
  const data = await res.json();
 
  return data;
}

2. Import the shared function in your page component and use it in getStaticProps:

pages/blog.js

import { loadPosts } from '../lib/load-posts';
 
export async function getStaticProps() {
  const posts = await loadPosts();
  return { props: { posts } };
}

By doing this, you can fetch data from an API route and pass it to your page component as props.

Source: Next.js Documentation - Write server-side code directly (https://nextjs.org/docs/pages/building-your-application/data-fetching/get-static-props#write-server-side-code-directly)

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@lethal sapphire kapa.ai is still learning and improving, please let us how it did by reacting below

[lethal sapphire]

What's the difference between this

export async function getStaticProps() {
  const { data, error } = await supabase.from('sites').select().range(0, 19);

  if (error) {
  throw new Error(error.message);
  }
  return {
    props: {
      sites: data,
    },
  };
}```

And this

```tsx
export async function getStaticProps() {
  const data = await loadPosts();

  return {
    props: {
      sites: data,
    },
  };
}```

`load-post.ts`
```ts
import supabase from "../../lib/supabaseClient";

export async function loadPosts() {
    const { data, error } = await supabase.from('sites').select()
   
    return data;
  }

@frigid shell

[frigid shell]

Let me check the knowledge base for you. One moment! :books:

---

The difference between the two getStaticProps implementations is how they fetch data.

1. In the first example, you fetch data directly within getStaticProps using Supabase:

export async function getStaticProps() {
  const { data, error } = await supabase.from('sites').select().range(0, 19);

  if (error) {
    throw new Error(error.message);
  }
  return {
    props: {
      sites: data,
    },
  };
}

2. In the second example, you fetch data using a separate function loadPosts from the load-post.ts file:

export async function getStaticProps() {
  const data = await loadPosts();

  return {
    props: {
      sites: data,
    },
  };
}

load-post.ts

import supabase from "../../lib/supabaseClient";

export async function loadPosts() {
  const { data, error } = await supabase.from('sites').select()

  return data;
}

The main difference is that the second example abstracts the data fetching logic into a separate function (loadPosts) in a separate file (load-post.ts). This makes the code more modular and reusable, allowing you to use the loadPosts function in other parts of your application if needed.

Both implementations achieve the same goal of fetching data and passing it as props to the page component, but the second example promotes better code organization and reusability.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@lethal sapphire kapa.ai is still learning and improving, please let us how it did by reacting below

[lethal sapphire]

Is there any difference when I call to /lib/load-post or call to /api/load-post? @frigid shell

[frigid shell]

Let me check the knowledge base for you. One moment! :books:

---

Yes, there is a difference between calling /lib/load-post and /api/load-post.

1. /lib/load-post: This is a local module that exports a function (e.g., loadPosts). You can import this function directly in your getStaticProps or other parts of your application and use it to fetch data. This approach is recommended when you want to fetch data server-side and keep the logic reusable.

Example:

import { loadPosts } from '../lib/load-posts';

export async function getStaticProps() {
  const data = await loadPosts();
  return {
    props: {
      sites: data,
    },
  };
}

2. /api/load-post: This is an API route in your Next.js application. API routes are used to create server-side endpoints that can be called from the client-side or external services. When you call an API route, you're making an HTTP request (e.g., using fetch()), and the response is sent back to the caller.

Example:

export async function getStaticProps() {
  const res = await fetch('http://localhost:3000/api/load-post');
  const data = await res.json();
  return {
    props: {
      sites: data,
    },
  };
}

In this case, you would need to create a file pages/api/load-post.js (or .ts if using TypeScript) with the following content:

import { loadPosts } from '../../lib/load-posts';

export default async function handler(req, res) {
  const data = await loadPosts();
  res.status(200).json(data);
}

The main difference is that calling /lib/load-post directly fetches data server-side within your application, while calling /api/load-post involves making an HTTP request to an API route that fetches the data.

It's recommended to use the /lib/load-post approach when fetching data in getStaticProps or other server-side functions, as it avoids the overhead of an additional HTTP request and keeps the data fetching logic reusable.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@lethal sapphire kapa.ai is still learning and improving, please let us how it did by reacting below

[lethal sapphire]

How to know what component is rendered on server side? @frigid shell

[frigid shell]

Let me check the knowledge base for you. One moment! :books:

---

To determine which components are rendered on the server side in a Next.js application, you can look for the following patterns:

1. Components rendered within getServerSideProps or getStaticProps functions are server-rendered. These functions are used for server-side rendering and static site generation, respectively.

Example:

export async function getServerSideProps() {
  // Fetch data on the server side
  const data = await fetchData();

  return {
    props: {
      data,
    },
  };
}

2. Components rendered within a page that uses Server Components. By default, the app router in Next.js uses Server Components, allowing you to easily render components on the server and reducing the amount of JavaScript sent to the client.

Source: Next.js Documentation - Component-level Client and Server Rendering (https://nextjs.org/docs/app/building-your-application/rendering#component-level-client-and-server-rendering)

3. Components that are part of a page using Server-side Rendering (SSR) with getServerSideProps. In this case, the entire page is rendered on the server for each request.

Example:

export async function getServerSideProps() {
  // Fetch data on the server side
  const data = await fetchData();

  return {
    props: {
      data,
    },
  };
}

Source: Next.js Documentation - Server-side Rendering (https://nextjs.org/docs/pages/building-your-application/rendering/server-side-rendering)

Keep in mind that with the introduction of React Server Components (still experimental), you'll be able to choose the rendering environment at the component level. However, this feature is not yet stable in Next.js.

Source: Next.js Documentation - React Essentials (https://nextjs.org/docs/getting-started/react-essentials)

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@lethal sapphire kapa.ai is still learning and improving, please let us how it did by reacting below

[lethal sapphire]

If my layout is persist through every page, is it rendered at server side? If not, how do I do it @frigid shell ?

[frigid shell]

Let me check the knowledge base for you. One moment! :books:

---

If your layout is persistent through every page, it is not necessarily rendered on the server side by default. However, you can ensure that it is server-rendered by using getServerSideProps or getStaticProps in your pages.

To make your layout server-rendered, you can follow these steps:

1. Create a custom _app.js (or _app.tsx if using TypeScript) file in the pages directory. This file allows you to customize the default behavior of the Next.js app.

Example:

// pages/_app.js
import Layout from '../components/Layout';

function MyApp({ Component, pageProps }) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  );
}

export default MyApp;

2. Use getServerSideProps or getStaticProps in your pages to fetch data and pass it as props to the page component. This will ensure that the page, including the layout, is rendered on the server side.

Example with getServerSideProps:

// pages/index.js
export async function getServerSideProps() {
  // Fetch data on the server side
  const data = await fetchData();

  return {
    props: {
      data,
    },
  };
}

function IndexPage({ data }) {
  // Render the page with the fetched data
  return <div>{/* Your page content */}</div>;
}

export default IndexPage;

By using getServerSideProps or getStaticProps in your pages, you ensure that the entire page, including the layout, is rendered on the server side.

Source: Next.js Documentation - Custom App (https://nextjs.org/docs/pages/building-your-application/routing/custom-app)

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@lethal sapphire kapa.ai is still learning and improving, please let us how it did by reacting below

[lethal sapphire]

I have a component that renders conditional data based on whether user has logged in or not but it always render first then do the authentication later so my component will be flickered, how do I deal with this? @frigid shell

[frigid shell]

Let me check the knowledge base for you. One moment! :books: