Streaming Parts of a Web Page (Suspense) Part 1

Next.js has quickly matured into a full stack solution and one of the tools in its arsenal is streaming content. Specifically you can plan to serve the slower-loading parts of a requested web page using a placeholder (fallback) that gets displayed while your slow (blocking) background process completes (think "slow returning API request from a busy NHL server during hockey playoffs" or "giant database query that takes forever to return"....)

1import { Suspense } from 'react'
2import { PostFeed, Weather } from './Components'
3 
4export default function Posts() {
5  return (
6    <section>
7      <Suspense fallback={<p>Loading feed...</p>}>
8        <PostFeed />
9      </Suspense>
10      <Suspense fallback={<p>Loading weather...</p>}>
11        <Weather />
12      </Suspense>
13    </section>
14  )
15}