Next.js Discord

Discord Forum

How to disable server side pre-rendering in Vercel?

Answered
Giant panda posted this in #help-forum
Open in Discord
Giant pandaOP
I am using a library ( peerjs ) that references the 'navigator' object at import time. Is there any way to tell it that I don't want it to try and generate a static page or render the code server side? I tried setting dynamic='force-dynamic' but that didn't do the trick


This is the code that I believe is causing the problem:
export const dynamic = 'force-dynamic'  

import Peer  from "peerjs";

export default function(){
  let p = new Peer();
  return <></>
}


   Generating static pages (4/8) 
ReferenceError: navigator is not defined
    at new <anonymous> (/vercel/path0/.next/server/app/call/page.js:7:121)
    at 75414 (/vercel/path0/.next/server/app/call/page.js:1:95863)
    at t (/vercel/path0/.next/server/webpack-runtime.js:1:128)
    at F (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:91937)
    at /vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:94352
    at W._fromJSON (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:94790)
    at JSON.parse (<anonymous>)
    at N (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:91658)
    at t (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:98043)
Answered by Ray
use dynamic to disable ssr
https://nextjs-faq.com/browser-api-client-component#using-nextdynamic-with-ssr-false
View full answer

10 Replies

Answer
Giant pandaOP
thanks!
The right solution depends on whether the import for "peer-js" fails
or if it's the "new Peer()" call that fails
next/dynamic is appropriate if the import fails
if the import succeed, but it's the call to "new Peer()" that fails, a call to "useEffect", or a NoSsr wrapper component could be more appropriate
Giant pandaOP
yeah, the issue is the import statement fails. I think that peerjs is using navigator/window on import time. I had to use a dynamic import - I am also going to post ont he peerjs forum to see if they can maybe refactor a little bit
@Ray use `dynamic` to disable ssr https://nextjs-faq.com/browser-api-client-component#using-nextdynamic-with-ssr-false
Eric Burel
@Ray I see you added a question mark to my answer, so I just wanted to explain more why I added this:
The thing is that next/dynamic will trigger lazy loading which in turns prevent some static optimizations and will involve an additional request to get your component JS code, so in my understanding, this is a last resort if:
- the import fails (that's OP case) and you can't refactor the library to tolerate SSR (eg Leaflet fails on import, but D3 can be imported on the server)
- the lib is actually too big (so it would make your page loading time too long) or not critical at all (rendering a lower priority content)
Otherwise you should use a normal import but rely on React DOM manipulation patterns that are safe for SSR like preventing the render before mount or wrapping code in the effect
(My understanding may be incorrect though I am open to feedback)