next.js入门之progressive-render渐进式渲染

地址:https://github.com/vercel/next.js/blob/canary/examples/progressive-render/pages/index.js

 

1.简介

 

next.js要实现渐进式渲染,即在数据没有准备好时渲染loadig

 

2.实现

 

import { useState,useEffect } from 'react'
import Loading from '../components/Loading'

export default function HomePage() {
    const [mounted, setMounted] = useState(false)
    useEffect(() => {
        setTimeout(function(){
            console.log('set true')
        setMounted(true)
        },3000)
    }, [])

    return (
        <main>
        <section>
            <h1>This section is server-side rendered.</h1>
        </section>

        {mounted ? (
            <section>
            <h2>
                This section is <em>only</e
上一篇:anaconda navigator登录停在Loading applications


下一篇:Anaconda启动的时候一直停在loading applications不动的解决方案