All pages showing ƒ (Dynamic) server-rendered on demand even after using "use client" in pages
Answered
Atlantic herring posted this in #help-forum
Atlantic herringOP
Current : after running "npm run build" it generates all pages as dynamic instead of static
Expected: there are multiple pages in my app folder which has specifically mentioned "use client" so it should generate static pages for those instead of dynamic because there are no dynamic data i am just using static data
for example about-us page, legal page etc
Operating System:
Platform: MAC OS
Arch: Apple m2
Version: 15.0.1 (24A348)
Binaries:
Node: 22.9.0
npm: 10.8.3
Relevant Packages:
next: ^14.2.13
eslint-config-next: 14.2.11
react: ^18
react-dom: ^18
Output i am getting after running "npm run build"
✓ Generating static pages (11/11)
Route (app) Size First Load JS
┌ ƒ / 5.72 kB 186 kB
├ ƒ /_not-found 157 B 87.5 kB
├ ƒ /about-us 7.16 kB 208 kB
├ ƒ /book-demo 1.36 kB 119 kB
├ ƒ /careers 146 B 123 kB
├ ƒ /case-studies 146 B 123 kB
├ ƒ /contact-us 1.37 kB 124 kB
├ ○ /icon.ico 0 B 0 B
├ ƒ /legal 1.75 kB 158 kB
├ ƒ /news 146 B 123 kB
├ ƒ /resources 12.6 kB 184 kB
○ (Static) prerendered as static content
● (SSG) prerendered as static HTML (uses getStaticProps)
ƒ (Dynamic) server-rendered on demand
but about-us , legal, news all i have specifically mentioned "use client"
because it is wesbite so it doesnot has dynamic content or any api call
Expected: there are multiple pages in my app folder which has specifically mentioned "use client" so it should generate static pages for those instead of dynamic because there are no dynamic data i am just using static data
for example about-us page, legal page etc
Operating System:
Platform: MAC OS
Arch: Apple m2
Version: 15.0.1 (24A348)
Binaries:
Node: 22.9.0
npm: 10.8.3
Relevant Packages:
next: ^14.2.13
eslint-config-next: 14.2.11
react: ^18
react-dom: ^18
Output i am getting after running "npm run build"
✓ Generating static pages (11/11)
Route (app) Size First Load JS
┌ ƒ / 5.72 kB 186 kB
├ ƒ /_not-found 157 B 87.5 kB
├ ƒ /about-us 7.16 kB 208 kB
├ ƒ /book-demo 1.36 kB 119 kB
├ ƒ /careers 146 B 123 kB
├ ƒ /case-studies 146 B 123 kB
├ ƒ /contact-us 1.37 kB 124 kB
├ ○ /icon.ico 0 B 0 B
├ ƒ /legal 1.75 kB 158 kB
├ ƒ /news 146 B 123 kB
├ ƒ /resources 12.6 kB 184 kB
○ (Static) prerendered as static content
● (SSG) prerendered as static HTML (uses getStaticProps)
ƒ (Dynamic) server-rendered on demand
but about-us , legal, news all i have specifically mentioned "use client"
because it is wesbite so it doesnot has dynamic content or any api call
Answered by B33fb0n3
as said: remove the use client. That should either directly load it instantly or you can add a
on top to make sure it's statically rendered
export const dynamic = 'force-static'on top to make sure it's statically rendered
8 Replies
you page don't need to be
use client to make it static. Just remove the use client when there is no interactivity and make it serverside rendered. Like that it will also be staticAtlantic herringOP
but i want it should be prerendered as static content but currently it is server-rendered on demand which takes few seconds to load pages
as said: remove the use client. That should either directly load it instantly or you can add a
on top to make sure it's statically rendered
export const dynamic = 'force-static'on top to make sure it's statically rendered
Answer
Atlantic herringOP
thanks this is working
i am still confused if i have a page with "use client" and i have used useState and useEffect for animation
why that page is still considered as dynamic and rendered on demand
why that page is still considered as dynamic and rendered on demand
@B33fb0n3 do you know the exact reason or what kind of @nextjs behavoir is this
It's not nextjs related. It looks more like you using something inside your page, that makes it dynamic. And no, it's not the 'use client'. One example for that is this: https://codesandbox.io/p/devbox/dw9hkc
As you can see here, it will still be statically generated even if we use the client (see attachedd)
As you can see here, it will still be statically generated even if we use the client (see attachedd)
