NextJs教程系列(四)：路由loading

loading加载

loading.js 可以帮助你使用React Suspense创建一个组件, 当你在加载路由内容时，它会显示该加载状态组件，渲染完成后，新的内容将会自动替换。

传统ssr渲染流程

传统的ssr渲染流程，当用户请求一个页面时，服务器会根据路由匹配到对应的组件，然后渲染该组件，最后将渲染后的html返回给用户。

如果组件中存在异步数据，那么服务端会等待异步数据加载完成之后再渲染，这样可能会导致页面白屏时间较长的问题。

而next.js提供了一种新的渲染方式，即流式渲染。

流式渲染

所谓的流式渲染，就是把一个组件拆分成多个小块，然后分块渲染。

这样的话，当客户端请求页面时会优先展示静态内容，等到服务端异步数据加载完成并渲染成功后，客户端再继续渲染剩余的内容。

但是，需要注意一点，流式渲染并不会提高整个页面的加载速度，只是将白屏时间缩短了。

Suspense

Next.js提供的Suspense组件和传统的spa中使用的Suspense组件是不同的。

• 传统spa中的Suspense组件需要搭配React提供的lazy函数一起使用，用于加载异步组件。
• Next.js中的Suspense组件则是用于加载异步数据的，不需要搭配lazy函数，当异步组件渲染完成时，会显示该组件中的内容。
• 还需要注意一点，Next.js中的Suspense并不会主动分包，而spa中的会根据import函数中的path自动分包，这一点需要额外注意。

Example

app/post/page.js

import { Suspense } from 'react'
import { PostFeed, Weather } from './Components'

export default function Posts() {
    return (
        <section>
            <Suspense fallback={<p>Loading feed...</p>}>
                <PostFeed />
            </Suspense>
            <Suspense fallback={<p>Loading weather...</p>}>
                <Weather />
            </Suspense>
        </section>
    )
}

PostFeed

export default async function PostFeed() {
        const list = await fetch('https://xxx')
        return (<pre>list</pre>)
}

Weather

export default async function Weather() {
        const list = await fetch('https://xxx')
        return (<pre>list</pre>)
}

为了方便读者阅读完整的教程，可直接访问作者的教程文档：
https://blog.chdl.fun/ChBlog/docs/category/nextjs