Prevent Static Pages when Building
Unanswered
New Zealand posted this in #help-forum
New ZealandOP
Hi! I'm running into several issues between my dev and production environments.
For my site, I'm opting into client-side rendering by placing "use client"; at the top of all of my pages. This works perfectly when I'm running next using
When I go directly to a URL (/client), without first being redirected, I'm getting a page that looks like this, with no HTML.
My build succeeds and shows that the
None of my pages use any of the built-in getStaticProps, etc. Each page imports SWR, react, and other internal components.
For my site, I'm opting into client-side rendering by placing "use client"; at the top of all of my pages. This works perfectly when I'm running next using
npm run dev, but I'm running into issues in production.When I go directly to a URL (/client), without first being redirected, I'm getting a page that looks like this, with no HTML.
My build succeeds and shows that the
/client page is a static page, even though it should not be. Only static pages (with the circle) are giving me this issue, while the pages with the lambda next to them work fine. I resolved this issue on the backend by removing the NextResponse import, which was causing static rendering on my API endpoints.None of my pages use any of the built-in getStaticProps, etc. Each page imports SWR, react, and other internal components.
5 Replies
New ZealandOP
This does not happen every time I visit the page directly, and seemingly randomly appears for different users on different pages. It shows up more frequently longer after the last build.
@New Zealand Hi! I'm running into several issues between my dev and production environments.
For my site, I'm opting into client-side rendering by placing "use client"; at the top of all of my pages. This works perfectly when I'm running next using `npm run dev`, but I'm running into issues in production.
When I go directly to a URL (/client), without first being redirected, I'm getting a page that looks like this, with no HTML.
My build succeeds and shows that the `/client` page is a static page, even though it should not be. Only static pages (with the circle) are giving me this issue, while the pages with the lambda next to them work fine. I resolved this issue on the backend by removing the NextResponse import, which was causing static rendering on my API endpoints.
None of my pages use any of the built-in getStaticProps, etc. Each page imports SWR, react, and other internal components.
'use client' doesn't change the component to CSR, it means the component will render both in the server and the clientif you want to entirely avoid the component from being rendered in the server, you need to use
next/dynamic with ssr: false: https://nextjs.org/docs/app/building-your-application/optimizing/lazy-loading#skipping-ssrbut your problem about the pages returning the json for RSC is probably not related to that. are you hosting your app on vercel?
@Rafael Almeida but your problem about the pages returning the json for RSC is probably not related to that. are you hosting your app on vercel?
New ZealandOP
no it’s being hosted on digital ocean