I have to make same changes in my nextjs project because my enpoint API doesn't support many calls and I would like to make a refresh from the original data every 3 min.
I implemented API from nextjs: I create a pages/api/data and inside I make the call to my endpoint, and in my getInitialProps inside index call to data file.
The get works okey, but I have 2 problems:
1: I have and alert message that says:
API resolved without sending a response for /api/data, this may result in stalled requests.
2: It dosen 't reload data after 3 min..I supouse it is beacuse Cache-Control value...
This is my code:
pages/api/data
import { getData } from "../../helper";
export default async function(req, res) {
  getData()
    .then(response => {
      res.statusCode = 200
      res.setHeader('Content-Type', 'application/json');
      res.setHeader('Cache-Control', 'max-age=180000');
      res.end(JSON.stringify(response))
    })
    .catch(error => {
      res.json(error);
      next();
    });
};
pages/index
import React, { useState, useEffect } from "react";
import fetch from 'isomorphic-unfetch'
const Index = props => {
  return (
    <>Hello World</>
  );
};
 Index.getInitialProps = async ({ res }) => {
  const response = await fetch('http://localhost:3000/api/data')
  const users = await response.json()
  return { users }
};
export default Index;
                They are server-side only bundles and won't increase your client-side bundle size.
If you have an existing backend, you can still use it with Next. js (this is not a custom server). A custom Next. js server allows you to start a server 100% programmatically in order to use custom server patterns.
You should return a Promise and resolve/reject it.
Example:
import { getData } from "../../helper";
export default async function(req, res) {
  return new Promise((resolve, reject) => {
    getData()
      .then(response => {
        res.statusCode = 200
        res.setHeader('Content-Type', 'application/json');
        res.setHeader('Cache-Control', 'max-age=180000');
        res.end(JSON.stringify(response));
        resolve();
      })
      .catch(error => {
        res.json(error);
        res.status(405).end();
        resolve(); // in case something goes wrong in the catch block (as vijay commented)
      });
  });
};
                        If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With