Benefits of next/dynamic with ssr: true
Regular import
When using a regular component import, Next.js bundles the component’s code together with the rest of the components for a given route. This usually means you end up with a big chunk containing all the components code for each route.
next/dynamic
with ssr: true
When using next/dynamic
with ssr: true
, Next.js splits the component’s code into a separate chunk (code splitting) and loads that chunk separately (lazy loading).
This means that for the scenario that you described:
import dynamic from 'next/dynamic' const DynamicButton = dynamic(() => import('./dynamicButton'), { ssr: true }) ... return showButton && <DynamicButton /> |
The DynamicButton
component only gets loaded when showButton
is truthy. This has the benefit of reducing the amount of JavaScript that’s loaded on initial page load.
next/dynamic
with ssr: false
When using next/dynamic
with ssr: false
, all the above benefits of the dynamic import also apply. However, the component’s code will not get preloaded on the server and will only run on the client. This is typically useful when the component includes a library or API that only works in the browser.