Add dynamic loading as a way to avoid hydration mismatch in README

[Judge-Paul]

This PR updates the README with another option to prevent hydration errors by dynamically loading the components with the unsafe code and setting ssr to false.
The new section would look like:

Avoid Hydration Mismatch

// unchanged

or lazy load the component setting ssr to false:

import dynamic from "next/dynamic";

const ThemeSwitch = dynamic(() => import("./ThemeSwitch"), { ssr: false });

const ThemePage = () => {
  return (
    <div>
      <ThemeSwitch />
    </div>
  );
};

export default ThemePage

To avoid Layout Shift, consider rendering a skeleton/placeholder until mounted on the client side.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
next-themes-basic	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 3, 2024 6:20pm
next-themes-tailwind	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 3, 2024 6:20pm
next-themes-with-app-dir	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 3, 2024 6:20pm