a2dc530f44
## Issue To address the problem that we introduced in 13.0.7 (#42589) where we thought we could use same implementation `next/dynamic` for both `pages/` and `app/` directory. But it turns out it leads to many problems, such as: * SSR preloading could miss the content, especially with nested dynamic calls * Closes #45213 * Introducing suspense boundary into `next/dynamic` with extra wrapped `<Suspense>` outside will lead to content is not resolevd during SSR * Related #45151 * Closes #45099 * Unexpected hydration errors for suspense boundaries. Though react removed this error but the 18.3 is not out yet. * Closes #44083 * Closes #45246 ## Solution Separate the dynamic implementation for `app/` dir and `pages/`. For `app/` dir we can encourage users to: * Directly use `React.lazy` + `Suspense` for SSR'd content, and `next/dynamic` * For non SSR components since it requires some internal integeration with next.js. For `pages/` dir we still keep the original implementation If you want to use `<Suspense>` with dynamic `fallback` value, use `React.lazy` + `Suspense` directly instead of picking up `next/dynamic` * Closes #45116 This will solve various issue before react 18.3 is out and let users still progressively upgrade to new versions of next.js. ## Bug Fix - [x] Related issues linked using `fixes #number` - [x] Integration tests added - [ ] Errors have a helpful link attached, see [`contributing.md`](https://github.com/vercel/next.js/blob/canary/contributing.md)
17 lines
386 B
TypeScript
17 lines
386 B
TypeScript
/**
|
|
* @jest-environment jsdom
|
|
*/
|
|
import React from 'react'
|
|
import { act, render } from '@testing-library/react'
|
|
import dynamic from 'next/dynamic'
|
|
|
|
describe('next/dynamic', () => {
|
|
it('test dynamic with jest', () => {
|
|
const App = dynamic(() => import('./fixtures/stub-components/hello'))
|
|
|
|
act(() => {
|
|
const { unmount } = render(<App />)
|
|
unmount()
|
|
})
|
|
})
|
|
})
|