next.js getInitialProps doesn't work at mobile browser

anas behhari

I have an app works perfectly (with no error) on desktop but when I use **mobile device ** ,I found that all pages can not trigger getInitialProps method at client side only if i navigate through Link component

This My code :

return(
  <>
   <Head>
      <title>
        welcome to Anas Behhari | blogging posts for
        {StaticFunction.Dateit(new Date())} |
        {new Date().getFullYear() - 1 + "-" + new Date().getFullYear()}
      </title>
  </Head>
   
  <div className="main">
      <div className="container">
        <div className="row">
          <div className="col-lg-10 offset-lg-1 js-post-list-wrap Blogs-con">
            <h2 className="h4 section-title">
              <span> Latest posts </span>
            </h2>
            {Blogs.map((blog) => (
              <Article blog={blog} key={blog._id} />
            ))}
            {BlogList}
          </div>
        </div>
      </div>
    </div>

  </>
)

blogs.getInitialProps = async (ctx) => {
 try {
  const res = await axios.get("http://localhost:3000/api/blogs?offset=0&max=5");
  const Blogs = res.data;
  return { Blogs };
  } catch (error) {
  return { error };
}

};

export default blogs;

anas behhari

Well, after 2 days of searching on the internet I figured out that I just need to change a bit inside the getInitialProps function.

The main factor was to get rid of the Axios and replace it with Fetch API

export async function getStaticProps() {
    const res = await fetch(`http://localhost:8080/api/blogs}`)
    const Blogs = await res.json()
    if(!Tags) return {props:{error:true}}
    return {
     props: {
       Blogs,
     },
    }
}