javascript 前端 typescript 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

}

};

}

好文链接