Страницы

В Next.js, страница является компонентом экспортированным из .js, .jsx, .ts или .tsx файла в pages каталоге. Каждая страница связана с маршрутом на основе имени файла.

Пример: если вы создадите pages/about.js, который экспортирует компонент React, как показано ниже, он будет доступен по адресу /about.

function About() {
    return <div>About</div>
  }
  export default About

Страницы с динамическими маршрутами

Next.js поддерживает страницы с динамическими маршрутами. Например, если вы создадите файл с именем pages/posts/[id].js, он будет доступен по адресу posts/1, posts/2 и т.д.

Предварительный рендеринг

По умолчанию Next.js выполняет предварительный рендеринг каждой страницы. Это означает, что Next.js заранее генерирует HTML для каждой страницы, вместо того, чтобы делать все это с помощью клиентского JavaScript. Предварительный рендеринг может улучшить производительность и улучшить SEO.

Каждый сгенерированный HTML связан с минимальным кодом JavaScript, необходимым для этой страницы. Когда страница загружается браузером, выполняется ее код JavaScript, который делает страницу полностью интерактивной. (Этот процесс называется гидратацией .)

Две формы предварительного рендеринга

Next.js имеет две формы предварительного рендеринга: статическая генерация и рендеринг на стороне сервера. Разница в том, когда он генерирует HTML для страницы.

- Статическая генерация (рекомендуется) : HTML-код создается во время сборки и будет повторно использоваться при каждом запросе.

- Рендеринг на стороне сервера : HTML создается для каждого запроса.

Важно отметить, что Next.js позволяет вам выбрать, какую форму предварительного рендеринга вы хотите использовать для каждой страницы. Вы можете создать «гибридное» приложение Next.js, используя статическую генерацию для большинства страниц и используя рендеринг на стороне сервера для других.

Мы рекомендуем использовать статическую генерацию вместо рендеринга на стороне сервера из соображений производительности. Статически сгенерированные страницы могут кэшироваться CDN без дополнительной настройки для повышения производительности. Однако в некоторых случаях рендеринг на стороне сервера может быть единственным вариантом.

Вы также можете использовать рендеринг на стороне клиента вместе со статической генерацией или рендерингом на стороне сервера. Это означает, что некоторые части страницы могут быть полностью обработаны клиентским JavaScript. Чтобы узнать больше, ознакомьтесь с документацией по извлечению данных .

Статическая генерация (рекомендуется)

Если страница использует статическое создание, HTML-код страницы создается во время сборки. Это означает, что в производственной среде HTML страницы создаются при запуске next build. Затем этот HTML-код будет повторно использоваться для каждого запроса. Его можно кэшировать с помощью CDN.

В Next.js вы можете статически создавать страницы с данными или без них. Давайте рассмотрим каждый случай.

Статическая генерация без данных

По умолчанию Next.js выполняет предварительную отрисовку страниц с использованием статической генерации без извлечения данных. Вот пример:

function About() {
    return <div>About</div>
  }
  export default About

Обратите внимание, что этой странице не требуется получать какие-либо внешние данные для предварительной обработки. В подобных случаях Next.js генерирует один HTML-файл для каждой страницы во время сборки.

Статическая генерация с данными

Некоторые страницы требуют получения внешних данных для предварительного рендеринга. Есть два сценария, и один или оба могут применяться. В любом случае вы можете использовать специальную функцию, которую Next.js предоставляет:

1. Содержание вашей страницы зависит от внешних данных: Используйте getStaticProps.

2. Пути к вашим страницам зависят от внешних данных: Используйте getStaticPaths(обычно в дополнение к getStaticProps).

Сценарий 1. Содержание вашей страницы зависит от внешних данных

Пример. На странице вашего блога может потребоваться получить список сообщений блога из CMS (системы управления контентом).

 // TODO: Need to fetch 'posts' (by calling some API endpoint)
// before this page can be pre-rendered.
function Blog({ posts }) {
    return (
      <ul>
        {posts.map((post) => (
          <li>{post.title}</li>
        ))}
      </ul>
    )
  }
  export default Blog

Чтобы извлечь эти данные их надо предварительно вынести, Next.js позволяет export в async функции, вызываемой getStaticProps из того же файла. Эта функция вызывается во время сборки и позволяет передавать полученные данные на страницу props при предварительном рендеринге.

function Blog({ posts }) {
// Render posts...
}

// This function gets called at build time


      export async function getStaticProps() {
       // Call an external API endpoint to get posts
    const res = await fetch('https://.../posts')
    const posts = await res.json()
  // By returning {' props: posts '}, the Blog component
  // will receive 'posts' as a prop at build time
  return {
      props: {
        posts,
      },
    }
  }
  
  export default Blog

Чтобы узнать больше о том, как работает getStaticProps, ознакомьтесь с документацией по извлечению данных.

Сценарий 2. Пути к страницам зависят от внешних данных

Next.js позволяет создавать страницы с динамическими маршрутами. Например, вы можете создать файл с именем pages/posts/[id].js для отображения отдельного сообщения в блоге на основе id. Это позволит вам показывать сообщение в блоге, id: 1 когда вы входите в него posts/1.

