perf: ⚡️ made root page static

Made root page static generated in nextjs to load faster
growupanand · Feb 1, 2024 · 61ebf26 · 61ebf26
1 parent d6719da
commit 61ebf26
Show file tree

Hide file tree

Showing 7 changed files with 90 additions and 49 deletions.
diff --git a/apps/web/src/app/(privatePage)/layout.tsx b/apps/web/src/app/(privatePage)/layout.tsx
@@ -1,7 +1,9 @@
+import { AuthProvider } from "@/components/providers/authProvider";
+
 type Props = {
   children: React.ReactNode;
 };
 
 export default function Layout({ children }: Props) {
-  return <>{children}</>;
+  return <AuthProvider>{children}</AuthProvider>;
 }
diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx
@@ -3,11 +3,9 @@ import type { Metadata } from "next";
 import "@convoform/ui/globals.css";
 import "nprogress/nprogress.css";
 
-import { ClerkProvider } from "@clerk/nextjs";
 import { Toaster } from "@convoform/ui/components/ui/toaster";
 
 import GoogleAnalytics from "@/components/googleAnalytics";
-import { SentryUserInit } from "@/components/sentryUserInit";
 import { cn } from "@/lib/utils";
 import { TRPCReactProvider } from "@/trpc/provider";
 import { roboto } from "./fonts";
@@ -57,21 +55,18 @@ export const metadata: Metadata = {
 
 export default function RootLayout({
   children,
-}: {
+}: Readonly<{
   children: React.ReactNode;
-}) {
+}>) {
   return (
-    <ClerkProvider signInUrl="/auth/sign-in" signUpUrl="/auth/register">
-      <html lang="en">
-        <body className={cn(roboto.className, "bg-gray-50")}>
-          {process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS ? (
-            <GoogleAnalytics ga_id={process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS} />
-          ) : null}
-          <SentryUserInit />
-          <TRPCReactProvider>{children}</TRPCReactProvider>
-          <Toaster />
-        </body>
-      </html>
-    </ClerkProvider>
+    <html lang="en">
+      <body className={cn(roboto.className, "bg-gray-50")}>
+        {process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS ? (
+          <GoogleAnalytics ga_id={process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS} />
+        ) : null}
+        <TRPCReactProvider>{children}</TRPCReactProvider>
+        <Toaster />
+      </body>
+    </html>
   );
 }
diff --git a/apps/web/src/components/landingPage/header.tsx b/apps/web/src/components/landingPage/header.tsx
@@ -1,38 +1,20 @@
-import { auth, ClerkLoading, UserButton } from "@clerk/nextjs";
-import { Button } from "@convoform/ui/components/ui/button";
-import { Skeleton } from "@convoform/ui/components/ui/skeleton";
-import { LayoutDashboard } from "lucide-react";
+import dynamic from "next/dynamic";
 
-import { LinkN } from "@/components/common/linkN";
 import BrandName from "../common/brandName";
+import { SignInButton } from "./signInButton";
 
-export function Header() {
-  const { userId } = auth();
+const UserSignInButton = dynamic(() => import("./userButton"), {
+  ssr: false,
+  loading: () => <SignInButton />,
+});
 
+export function Header() {
   return (
     <header>
       <div className="flex w-full items-center justify-between p-3">
         <BrandName className="text-xl lg:text-2xl" />
         <nav className="flex items-center gap-3">
-          {userId ? (
-            <>
-              <LinkN href="/dashboard">
-                <Button variant="secondary">
-                  <LayoutDashboard className="mr-2" size={20} /> Go to Dashboard
-                </Button>
-              </LinkN>
-              <ClerkLoading>
-                <Skeleton className="h-10 w-10 animate-pulse rounded-full" />
-              </ClerkLoading>
-              <UserButton />
-            </>
-          ) : (
-            <LinkN href="/auth/sign-in" rel="noopener noreferrer nofollow">
-              <Button variant="secondary" className="rounded-full">
-                Sign In
-              </Button>
-            </LinkN>
-          )}
+          <UserSignInButton />
         </nav>
       </div>
     </header>

diff --git a/apps/web/src/components/landingPage/pricing.tsx b/apps/web/src/components/landingPage/pricing.tsx
@@ -1,4 +1,3 @@
-import { auth } from "@clerk/nextjs";
 import { Badge } from "@convoform/ui/components/ui/badge";
 import { Button } from "@convoform/ui/components/ui/button";
 import {
@@ -55,8 +54,6 @@ const FeatureListItem = ({
 };
 
 const PlanCard = ({ plan }: { plan: Plan }) => {
-  const { userId } = auth();
-  const isLoggedin = !!userId;
   return (
     <Card className=" w-full rounded-xl border-none shadow-lg shadow-gray-200">
       <CardHeader>
@@ -87,9 +84,7 @@ const PlanCard = ({ plan }: { plan: Plan }) => {
           className={cn("w-full rounded-full font-bold", montserrat.className)}
           asChild
         >
-          <LinkN href={isLoggedin ? "/dashboard" : "/auth/register"}>
-            Sign up now
-          </LinkN>
+          <LinkN href="/auth/register">Sign up now</LinkN>
         </Button>
       </CardFooter>
     </Card>

diff --git a/apps/web/src/components/landingPage/signInButton.tsx b/apps/web/src/components/landingPage/signInButton.tsx
@@ -0,0 +1,13 @@
+import { Button } from "@convoform/ui/components/ui/button";
+
+import { LinkN } from "../common/linkN";
+
+export function SignInButton() {
+  return (
+    <LinkN href="/auth/sign-in" rel="noopener noreferrer nofollow">
+      <Button variant="secondary" className="rounded-full">
+        Sign In
+      </Button>
+    </LinkN>
+  );
+}
diff --git a/apps/web/src/components/landingPage/userButton.tsx b/apps/web/src/components/landingPage/userButton.tsx
@@ -0,0 +1,40 @@
+"use client";
+
+import { ClerkLoading, useAuth, UserButton } from "@clerk/nextjs";
+import { Button } from "@convoform/ui/components/ui/button";
+import { Skeleton } from "@convoform/ui/components/ui/skeleton";
+import { LayoutDashboard } from "lucide-react";
+
+import { LinkN } from "../common/linkN";
+import { AuthProvider } from "../providers/authProvider";
+import { SignInButton } from "./signInButton";
+
+export default function UserSignInButton() {
+  return (
+    <AuthProvider>
+      <UserSignInButtonInner />
+    </AuthProvider>
+  );
+}
+
+function UserSignInButtonInner() {
+  const { isSignedIn } = useAuth();
+
+  if (isSignedIn) {
+    return (
+      <>
+        <LinkN href="/dashboard">
+          <Button variant="secondary">
+            <LayoutDashboard className="mr-2" size={20} /> Go to Dashboard
+          </Button>
+        </LinkN>
+        <ClerkLoading>
+          <Skeleton className="h-10 w-10 animate-pulse rounded-full" />
+        </ClerkLoading>
+        <UserButton />
+      </>
+    );
+  }
+
+  return <SignInButton />;
+}
diff --git a/apps/web/src/components/providers/authProvider.tsx b/apps/web/src/components/providers/authProvider.tsx
@@ -0,0 +1,14 @@
+import { ClerkProvider } from "@clerk/nextjs";
+
+import { SentryUserInit } from "../sentryUserInit";
+
+export function AuthProvider({
+  children,
+}: Readonly<{ children: React.ReactNode }>) {
+  return (
+    <ClerkProvider signInUrl="/auth/sign-in" signUpUrl="/auth/register">
+      <SentryUserInit />
+      {children}
+    </ClerkProvider>
+  );
+}