动态内容静态化

在服务端将动态的内容渲染成静态页面之后，发送给客户端，这样就没有白屏时间，速度非常快。

getStaticProps 获取 posts

  1. import {NextPage} from 'next';
  2. import {getPosts} from '../../lib/posts';
  4. type Props = {
  5.   posts:Post[]
  6. }
  8. const PostsIndex: NextPage<Props> = (props) => {
  9.   const {posts} = props
  10.   return (
  11.     <div>
  12.       <h1>文章列表</h1>
  13.       {posts.map(p =><div key={p.id}>
  14.         {p.id}
  15.       </div>)}
  16.     </div>
  17.   );
  18. };
  20. export default PostsIndex;
  22. export const getStaticProps = async () =>{
  23.   const posts = await getPosts()
  24.   return {
  25.     props:{
  26.       posts:JSON.parse(JSON.stringify(posts))
  27.     }
  28.   }
  29. };

要记住的是，getStaticProps是在build的时候执行的