diff --git a/src/content/reference/react/Suspense.md b/src/content/reference/react/Suspense.md index ec62d2424de..412cdc5ec46 100644 --- a/src/content/reference/react/Suspense.md +++ b/src/content/reference/react/Suspense.md @@ -79,6 +79,12 @@ React will display your loading fallback until all In the example below, the `Albums` component *suspends* while fetching the list of albums. Until it's ready to render, React switches the closest Suspense boundary above to show the fallback--your `Loading` component. Then, when the data loads, React hides the `Loading` fallback and renders the `Albums` component with data. + + +Do not use a module-level cache like the one in `data.js` below in server environments such as Next.js. Module-level state persists across requests and can leak data between users. Use your framework's built-in caching, [`cache`](/reference/react/cache) in Server Components, or scope caches per request (for example, with a Context and `useRef`). + + + ```js src/App.js hidden @@ -148,6 +154,8 @@ export default function Albums({ artistId }) { // Note: the way you would do data fetching depends on // the framework that you use together with Suspense. // Normally, the caching logic would be inside a framework. +// This module-level cache is only suitable for this client-only demo. +// Do not copy it into server environments. let cache = new Map(); @@ -316,6 +324,8 @@ export default function EffectAlbums({ artistId }) { // Note: the way you would do data fetching depends on // the framework that you use together with Suspense. // Normally, the caching logic would be inside a framework. +// This module-level cache is only suitable for this client-only demo. +// Do not copy it into server environments. let cache = new Map(); @@ -606,6 +616,8 @@ export default function Albums({ artistId }) { // Note: the way you would do data fetching depends on // the framework that you use together with Suspense. // Normally, the caching logic would be inside a framework. +// This module-level cache is only suitable for this client-only demo. +// Do not copy it into server environments. let cache = new Map(); @@ -868,6 +880,8 @@ export default function Albums({ artistId }) { // Note: the way you would do data fetching depends on // the framework that you use together with Suspense. // Normally, the caching logic would be inside a framework. +// This module-level cache is only suitable for this client-only demo. +// Do not copy it into server environments. let cache = new Map(); @@ -1052,6 +1066,8 @@ export default function SearchResults({ query }) { // Note: the way you would do data fetching depends on // the framework that you use together with Suspense. // Normally, the caching logic would be inside a framework. +// This module-level cache is only suitable for this client-only demo. +// Do not copy it into server environments. let cache = new Map(); @@ -1236,6 +1252,8 @@ export default function SearchResults({ query }) { // Note: the way you would do data fetching depends on // the framework that you use together with Suspense. // Normally, the caching logic would be inside a framework. +// This module-level cache is only suitable for this client-only demo. +// Do not copy it into server environments. let cache = new Map(); @@ -1495,6 +1513,8 @@ export default function Panel({ children }) { // Note: the way you would do data fetching depends on // the framework that you use together with Suspense. // Normally, the caching logic would be inside a framework. +// This module-level cache is only suitable for this client-only demo. +// Do not copy it into server environments. let cache = new Map(); @@ -1807,6 +1827,8 @@ export default function Panel({ children }) { // Note: the way you would do data fetching depends on // the framework that you use together with Suspense. // Normally, the caching logic would be inside a framework. +// This module-level cache is only suitable for this client-only demo. +// Do not copy it into server environments. let cache = new Map(); @@ -2118,6 +2140,8 @@ export default function Panel({ children }) { // Note: the way you would do data fetching depends on // the framework that you use together with Suspense. // Normally, the caching logic would be inside a framework. +// This module-level cache is only suitable for this client-only demo. +// Do not copy it into server environments. let cache = new Map();