Closed mshumayl closed 1 year ago
Can consider JSON.parse(cachedResponse || "{}")
, then check if aiResponse contains any value before rendering. Hopefully this won't cause any hydration issues too.
Doing the above with the following code:
{aiResponse && aiResponse.map && aiResponse.map(({ surah, verse }) => {
return ((displayLoader) ?
(<div key={`${surah}_${verse}`} className="animate-ping font-zilla-slab-italic text-xs h-max w-max text-slate-500 my-4 rounded-lg bg-slate-200 py-1 px-2">Thinking...</div>) : (surah !== 0 ) ?
(<VerseCard surah={surah} verse={verse}/>)
: (<></>)
);}
)}
Yields hydration issues.
Seems to be fixed by dynamically importing VerseCard
with SSR
set to false.
import dynamic from 'next/dynamic';
const VerseCard = dynamic(() => import("./VerseCard"), {ssr: false})
This makes perfect sense as VerseCard
will never need to be rendered on server-side.
To recap, the hydration issue comes from the fact that the number of VerseCard
s rendered on client-side is always more than the number of VerseCard
s rendered on server-side.
Commit
f18609c
introduced an error that brings the whole site down.Error:
SyntaxError: Unexpected end of JSON input
Culprit:
If
JSON.parse(cachedResponse || "{}")
, map error occurs:If
JSON.parse(cachedResponse || "[{"surah": 0, "verse": 0}, {"surah": 0, "verse": 0}, {"surah": 0, "verse": 0}]")
, hydration error occurs: