Update Readme.md

react18-tools · Jun 13, 2024 · 95e88a1 · 95e88a1
1 parent 920a220
commit 95e88a1
Showing 1 changed file with 22 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -158,6 +158,26 @@ export default function Layout({ children }) {
 }
 ```
 
+If you prefer SSR over SSG for your entire app, you can wrap entire app with `ServerTarget` as follows:
+
+```tsx
+// app/layout.jsx
+import { Core } from "nextjs-darkmode"; // for better tree-shaking
+import { ServerTarget } from "nextjs-darkmode/server";
+
+export default function Layout({ children }) {
+  return (
+    <ServerTarget tag="html" lang="en">
+      <head />
+      <body>
+        <Core />
+        {children}
+      </body>
+    </ServerTarget>
+  );
+}
+```
+
 ### Switch
 
 An elegant color switch to toggle color schemes:
@@ -332,6 +352,8 @@ Now you can use dark-mode specific classes:
 <h1 className="text-black dark:text-white">
 ```
 
+> When you use Tailwind, make sure you replace `html` in `app/layout` to `<ServerTarget tag="html"...` to avoid FOUC.
+
 ## Performance
 
 `nextjs-darkmode` is designed to be fully tree-shakable, including only the code you use. For instance, if you only use the `useMode` hook, the rest of the library's code will be removed during the build process.