When developing with Next.js, you will encounter some components that do not provide SSR support (very normal, after all, SSR is a relatively niche application scenario. In addition, some components will depend on the context of the browser environment ), in this case we need a way to implement support for non-SSR components.
Generally speaking, there are two ways. One is to use useEffects to control the loading of components, so that the components are only loaded at the client level, and the components are not loaded when the server renders.
Another way is to consider using the Dynamic Import feature that comes with Next.js to complete the introduction of components.
The usage level is relatively simple. The way to introduce components is changed from direct introduction to the outermost layer of dynamic functions.
import dynamic from 'next/dynamic'const DynamicComponentWithNoSSR = dynamic( () => import('../components/hello3'), { ssr: false })function Home() { return ( <div> <Header /> <DynamicComponentWithNoSSR /> <p>HOME PAGE is here!</p> </div> )}export default Home
Summarize
The solution to this problem reignited my interest in Next.js. In the past, because I was not sure how to solve the problems in the browser and client environment, I was a little bit afraid of Next.js; now the problem has been solved, and I can continue to use Next.js with confidence.
reference reading
https://nextjs.org/docs/advanced-features/dynamic-import
This article is reprinted from: https://www.ixiqin.com/2022/05/08/next-js-to-realize-dynamic-introduction-implementation-of-ssr-components/
This site is for inclusion only, and the copyright belongs to the original author.