网站建设制作设计公司佛山,wordpress推送百度升级,游戏网站做关键字,建设网站通过什么赚钱pre-render#xff1a; 预渲染
1. 静态化
发生的时间#xff1a;next build
1). 纯静态化
2). SSG: server static generator
getStaticProps: 当渲染组件之前会运行 生成html json
//该函数只可能在服务端运行
//该函数运行在组件渲染之前
//该函数只能在build期间运…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}};
}
