你好，Next.js 13

除了 app 目录下嵌套路由部分 next.js 会帮咱们默许选用 React Server Components，咱们在 page 页面中，也可以完成。

完成办法也很简单，组件外层运用 Suspense

import { SkeletonCard } from '@/ui/SkeletonCard';
import { Suspense } from 'react';
import Description from './description';
export default function Posts() {
  return (
    <section>
      <Suspense
        fallback={
          <div className="w-full h-40 ">
            <SkeletonCard isLoading={true} />
          </div>
        }
      >
        <Description />
      </Suspense>
    </section>
  );
}

组件数据恳求运用 use API，就可以完成流烘托了。

import { use } from 'react';
async function fetchDescription(): Promise<string> {
  return fetch('http://www.example.com/api/data').then((res)=>res.text())
}
export default function Description() {
  let msg = use(fetchDescription());
  return (
    <section>
      <div>{msg}</div>
    </section>
  );
}

运用场景

从官方的 playground 中看，在一些恳求较慢的接口，比方电商网站中的价格核算，若要运用服务端烘托，就可以运用 server Component。

你好，Next.js 13

服务端组件和客户端组件

Next.js 最大的优势便是咱们只需求一个工程，就可以搞定前端工程和后端工程，哪些是前端代码和哪些是后端代码，Next.js 在打包的时分就会帮咱们主动区别，这需求开发者清楚地了解，自己写的代码哪些是在服务端履行，哪些是在客户端履行。

Next12 区别

咱们知道 Page 函数都是在服务端履行的，包括 getServerSideProps、getStaticPaths、getStaticProps，那么假如需求在客户端履行有以下 2 种办法；

  • 在 useEffect、 onChange 等回调函数中运用，比方下面比方，动态加载了 fuse.js，完成模糊搜索。
import { useState } from 'react'
const names = ['Tim', 'Joe', 'Bel', 'Lee']
export default function Page() {
  const [results, setResults] = useState()
  return (
    <div>
      <input
        type="text"
        placeholder="Search"
        onChange={async (e) => {
          const { value } = e.currentTarget
          // Dynamically load fuse.js
          const Fuse = (await import('fuse.js')).default
          const fuse = new Fuse(names)
          setResults(fuse.search(value))
        }}
      />
      <pre>Results: {JSON.stringify(results, null, 2)}</pre>
    </div>
  )
}
  • 假如依靠了外部组件，或许 window 目标，可以运用 next/dynamic 而且设置 ssr 为 false 
import dynamic from 'next/dynamic'
const DynamicHeader = dynamic(() => import('../components/header'), {
  ssr: false,
})

Next13 区别

在 Next13 中 ， 在 app 目录下，如要运用 useState 等状况办理的 hook，那么该组件只在客户端履行，需求在首行加入 'use client' 指令。

'use client';
import { useState } from 'react';
export default function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

该区别服务端组件和客户端组件，下表列出了常用运用场景

运用场景 服务端组件 客户端组件
fetch 恳求数据。 ✅ [⚠️]
拜访后端资源（直接） ✅ ❌
在服务器上保存灵敏信息（拜访令牌、API 密钥等） ✅ ❌
坚持对服务器的很多依靠/减少客户端 JavaScript ✅ ❌
添加交互和事情侦听器（onClick(),onChange()等） ❌ ✅
运用状况和生命周期效果（useState(),useReducer(),useEffect(), 等） ❌ ✅
运用仅限浏览器的 API(window) ❌ ✅
运用依靠于状况、效果或仅浏览器 API 的自定义 hooks ❌ ✅
运用React 类组件 ❌ ✅

数据恳求

运用 react 的 use 函数加 fetch API 来完成：静态站点生成（SSG）、服务器端烘托（SSR）和增量静态再生（ISR）

在 Page 页面运用 fetch：

import { use } from 'react';
async function getData() {
  const res = await fetch('...');
  const name: string = await res.json();
  return name;
}
export default function Page() {
  // 支撑的全类型的数据格局
  // 可以回来不用序列化的格局数据
  // 因而可以回来 Date, Map, Set, 等.
  const name = use(getData());
  return '...';
}

fetch 的缓存策略

// 恳求被缓存
// 相当于 `getStaticProps`.
// `force-cache` 是默许值，可以省掉
fetch(URL, { cache: 'force-cache' });
// 每次改写都会从头恳求.
// 相当于 `getServerSideProps`.
fetch(URL, { cache: 'no-store' });
// 恳求被缓存10s，10s 从头生成
// 相当于 `getStaticProps` 加上 `revalidate` 参数.
fetch(URL, { next: { revalidate: 10 } });

运用这种办法的优点是，当恳求数据的添加，打包后前端 JavaScript 的大小不会添加。

新的 next/image

咱们知道在 Next.js 12 之前，运用 <img>标签，eslint 会有一个正告，提示咱们有必要运用 next/image 组件， 因为 next/image 帮咱们做了几点优化

  • 主动优化图片格局
  • 主动缩放图片大小
  • 运用Intersection Observer API 完成懒加载

所以 image 有必要加上 width 和 height 参数

新的 Next/image 运用了浏览器的 lazy-loading 代替了 Intersection Observer API 默许情况下需求 alt 符号，因而减少了客户端 JavaScript 代码，当然这个属性对浏览器要求较高，要求 chrome 77+。

import Image from 'next/image';
import avatar from './lee.png';
function Home() {
  // 为了进步可拜访性 "alt" 属性是有必要的
  // 图片可以运用放在 `app/`  目录下
  return <Image alt="leeerob" src={avatar} placeholder="blur" />;
}

@next/font

加入了一个新的包，可以在构建时直接引证 google 字体和本地字体，完成字体的保管和预加载，这点对英文网站很有用，中文网站一般不加载字体，图标主张运用 svg。

加载谷歌字体

import { Inter } from '@next/font/google';
const inter = Inter();
<html className={inter.className}>

加载本地字体

import localFont from '@next/font/local';
const myFont = localFont({ src: './my-font.woff2' });
<html className={myFont.className}>

next/link

主动加上 <a>标签。

Next.js 12: 需求<a> 包裹

import Link from 'next/link'
<Link href="/about">
  <a>About</a>
</Link>

Next.js 13: <Link> 不需求 <a>

<Link href="/about">
  About
</Link>

小结

本文首要结合了 Next13 官网博客 摘取了部分内容，结合笔者对 Next.js 的了解和分析，介绍了其变动、运用办法，以及其改动原因， Next13 这次更新首要与 React server component 深度结合，在”用户体会、可维护性、功能”这几个方面都带来了巨大的提高，本认为 React 的 Server component 还遥不可及，但 Next13 却让咱们触手可及， Next13 也将成为升级 React18 的首选结构，未来前后端并行的开发形式或许可以成为主流，这也将是对前端开发者的一个挑战。

以上便是本文的悉数内容，关于 Next13 你学会了吗？欢迎在谈论区留言讨论，文中若有不正之处，万望奉告。