这是我参与「第五届青训营 」伴学笔记创作活动的第 9 天。Next.js是基于React的一个轻量级框架，能够实现服务端渲染和生成静态网站。
什么是CSR、SSR、SSG？
- CSR——客户端渲染(Clinet-Side Rendering)。前后端分离，服务器压力较小，渲染在客户端进行。
- SSR——服务器端渲染(Server-Side Rendering)。在浏览器中生成和操作DOM，将服务器端的响应返回给客户端。
- SSG——静态站点生成(Static Site Generation)。在构建时将结果页面输出html到磁盘，每次访问将html返回给客户端，相当于一个静态资源。相较于SSR减轻了服务器daunt的压力，但每个用户访问的页面都相同。
SSR：渲染在服务器端完成，且代码耦合度较高，后续代码维护会比较麻烦
课程中提到脱水和注水的概念：在服务器端返回给模板页面的数据不匹配，如果要保持服务器端和页面数据的一致，会有脱水 和 注水 的过程。
数据注入：
getServerSideProps：SSR，区别于getInitialProps即使使用router跳转当前页，也只会在服务端执行逻辑
export const getserverSideProps = async (context) =>{
const { articleId } = context.query;
const { data } = await axios.get(` ${LOCALDOMAIN}/api/articleInfo`, {
params : {articleId,
},
});
return {
props: data,//需要拿props包裹;
};
-
getStaticProps:SSG，在服务器端构建时执行。若使用router跳转当前页，会在客户端执行逻辑。 -
getInitialProps：在服务器端执行，只在页面层面进行绑定，采用同构，首次渲染服务器端渲染，路由跳转使用客户端路由。
Article-getInitialProps = async (context) =>{
const { article1d } = context.query;
const { data } = await axios.get(` ${LOCALDOMAIN}/api/articleInfo`, {
params: {
articleId,
},
});
return data;
};
- 客户端注入
Next.js客户端开发
创建好项目之后，可以引入布局Layout，实现每页的共享布局，例如，导航栏和页脚部分。
以首页为例，首页内容中的顶部（综合&关注）一栏也可以使用共享布局，但是按照官方文档给的方案并不能解决这个问题（没有固定在首页子DOM元素的顶部）。
原本是想在子页面中引入组件，但是太过繁琐，感觉代码复用比较高。
分析后发现，自己的需求就是每个页面布局，定义getLayout函数将children传递到对应的页面即可。
//_app.tsx
export type NextPageWithLayout = NextPage & {
getLayout?: (page: React.ReactElement) => React.ReactNode
}
type AppPropsWithLayout = AppProps & {
Component: NextPageWithLayout
}
export default function MyApp({ Component, pageProps }: AppPropsWithLayout) {
const getLayout = Component.getLayout ?? ((page) => page)
console.log(Component.getLayout, '2222')
return <Layout>{getLayout(<Component {...pageProps} />)}</Layout>
}
//Home.tsx
Home.getLayout = function getLayout(page: React.ReactElement) {
return <div>{page}</div>;
};
实现后的效果。
- 样式部分与一般差异不大，需要注意的是样式有全局样式以及组件级别的样式。
- 路由，在官方文档介绍的比较详细。
总结
Next作为SSR渲染有其独特的优势，对于初学者比较友好，也是基于React的框架。对于自己来说，因为是初学React有比较多的知识点不能串联起来，文章中的问题也是花了比较长的时间去解决，还是需要多练才能了解的更深刻。
