Next 全解

2020-07-19  本文已影响0人  littleyu

Next.js 的背景

开发团队是 zeit

Next.js 的定位

Node.js 全栈框架

弱项

Link 快速导航

用法

优点

吐槽

传统导航，访问 page2 时是浏览器请求 相比传统导航，访问 page2 时是 page1 用AJAX请求页面（在network中可见）

同构代码

一份代码运行在两端（省了一份）

注意差异

全局配置

pages/_app.js

注意

全局 CSS

放在 _app.js 里

插曲

局部 CSS

官方支持

React 个人体验

静态资源

next 推荐放在 public 里

所以需要配置自定义 webpack config

// file-loader 
module.exports = {
  webpack: (config, options) => {
    config.module.rules.push({
      test: /\.(jpg|png|gif|svg)$/,
      use: [
        {
          loader: 'file-loader',
          options: {
            name: '[name].[contenthash].[ext]', // 文件名称
            outputPath: 'static', // 硬盘路径
            publicPath: '_next/static', // 网站路径
          }
        },
      ],
    })

    return config
  },
}

// next-images
const withImages = require('next-images')
module.exports = withImages({
  webpack(config, options) {
    return config
  }
})

启用 Typescript

创建 tsconfig.json

重启服务 yarn dev

Next.js API

目前的页面

const posts: NextApiHandler = async (req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'application/json');
  const posts = await getPosts() // 数据库操作
 res.end(JSON.stringify(posts))
}

export default posts

API

/api/ 里的文件是 API

API 文件默认导出 NextAPIHandler

Next.js 三种渲染方式

客户端渲染

静态页面生成（SSG）

服务端渲染（SSR）

注意：SSR 和 SSG 都属于预渲染 Pre-rendering

旧瓶装新酒

三种渲染方式分别对应

与传统的后端不同点

客户端渲染的缺点

白屏

SEO 不友好

静态内容 VS 动态内容

上图的静态内容

参考 React SSR 的官方文档

推论

静态页面生成（SSG）

背景

getStaticProps 获取 posts

声明位置

export const getStaticProps: GetStaticProps = async () => {
  const posts = await getPosts()
  return {
    props: {
      posts,
    }
  }
}

必须按照这个格式，不能变（命名和返回值{ props: {...} }）

打开控制台我们可以清楚的看见，原来我们需要通过 AJAX 的内容，直接被打包进 HTML 里面了，这样浏览器不需要用 AJAX 就可以直接拿到数据了！

这就是同构 SSR 的好处：后端数据可以传给前端

前端 JSON.parse 一下就能够得到了 posts（现在 Next.js 帮你做了）

难道 PHP / Java / Python 就做不到么

静态化的时机

解读打包文件

动态内容静态化

优点

getServerSideProps

用户相关动态内容

就难提前静态化

所以

运行时机

参数

export const getServerSideProps: GetServerSideProps = async (context) => {
  const ua = context.req.headers["user-agent"]
  return {
    props: {
      ua,
    }
  }
}

必须按照这个格式，不能变（命名和返回值{ props: {...} }）

这个栗子展示了用户访问的浏览器，这些信息我们不可能提前（在用户请求之前）知道

总结

静态内容

动态内容

动态内容静态化

用户相关动态内容静态化

流程图

有动态内容吗？没有什么都不用做，自动渲染为 HTML
动态内容跟客户端相关？相关就只能用客户端渲染（BSR）
动态内容跟请求/用户相关吗？相关就只能用服务端渲染（SSR）或 BSR
其他情况可以用 SSG 或 BSR

补充：路由的另一个功能

点击列表查看详情功能

<Link href="/posts/[id]" as={`/posts/${post.id}`}>
    <a>{post.title}</a>
</Link>

但是新建的文件叫做什么

/pages/posts/[id].tsx 的作用

实现

上一篇 下一篇

猜你喜欢

热点阅读