Next.js Discord

Discord Forum

Convert Dynamic to Static Pages

Answered
Havana posted this in #help-forum
Open in Discord
HavanaOP
I want to speed up my app's load time by converting dynamically rendered pages to static pages during the build process. Currently, the build shows that all pages are dynamically rendered, leading to slower load times.

Here's the output from the build process:
> nextjs-template@0.1.0 build
> next build

   â–² Next.js 14.1.0
   - Environments: .env.local

   Creating an optimized production build ...
 ✓ Compiled successfully
 ✓ Linting and checking validity of types    
 ✓ Collecting page data    
 ✓ Generating static pages (9/9) 
 ✓ Collecting build traces    
 ✓ Finalizing page optimization    

Route (app)                              Size     First Load JS
┌ λ /                                    175 B          91.2 kB
├ λ /_not-found                          0 B                0 B
├ λ /about                               293 kB          391 kB
├ λ /api/auth/callback                   0 B                0 B
├ λ /auth                                8.11 kB         128 kB
├ λ /contact                             3.2 kB          116 kB
└ λ /todos                               6.77 kB         156 kB
+ First Load JS shared by all            84.3 kB
  ├ chunks/69-99b943a3e1eec0e3.js        28.9 kB
  ├ chunks/fd9d1056-d0bb1c3c00245c52.js  53.4 kB
  â”” other shared chunks (total)          1.99 kB


Æ’ Middleware                             120 kB

λ  (Dynamic)  server-rendered on demand using Node.js
Answered by Ray
btw, if you want the page to be generated. you can use route segment config to do that
export const dynamic = 'force-static'
View full answer

35 Replies

Vizsla
Might want to take a look through your pages that are supposed to be static and see if you're doing any data fetching

Docs say NextJS should automatically be reading in the code and adjusting the pages to be either dynamic or static

https://nextjs.org/docs/app/building-your-application/rendering/server-components#switching-to-dynamic-rendering

Could you drop in /contacts or /todos? I could help take a look
HavanaOP
It's weird that the about page is dynamic rendered without any functions or fetching.
Here's the about page:
## src/app/about/page.tsx
export default function About() {
    return (
        <div className="px-8">
            <h1>About This Template</h1>
        </div>
    );
}
@Ray how does `src/app/layout.tsx` look like?
HavanaOP
## src/app/layout.tsx
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import Header from "@/components/common/Header";
import Footer from "@/components/common/Footer";
import MainProvider from "@/providers/MainProvider";
import { Toaster } from "@/components/ui/toaster";

const font = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: {
    template: "%s | ...",
    default: "...",
  },
  description: "A simple ...",
  creator: "...",
  keywords: ["...", "...", "...", "...", "..."],
};

export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
  return (
    <html lang="..." className="!...">
      <body className={`${font.className} ...`} suppressHydrationWarning>
        <MainProvider>
          <Header />
          <main className="...">{children}</main>
          <Footer />
          <Toaster />
        </MainProvider>
      </body>
    </html>
  );
}
HavanaOP
Yea
Ray
/about 293 kB 391 kB
the first load js of the about page is 391kb
Ray
btw, if you want the page to be generated. you can use route segment config to do that
export const dynamic = 'force-static'
Answer
Ray
because when you are fetching data with dynamic function, it will make the page opt out to dynamic
@Ray /about 293 kB 391 kB the first load js of the about page is 391kb
HavanaOP
I removed excess content to simplify the code, and it still appears dynamically rendered.
HavanaOP
I'll, this is the about page now
λ /about 153 B 84.4 kB
@Havana I'll, this is the about page now
Ray
with force-static?
HavanaOP
no wait a sec
This is how it looks after the force-static
â—‹ /about                               153 B          84.4 kB
it looks solved, is it bad to force something like this?
HavanaOP
"fetching data with dynamic function" ? Where?
I don't fetch data in the about page
Ray
I don't know how you fetching data
but using dynamic function (cookies(), headers()) next will opt out the default behavior
if that isn't what you want, you could use route segment config to change it
HavanaOP
The issue might be related to Supabase Auth, which uses cookies and headers in the middleware and other areas.
Ray
yes
so you will need to use route segment config to generate static page
HavanaOP
is there a way to avoid adding that config to each page?
@Havana is there a way to avoid adding that config to each page?
Ray
create a route group and add it in the layout.tsx
app/(static)/layout.tsx
HavanaOP
makes sense
Ray
then move every page you want to be static inside it
HavanaOP
Thanks man.
Ray
np