NextJS(ReactSSR)

pre-render： 预渲染

1. 静态化

发生的时间：next build

1). 纯静态化

2). SSG: server static generator

getStaticProps: 当渲染组件之前会运行 生成html + json

//该函数只可能在服务端运行
//该函数运行在组件渲染之前
//该函数只能在build期间运行
//返回的对象中的props属性，将被混合到整个组件属性
export async function getStaticProps() {const resp = await getMovies(1, 20);return {props: {movies: resp.data}};
}

getStaticPaths: 当渲染组件之前会运行 解决动态路由

//该函数用于得到有哪些可能出现的id
export async function getStaticPaths() {const resp = await getMovies();const paths = resp.data.map(m => ({params: {id: m._id}}));console.log("getStaticPaths");return {paths,fallback: true};
}

fallback:
false: 什么都不做，如果没有静态页面，返回404
true: 会给[id].html

什么时候要使用静态化：

如果你的页面不是根据不同的请求而展示不同，则推荐使用静态化

2. SSR： server side render 服务端渲染

根据每一次请求获取数据，进行渲染

// 每次请求到达后都会运行
// 仅在服务器端运行
// req, res, query
export async function getServerSideProps({ query }) {const page = +query.page || 1;console.log("getServerSideProps");const resp = await getMovies(page, 10);return {props: {movies: resp.data,page,total: resp.count,limit: 10}};
}