I'm currently developing a commenting feature for a blog using the latest version of NextJs. The text input collects data and sends it to the 'Vercel' hosted database. I am able to successfully fetch the data from the frontend as expected.
However, when it comes to displaying the data on the frontend, everything works well until the user refreshes the page, causing the data to be lost for some unknown reasons (please refer to the attached gif). This behavior is unexpected as the data should be persistent. Could this issue be related to the fact that it's a dynamic route in a 'page route' app or maybe because the comments are displayed in a 'component' rather than on the actual page? Any help in figuring this out would be greatly appreciated. Thank you in advance.
//Code for Dynamic Route '/pages/blog/[slug].js'
import React, { useRef, useState, useEffect } from 'react';
import { getSinglePost, getPosts } from '../../lib/posts';
import { Button } from '@nextui-org/react';
import CommentBox from '../../components/Blogs/CommentBox';
import useSWR from 'swr';
import { useSession } from "next-auth/react";
const PostPage = ({ post }) => {
// Code for handling comments and fetching data
};
//Function below gets 'post' from external api, and sets it as props
export default PostPage;
///////////////////////////////////
// Component
///////////////////////////////////
const CommentBox = ({ comments }) => {
//comments is imported from the dynamic page as prop
console.log(comments); // returns data as expected.
return (
// Code for rendering comments
);
};
export default CommentBox;