Implement Facebook comment with Nextjs

[IRediTOTO]

Hi, I am trying to add facebook to my app. I code like below, I am trying to lazy load FB comment by use dynamic, but I see Facebook comment re-render too often so I use useMemo. It run pretty ok, but if I Go to homepage and back to mypost page, FB comment disapear... Finding a solution to implement FB comment. Thank you.
What I want to archive?

1. Lazy load FB to get best speed
2. Fb just render onetime for app performance

// mypost.js
const Comment = dynamic(
   () => import("../../../lib/facebook/comments-facebook"),
   { ssr: false } 
);
export default (props) => {
   // some codes...
   return (
      <TAB>
             <OtherTabs />
             <Comment />
      </TAB>
)}

Here is Facebook comment component comments-facebook.js

import { useEffect, memo } from "react";

const CommentsFacebook =(props) => {
   console.log("render CommentsFacebook")
   useEffect(() => {
      console.log("load facebook script")
      const facebookScript = document.createElement("script");
      facebookScript.async = true;
      facebookScript.src = `https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v7.0&appId=${process.env.FACEBOOK_APP_ID}&autoLogAppEvents=1`;
      document.body.appendChild(facebookScript);
   },[]);

   return (
      <React.Fragment>
         <div id="fb-root"></div>
         <div className="fb-comments" data-href={process.env.FACEBOOK_APP_ID} data-numposts="10" data-width="100%"> 
         </div>
      </React.Fragment>
   );
};

export default CommentsFacebook;

[sergiodxa]

How is this related to SWR? I think you are not using SWR in your code, I think you may want to open this in the Next.js repository.

[IRediTOTO]

OPS I am so sorry =.= Wrong post