Learn how to disable SSR in Next.js and use it to replace Create React App or any custom tooling.
Next.js is my absolute favorite tool for deve...
For further actions, you may consider blocking this person and/or reporting abuse
If you import the component with next/dynamic you have an option which you can pass in {ssr: false }
Yes, that is useful.
next/dynamicalso allows you to send a smaller initial JavaScript bundle to the browser, which is great for performance!I tried using
next/dynamic, and I am still getting the same errors I am getting in production. Thewindowerror.What's the difference between this method and simply importing my main App component with next/dynamic and passing {ssr: false}?
Haven’t tried to do that, so not sure. Using
next/dynamicmight lead to one additional JS bundle.Also, if you want multiple entrypoints (like
pages/index.jsandpages/account.js) you’d need to remember to do the dynamic import in each file separately.In this scenario, what's the point in keeping using Next.js at all? No SSR, no routing, so why would one use this workaround and keep staying with Next.js instead of using something like
create-react-app?Next.js is just better than
create-react-appin many small ways. It has everything thatcreate-react-apphas and more in a very developer-friendly package.One major thing I can mention that you never need to "eject" from Next.js the way you might need to do with
create-react-app. You can customize your Webpack Config and be happy (nextjs.org/docs/api-reference/next...).Also, even if you don't need SSR now, it does not mean you won't need it in the future. Using Next.js as your tooling will allow you to use SSR/SSG for some pages and normal client-side rendered behavior SPA for others.
So, the idea is to use Next.js but not its killer features because "just in case"?
What do you mean by not using Next.js's "killer features"?
Because you don't need SSR every time blog.usejournal.com/when-should-i-...
NextJS only does this with the
next startcommand, it can be used with smaller serverless platforms that can reduce costs.Correct, serverless is cheaper. Still, even a serverless platform will cost more than a CDN serving plain HTML, and even if the platform hides the complexity of doing SSR at scale, it still exists.
If you're able to use Vercel, things will work nicely out of the box. They've invested millions in having a developer-friendly platform that hides all the complexity of the underlying serverless infrastructure and tooling. 🤗
With platforms like Netlify or AWS, you'll have to do a little bit more work, but there are developer-friendly solutions like github.com/netlify/next-on-netlify and serverless.com/blog/serverless-nextjs.
However, many companies cannot use serverless solutions. I can talk from experience that running your own Node.js servers to do SSR is not very simple. Would not do it again. 😫
Despite all the criticism to this article, I would like to thank @apkoponen for this wonderful article.
People may say that what is the use of next-js then but people coming from nuxt.js side will understand the importance of this article. Also, it helps us to get a bit better understanding of how exactly next.js works.
Thanks again @apkoponen
Hi @apkoponen ,
thanks for the article. it really helps us. currently we are using nextjs and we would like to run it on http server such as : nginx or apache httpd. and API also already built by other team, so we don't really need ssr in our case.
i also agree with you about nextjs in some cases better than create-react-app
I'm interested in trying nextjs for the DX benefits, though I've heard horror stories about SSR intricacies, and personally I don't want to learn that if I don't have to.
The redirect stuff seems like a bit of a hack. Does this make it so the user can't refresh on their current page, and they are automatically sent back to the root (or whatever you redirected to)?
Would you be able to explain how you go from a client-side-only project (like one made from CRA), and modify it to work with nextjs (with no SSR enabled on purpose)? Assume things like react-router is already set up. What are the main benefits of making the switch tool nextjs in this case?
Also check out this thread
stackoverflow.com/questions/531398...
Worth mentioning the
targetoption is now deprecated/removedI have been having a hosting issue because of the
windowerror. I'd try this to see if it works. Mind that I diddynamic importsand used theundefinedmethods, to no awail