So I have a site made with Next JS that connects to a Wordpress Api hosted in Hostinger.
It worked fine for some months but last week it started throwing some errors with fetch problems in a random way, because after a few minutes it would work just fine.
Most errors look like this:
SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON
at JSON.parse (<anonymous>)
at parseJSONFromBytes (node:internal/deps/undici/undici:5472:19)
at successSteps (node:internal/deps/undici/undici:5454:27)
at fullyReadBody (node:internal/deps/undici/undici:4381:9)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async consumeBody (node:internal/deps/undici/undici:5463:7)
at async Promise.all (index 2)
at async m (/var/task/.next/server/app/(basicLayout)/[page]/page.js:1:4342) {
digest: '1356013119'
}
A few times I also had a similar error popping up during the build. I only get this errors when running the site in Vercel, if I run it locally it works fine, even through I connect to the same API.
I’ve also seen an influx of crawling bots looking for non-existent sports related posts, like this:
My assumption is that Hostingers resources get exhausted, but it doesn’t really show that in the stats that they provide. I’m wondering if I should migrate the Api or if I should work on the problem somewhere else.
I’m kinda lost, any help would be deeply appreciated.
I’ve actually got a similar project myself But my WordPress server is hosted on AWS. Let’s see if I can help out here!
The error you’re seeing (SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON) typically occurs when the API returns an HTML error page instead of the expected JSON response. This could happen for several reasons:
The WordPress server is overloaded and returning a 500 error page.
There’s a temporary network issue causing the request to be redirected.
The WordPress site is temporarily down or restarting.
You could implement caching on your Next.js application to reduce the load on your WordPress server and improve response times. You can use Next.js and Vercel’s built-in caching mechanisms for this.
Thank you so much for the reply, I didn’t came back before because I was full on trying to solve it.
I beef up my caching game, I had quite a bit already but I put longer gaps for revalidation, I even set up retries for fetchs if something happens and even some on demand revalidation for individual paths just in case.
Also changed the server.
Funny thing, I worked on so many things that I’m actually not sure what actually solved the problem, but while I was working I found a little bit of malware in the Wordpress site, and I feel lke that might have been the problem because when I took it out is when thing started actually rolling I feel. But is pretty strange, the only symptom I got from it was the failure in some fetchs. Super weird.
But my WordPress server is hosted on AWS. Let’s see if I can help out here!