Does getStaticProps get data from local API?

[Elindo586]

Example, this code here:

export const getStaticProps = async () => {
  const res = await fetch("http://localhost:3000/api/parts/getallparts");
  const data = await res.text();
  return {
    props: {
      data,
    },
  };
};
const Inventory =({data}) => {

^^^ the fetch calling from above is referring to this page code below, which is calling a mongoose schema and the actual connection to the MongoDB database...

import Parts from "../../models/Parts";
import dbConnect from '../../config/connection'

dbConnect();

export default function handler(req, res) {
    Parts.find({})
            .select('-__v')
            // return response in json format
            .then(dbPartsData => res.json(dbPartsData))
            // log and return an error if one occurs
            .catch(err => {
                console.log(err);
                res.status(400).json(err);
            });
}

Could this work? yes? no? why?

What would happen during build time? I see a local host 3000.... could this data be fetch during build time??? How about during revalidation? ISR ???

Is there a cleaner way to do it?

[icyJoseph]

If the development mode application is also running in localhost:3000 (this is a bit of a complicated way to say it, keep on reading), it won't work, because, when building the application doesn't even exist.

Think of api/routes as runtime artifacts. The server needs to be running and a request must arrive for them to run.

When getStaticProps runs at build time, there's none of the above. This is why, it's best to abstract the mongo db connections into reusable functions that you can use both in getStaticProps, getServerSideProps and api/routes.

Let's say you mock a server at localhost:3000, then it better continue to exist when ISR happens.

There's nothing forbidding you from reusing the api/routes code also in getStaticProps, you seem to have the needed query at build time. You could also think of getStaticProps and getServerSideProps as cousins to the api/routes handlers, they are just specialised in working with pages.

Example

export const getCodeWarsUser = (user) =>
  axios
    .get(`https://www.codewars.com/api/v1/users/${user}`)
    .then(({ data }) => data);

Then in getStaticProps:

export async function getStaticProps() {
  const codewars = await getCodeWarsUser('some-user');

  return {
    props: { codewars },
    revalidate: 10,
  };
}

And also in api/codewars

const codewars = async (req, res) => {
  const data = await getCodeWarsUser('some-user');

  return res.send(data);
};

export default codewars;

And again, don't be scared about leaking stuff to the client, and use the https://next-code-elimination.vercel.app/ to verify what's going on.

[Elindo586]

Do I need to build a server to run ISR?

Can I just implement a code like:

return {
    props: { codewars },
    revalidate: 10,
  };

Or..... do I need something else besides that?

f you want Incremental Static Regeneration (revalidate flag for getStaticProps) then you need to run NextJs server (next start command), without the server there is nothing that will perform requests and generate new static files.

[icyJoseph]

Do I need to build a server to run ISR?

What do you mean here? An external server that serves data to your application? Or the Next.js server.

When the Next.js server is running, if revalidate is set, then it is good to go with ISR.

Can I just implement a code like:

return {
    props: { codewars },
    revalidate: 10,
  };

Exactly.

Or..... do I need something else besides that?

Well, the codewars API, in that case, needs to available, but otherwise you got it.

f you want Incremental Static Regeneration (revalidate flag for getStaticProps) then you need to run NextJs server (next start command), without the server there is nothing that will perform requests and generate new static files.

I would like to make sure that you understand that Next.js uses a server.

It can do Static HTML applications like Create React App, through next build && next export, but it will miss a ton of features.

When we say Next.js uses a server, we imply, that:

• It will be build through for example yarn build (which should call next build)
• It will run on a server with yarn start (next start)
• It will be listening for as long as it lives to incoming requests

This is also offered by Next.js in its regular form.

Are you planning to build a Static HTML application instead? Here's more onto Static HTML applications with next export, https://nextjs.org/docs/advanced-features/static-html-export

[Elindo586]

I am converting a regular CSR website into a Nextjs website.

I think I have 90% done going from this project here (regular REACT):
https://github.com/Elindo586/techunion

To this project here(Nextjs):
https://github.com/Elindo586/nextprojectb

Everything is done except for one page that needs data from MongoDB... working on the sever side to extract data and ideally.... do ISR with pre-view mode... the final page I am working is this one live here: http://www.tu.biz/Inventory

But somebody told me I need a next.js sever in order to make it work?

At this point I need to implement connection at the getStaticProps, include revalidation, and figure out the pre-view mode...

And.... if I have a dark confession to make, I am working with another person because I was thinking I could finish it up quickly, and apparently they don't know how to do this last section either.... so... I might have to do it myself after all.... grrr...

I am thinking about hosting it in regular $20 bucks Vercel place.... I don't think I need any extras other than the code...

[icyJoseph]

That should be plenty for a site that's mostly pre-rendered on the server.

I need to shutdown for today, but Vercel does support Next.js servers out of the box.