mirror of
https://github.com/hanzoai/next.js.git
synced 2026-10-30 14:46:38 +00:00
Jiachi LiuandGitHub
1a04d94aae
### What Reland #64716 Removing the Suspense boundary on top of `next/dynamic` by default, make it as `React.lazy` component with preloading CSS feature. * Remove `suspense` option in `next/dynamic` since it's already deprecated for a while * Remove the default loading in app router implmentation of `next/dynamic` ### Why Extra Suspense boundary is causing extra useless rendering. For SSR, it shouldn't render `loading` by default Related: #64060 Related: #64687 Closes [NEXT-3074](https://linear.app/vercel/issue/NEXT-3074/app-router-content-flickering-with-reactcreatecontext-and-nextdynamic) This is sort of a breaking change, since removing the Suspense boundary on top of `next/dynamic` by default. If there's error happening in side the dynamic component you need to wrap an extra Suspense boundary on top of it
31 lines
528 B
TypeScript
31 lines
528 B
TypeScript
// use tsx to cover typescript usage of next/dynamic + suspense: true
|
|
|
|
import React from 'react'
|
|
import dynamic from 'next/dynamic'
|
|
|
|
const Red = dynamic(() => import('../../components/red'))
|
|
|
|
function Blue() {
|
|
return (
|
|
<div>
|
|
<p>This is Blue.</p>
|
|
<style jsx>{`
|
|
p {
|
|
color: blue;
|
|
}
|
|
`}</style>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default function StyledJsx() {
|
|
return (
|
|
<>
|
|
<Blue />
|
|
<React.Suspense fallback="Loading...">
|
|
<Red />
|
|
</React.Suspense>
|
|
</>
|
|
)
|
|
}
|