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;
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
Axiosand replace it withFetchAPI
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,
},
}
}
if this solution didn't work
getServerSidePropsinstead ofgetStaticProps