[Next.js | 青训营笔记]

这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天

课程目标：具备C端Web应用开发能力。

SSR SSG CSR

• CSR 客户端渲染，B端WEB开发模式，前后端分离，服务器压力相对更轻，渲染工作在客户端进行。
• SSR 服务器端渲染，Java，PHP负责渲染逻辑，前端只负责UI交互。
• SSG 静态站点生成，构建时，把结果页面输出到磁盘，访问html返回给客户端，相当用户静态资源。

SSR，SSG优势 --更短的首屏时间

只需要请求一个HTML文件就能展现出页面。

next.js

进行同构原因 app.use(express.static(path.resolve(process.cwd(), 'client_build')));

数据注入

• getServerSideProps

与getInitialProps不同的是，即使使用router跳转当前页，也只会在服务端执行这部分逻辑。

  const { articleId } = context.query;
  const { data } = await axios.get(`${LOCALDOMAIN}/api/articleInfo`, {
    params: {
      articleId,
    },
  });
  return {
    props: data, // 需要拿props包裹
  };
};

• getStaticProps

SSG，在服务器端构建时执行，如果涉及动态路由，需要使用getStaticPaths配置所有可能的参数情况

export const getServerSideProps: GetServerSideProps = async context => {
  const { data: homeData } = await axios.get(`${LOCALDOMAIN}/api/home`);
   const { data: articleData } = await axios.post(`${LOCALDOMAIN}/api/articleIntro`, {
     pageNo: 1,
     pageSize: 6,
  });

   return {
     props: {
       title: homeData.title,
       description: homeData.description,
       articles: {
       list: articleData.list.map((item: IArticleIntro) => ({
         label: item.label,
         info: item.info,
         link: `${LOCALDOMAIN}/article/${item.articleId}`,
       })),
         total: articleData.total,
     },
     },
 };
 };

• getInitialProps

- Home.getInitialProps = async (context): Promise<IProps> => {
  const { data: homeData } = await axios.get(`${LOCALDOMAIN}/api/home`);
  const { data: articleData } = await axios.post(`${LOCALDOMAIN}/api/articleIntro`, {
    pageNo: 1,
    pageSize: 6,
  });

  return {
    title: homeData.title,
    description: homeData.description,
    articles: {
      list: articleData.list.map((item: IArticleIntro) => ({
        label: item.label,
        info: item.info,
        link: `${LOCALDOMAIN}/article/${item.articleId}`,
      })),
      total: articleData.total,
    },
  };
};

• 客户端注入

CSS Modules

next.js支持使用文件命名约定的CSS模块。

Layout

export const Layout: FC<ILayoutProps & { children: JSX.Element }> = ({
  navbarData,
  footerData,
  children,
}) => {
  return (
    <div className={styles.layout}>
      <NavBar {...navbarData} />
      <main className={styles.main}>{children}</main>
      <Footer {...footerData} />
    </div>
  );
};

文件式路由

有一个基于页面概念的基于文件系统的路由器。但一个文件被添加到pages目录中时，它会自动作为一个路径可用。

//.pages/demo/index.txs => /demo
//.pages/demo/[id].txs => /demo/:id
//.pages/demo/[...id].txs => /demo/a/b/c => id = ["a","b","c"]