#How to disable server side pre-rendering in Vercel?

12 messages · Page 1 of 1 (latest)

tardy oar
#

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)
deep horizonBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

slow pelican
tardy oar
#

thanks!

deep horizonBOT
#
✅ Success!

This question has been marked as answered! If you have any other questions, feel free to create another post

Jump to answer

[Click here](#1200192817721520259 message)

autumn prism
#

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

tardy oar
#

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

autumn prism
# slow pelican use `dynamic` to disable ssr https://nextjs-faq.com/browser-api-client-component...

@slow pelican 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