next介绍

在ssr设计中主要考虑三个点：

模板页面渲染(renderToString,hydrate)，
路由匹配(服务端路由和前端路由)，
html页面的header修改

1. next app 创建

npx create-next-app@latest --typescript npm install sass --save-dev npm run lint 配置lint，next已经内置了lint

sass提示插件，css module的写法来实现样式隔离，避免冲突 npm install typescript-plugin-css-modules --save-dev 文件目录 next.config.js 是 nextjs 的构建配置 Nextjs 的入口文件是 pages下的 _app.tsx

2. 约定式路由介绍

根据相对 pages 的目录路径来生成对应的路由

3. 数据注入 next获取数据的三种方法

getInitialProps： 多用于静态页面的渲染，它只会在生产中执行，而不会在运行的时候再次调用，这意味着它只能用于不常编辑的部分，每次调整都需要重新构建部署

getStaticProps ：初始化的时候，如果是服务器端路由，那么数据的注入会在服务器端执行，对 SEO 友好，在实际的页面操作中，相关的逻辑会在客户端执行，从而减轻了服务器端的负担

getServerSideProps： 只会执行在服务器端，不会在客户端执行。因为这个特性，所以客户端的脚本打包会较小，相关数据不会有在客户端暴露的问题，相对更隐蔽安全，不过逻辑集中在服务器端处理，会加重服务器的负担，服务器成本也会更高。

4.head修改

next中带有head的处理，不用我们导入helmet来单独处理

import Head from "next/head";

    <Head>
        <title>A Demo for 《深入浅出SSR官网开发指南》</title>
        <meta
          name="description"
          content="A Demo for 《深入浅出SSR官网开发指南》"
        />
        <link rel="icon" href="/favicon.ico" />
      </Head>

next使用介绍

next介绍

1. next app 创建

2. 约定式路由介绍

3. 数据注入 next获取数据的三种方法

4.head修改