Errors while upgrading NextJs version

Question

Recently I upgraded my next app from version 12 to version 14.

I did all the required changes using codemod.

Now I am continuously getting this following errors:

1. Unhandled Runtime Error
   Error: Hydration failed because the initial UI does not match what was rendered on the server.
   
   Warning: Expected server HTML to contain a matching <button> in <div>.
   
   See more info here: https://nextjs.org/docs/messages/react-hydration-error
   

2. Unhandled Runtime Error
   Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.
   

I have already solved some errors related to <div>tag inside <p> tag. But now I am not able to understand why I am getting the above errors.

I already know the following things:

1. const XComponent = dynamic(() => import("./XComponent"), { ssr: true });
   

   ssr: false will not give me the errors but I want my component to render server side.

2. import { useState, useEffect } from 'react'
   
   export default function App() {
     const [isClient, setIsClient] = useState(false)
   
     useEffect(() => {
       setIsClient(true)
     }, [])
   
     return <h1>{isClient ? 'This is never prerendered' : 'Prerendered'}</h1>
   }
   

   cannot use this code as well, again same reason want my component to render server side.

How can I solve this errors with server side redering?

If possible please explain reason.

Looking forward for your help. Thankyou