SSG против SSR в Next.js 

Next.js - один из самых важных и широко используемых фреймворков React. Сегодня он стал консолидированной структурой для создания потрясающих веб-приложений.

Можно перечислить множество преимуществ при использовании Next.js. Производительность, SEO, богатый опыт разработки, поддержка TypeScript, интеллектуальное связывание и предварительная выборка маршрутов - вот лишь несколько примеров.

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

Мы можем работать с рендерингом на стороне сервера (SSR) и генерацией статического сайта (SSG) в одном приложении Next.js. У нас также может быть наше приложение с рендерингом на стороне сервера, но внутри все еще есть сгенерированные страницы.

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

SSR (рендеринг на стороне сервера)

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

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

Рендеринг на стороне сервера (SSR) - полная противоположность этому. SSR описывает процесс предварительного рендеринга страницы на сервере, который затем генерируется при каждом запросе пользователя.

Когда предварительно обработанная страница достигает браузера, запускается код JavaScript, чтобы сделать страницу интерактивной. Весь этот процесс увеличивает скорость загрузки. Это также делает более простым и предпочтительным использование рендеринга на стороне сервера для приложений, зависящих от SEO.

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

Много лет назад, до того, как JavaScript стал настолько зрелым и мощным, разработчики обычно возвращали HTML-файлы на основе HTTP-вызовов. Это был очень распространенный метод обработки ответа на стороне сервера с использованием серверного языка (обычно PHP) и возврата статического файла HTML.

SSG (генерация статического сайта)

Статические веб-сайты не являются чем-то новым для разработчиков. Мы строили их с самого начала Интернета. Создание многофункционального веб-интерфейса может быть трудным, но с Next.js мы можем сделать это легко.

Next.js познакомил нас с лучшим способом создания статических веб-сайтов с более динамичной производительностью.

SSG описывает процесс создания веб-сайтов, которые отображаются во время сборки. Результатом является HTML-файл, такие ресурсы, как JavaScript и CSS, и несколько других статических файлов.

При использовании SSG с Next.js страница предварительно отрисовывается во время компиляции. Это означает, что пользователю не придется ждать загрузки страницы в браузере; страница будет просто визуализирована.

Для получения данных Next.js предоставляет три разные функции:

1. getStaticProps : Страница будет предварительно обработана во время сборки
2. getServerSideProps: Страница будет предварительно обработана во время выполнения
3. getStaticPaths : Эта функция генерирует список страниц, которые будут предварительно обработаны во время сборки.

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

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

Какой из них я должен использовать?

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

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

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

Представьте, что мы создаем простой сайт-блог. Контент будет полностью статически сгенерирован, верно? У нас будет всего несколько страниц, и контент будет извлекаться с нашего сервера, поэтому в этом случае имеет смысл использовать SSG.

Можно предположить, что в каждом блоге есть как минимум две важные страницы:

1. posts : Эта страница отвечает за получение и отображение всех сообщений блога.
2. post : Эта страница отвечает за получение и отображение определенного сообщения в блоге.

На нашей странице  posts мы можем использовать SSG для получения всех сообщений нашего блога, используя функцию getStaticProps:

export default function Posts({ posts }) {
  return (
    <div>
      <h1>My latest posts</h1>
      {posts.map((post) => (
        <h2>{post.title}</h2>
      ))}
    </div>
  );
}

export async function getStaticProps() {
  return {
    props: { 
      posts: await fetchPosts(),
    }
  };
}

Функция fetchPosts будет запущена во время сборки. Она будет извлекать наши внешние данные и предварительно отображать содержимое для нашей страницы.

Теперь представьте, что мы хотим добавить небольшую функцию на наш простой веб-сайт блог.

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

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

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

Мы можем использовать выборку на стороне клиента поверх SSG для рендеринга нашей страницы. Мы можем создать наш простой компонент без использования какой-либо функции для выборки данных во время сборки, а внутри нашего компонента мы можем использовать библиотеку выборки данных, такую ​​как SWR, для выборки наших данных на стороне клиента:

import useSWR from "swr";
export default function CheckoutSession() {
  const { data, error } = useSWR("/api/checkout", fetcher)
  if (error) return <div>Something went wrong...</div>
  if (!data) return <div>Loading...</div>
  return <div>Cart: {data.items.length}</div>
}

Использование рендеринга на стороне сервера с помощью getServerSideProps может выполнять работу большую часть времени. Проблема в том, что вы можете потерять некоторые функции и преимущества, которые SSG привносит в приложения Next.js. Страница будет предварительно отображаться по каждому запросу с использованием возвращенных данных. Еще одним недостатком является то, что вы не можете использовать метод [fetch()](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) для вызова API внутри getServerSideProps.

Тот факт, что страница предварительно отрисовывается во время сборки, увеличивает производительность и заставляет страницу работать быстрее.

HTML также может быть получен сервером CDN, что также может улучшить производительность.

Еще одна приятная особенность SSG - нет необходимости делать запросы к базе данных. Страница предварительно отображается во время сборки, поэтому даже если ваша база данных выйдет из строя, вы все равно сможете отобразить свою страницу.

Заключение

Next.js стал одним из самых важных фреймворков React в веб-сообществе. Он предоставил разработчикам так много функций, которые помогут создавать более сложные и насыщенные веб-сайты.

Использование фреймворка, такого как Next.js, позволяет нам использовать различные методы предварительного рендеринга в наших приложениях. Мы можем использовать генерацию статического сайта для чего-то более простого и не динамического. Мы можем использовать рендеринг на стороне сервера для динамического контента и более сложных страниц. С помощью этих инструментов создание многофункциональных веб-приложений стало проще и увлекательнее