Published 2022-05-08 20:10:25
Next.js - Pre-Rendering
Next.js 预渲染支持两种方式:
SSG 预渲染
SSG 预渲染是指在构建时生成 HTML,可以在没有数据的情况下完成,在这种情况下,HTML 页面将准备就绪,而无需预先获取数据,然后开始渲染。
数据可以稍后或应要求提供。
优点:这种方式可以解决白屏问题、SEO 问题
缺点:所有用户看到的都是同一个页面,无法生成用户相关内容
SSR 预渲染
后端将页面渲染,返回 HTML String 格式,传递到前端,前端进行 hydrate() ,会保留 HTML 并附上时间监听,也就是说后端渲染 HTML,前端添加监听。
前端也会渲染一次,用以确保前后端渲染结果一致
每个组件都有一个特殊的方法getStaticProps
,可用于获取数据并作为页面的属性传递数据。
使用 getServerSideProps
启动服务