Може да не се нуждаете от изчакване от най-високо ниво в Next.js

Днес ще проучим малко функцията за изчакване от най-високо ниво, въведена в ES2022, и ще обясним защо може да не я използвате във вашия проект по време на процеса на разработка, въпреки че това е страхотна добавка към функцията. Любопитен? Нека го копаем!

Очаквайте кратко въведение към най-високото ниво

Както знаете await е характеристиката на асинхронния JavaScript и за да използваме await трябва да имаме функция async.

const msg = async () => { // async function
  const res = await fetch('/message') // use of await
  const data = await res.json()
  console.log(data)
}

Използването на await във функция, която няма асинхронен подпис, ще доведе до грешка.

const msg = () => { // no async
  const res = await fetch('/message') // error
}

Както забелязвате, не можем да използваме await без функция async. Но ES2022 въведе функция за изчакване от най-високо ниво и използването й JavaScript ще разпознае модула като async модул.

const language = 'english'
// top level await
const data = await import(`../messages/${language}`)
const msg = () => {
  console.log(data)
}

Забележете, че все още не можете да използвате await в обхват на функция, който няма async подпис.

const msg = () => {
  const language = 'english'
  const data = await fetch(`/messages/${language}`) // error
}

Използване на await за зареждане на най-бързия ресурс

Използването на Promise.any ще ви позволи да заредите ресурса, който първи извлича данните.

const data = await Promise.any([
  fetch('/messages/english')
    .then(response => response.json()),
  fetch('/messages/default')
    .then(response => response.json()),
])

data може да се зареди или от /english, или от /default, което от двете се извлече първо.

Използване на чакане от най-високо ниво в Next.js

Най-новата версия на Next.js поддържа функцията за изчакване от най-високо ниво ES2022. И така, нека настроим проекта с най-новата версия на Next.js с поддръжка на TypeScript.

npx create-next-app@latest --typescript

Конфигурирайте Next.js за поддръжка на най-високо ниво на очакване

// next.config.js
webpack: (config) => {
  config.experiments = {
    topLevelAwait: true,
  }
  return config
}

// tsconfig.json
"compilerOptions": {
  "target": "es2017",
}

Сега можете да използвате функцията за изчакване от най-високо ниво във вашето приложение Next.js.

const language = "english"
const messages = await fetch(`/messages/${language}`)
const data = await messages.json()
const Home: NextPage = () => {
  return data.map((delivery, index) => (
    <div key={index}>{delivery.time}</div>
  )
}

Готов си! Сега можете да видите данните, заредени от най-високото ниво, чакащи използване.

Може да излеете мнението си с уау тембър — динамично внасяне с await. Но позволете ми да обясня защо не се нуждаете от него, докато използвате Next.js в следващия раздел.

Използване на getServerSideProps

Да, използвайки getServerSideProps ще получите точно подобна функция в сравнение с функцията за изчакване от най-високо ниво. Освен това ще бъдат изобразени от сървъра данни за разлика от клиентските данни от най-високо ниво, чакащи при поискване.

const Home: NextPage = ({data}) => {
  return data.map((delivery, index) => (
    <div key={index}>{delivery.time}</div>
  )
}
export async function getServerSideProps() {
  const language = 'english'
  const res = await fetch(`/messages/${language}`)
  const data = await res.json()
  return {
    props: { data },
  }
}

Следователно, по мое мнение, не мисля, че ще имам нужда от функцията за изчакване от най-високо ниво на ES2022, докато използвам Next.js. Но познаването му ще ви помогне в бъдещия процес на развитие.

Възможно е обаче да има някои случаи, когато може да се наложи да използваме функцията за изчакване от най-високо ниво. Ако открия нещо специално, за което трябва да се нуждаем от функция за изчакване от най-високо ниво, тогава ще бъда публикуван тук. Дотогава, моля, споделете вашите отзиви или мнение в коментар...