Однако то, что id вы хотите предварительно отрисовать во время сборки, может зависеть от внешних данных.

Пример: предположим, что вы добавили id: 1 в базу данных только одно сообщение в блоге. В этом случае вам нужно выполнить предварительный рендеринг только posts/1 во время сборки.

Позже вы можете добавить второй пост с расширением id: 2. Тогда вы также захотите выполнить предварительный рендеринг posts/2.

Таким образом, ваши пути к страницам, которые предварительно отображаются, зависят от внешних данных. Чтобы справиться с этим, Next.js позволяет вам export в async функцию с именем getStaticPaths из динамической страницы (pages/posts/[id].js в данном случае). Эта функция вызывается во время сборки и позволяет указать, какие пути вы хотите предварительно визуализировать.

// This function gets called at build time
         export async function getStaticPaths() {
    // Call an external API endpoint to get posts
    const res = await fetch('https://.../posts')
    const posts = await res.json()
  
    // Get the paths we want to pre-render based on posts
    const paths = posts.map((post) => '/posts/${post.id}')
  
    // We'll pre-render only these paths at build time.
    // { fallback: false } means other routes should 404.
    return { paths, fallback: false }
  }

Кроме того pages/posts/[id].js, вам нужно экспортировать, getStaticProps чтобы вы могли получить данные о публикации с этим id и использовать их для предварительного рендеринга страницы:

function Post({ post }) {
    // Render post...
  }
  
  export async function getStaticPaths() {
    // ...
  }
  
  // This also gets called at build time
  export async function getStaticProps({ params }) {
    // params contains the post 'id'.
    // If the route is like /posts/1, then params.id is 1
    const res = await fetch('https://.../posts/${params.id}')
    const post = await res.json()
  
    // Pass post data to the page via props
    return { props: { post } }
  }
  
  export default Post

Когда мне следует использовать статическую генерацию?

Мы рекомендуем использовать статическую генерацию (с данными и без них), когда это возможно, потому что ваша страница может быть создана один раз и обслужена CDN, что делает ее намного быстрее, чем сервер, отображающий страницу при каждом запросе.

Вы можете использовать статическую генерацию для многих типов страниц, включая:

- Маркетинговые страницы

- Сообщения в блоге

- Списки товаров для электронной коммерции

- Помощь и документация

Вы должны спросить себя: «Могу ли я предварительно обработать эту страницу до запроса пользователя?» Если да, то вам следует выбрать «Статическую генерацию».

С другой стороны, статическая генерация не является хорошей идеей, если вы не можете предварительно отрисовать страницу до запроса пользователя. Возможно, ваша страница показывает часто обновляемые данные, и содержание страницы меняется при каждом запросе.

В подобных случаях вы можете сделать одно из следующего:

- Использование статической генерации с рендерингом на стороне клиента: вы можете пропустить предварительный рендеринг некоторых частей страницы, а затем использовать клиентский JavaScript для их заполнения. Чтобы узнать больше об этом подходе, ознакомьтесь с документацией по извлечению данных .

- Использовать рендеринг на стороне сервера: Next.js выполняет предварительный рендеринг страницы при каждом запросе. Это будет медленнее, потому что страница не может быть кэширована CDN, но предварительно обработанная страница всегда будет актуальной. Об этом подходе мы поговорим ниже.

Рендеринг на стороне сервера

Если страница использует рендеринг на стороне сервера, HTML страницы создается при каждом запросе.

Для использования на стороне сервера рендеринг для страницы, необходимо export в async функции , вызываемой getServerSideProps. Эта функция будет вызываться сервером при каждом запросе.

Например, предположим, что ваша страница должна предварительно отображать часто обновляемые данные (полученные из внешнего API). Вы можете написать, getServerSideProps который извлекает эти данные и передает их в Page, как показано ниже:

  function Page({ data }) {   // Render data...
  }
  
  // This gets called on every request
  export async function getServerSideProps() {
    // Fetch data from external API
    const res = await fetch('https://.../data')
    const data = await res.json()
  
    // Pass data to the page via props
    return { props: { data } }
  }
  
  export default Page

Как видите, getServerSideProps похож на getStaticProps, но с той разницей, что getServerSideProps запускается при каждом запросе, а не во время сборки.

Чтобы узнать больше о том, как работает getServerSideProps, ознакомьтесь с документацией по извлечению данных.

Резюме

Мы обсудили две формы предварительного рендеринга для Next.js.

- Статическая генерация (рекомендуется): HTML-код создается во время сборки и будет повторно использоваться при каждом запросе. Чтобы страница использовала статическое создание, либо экспортируйте компонент страницы, либо экспортируйте getStaticProps(и getStaticPaths при необходимости). Это отлично подходит для страниц, которые могут быть предварительно обработаны до запроса пользователя. Вы также можете использовать его с рендерингом на стороне клиента для ввода дополнительных данных.

- Рендеринг на стороне сервера: HTML создается для каждого запроса. Чтобы страница использовала рендеринг на стороне сервера, выполните экспорт getServerSideProps. Поскольку рендеринг на стороне сервера приводит к снижению производительности, чем статическое создание, используйте его только в случае крайней необходимости.