Где выполняется код в Next.js

1️⃣ Как кратко ответить

Код в Next.js выполняется как на стороне клиента, так и на стороне сервера. Компоненты React рендерятся на сервере для улучшения SEO и производительности, а затем передаются клиенту, где продолжается их выполнение. API маршруты и функции getServerSideProps, getStaticProps выполняются на сервере, а код, связанный с пользовательским интерфейсом и взаимодействием, выполняется на клиенте.

2️⃣ Подробное объяснение темы

Next.js — это фреймворк для React, который поддерживает рендеринг на стороне сервера (SSR) и статическую генерацию (SSG), что позволяет улучшить производительность и SEO. Понимание того, где выполняется код в Next.js, важно для оптимизации приложения и правильного использования его возможностей.

Серверная сторона

1. Рендеринг на сервере (SSR):

   • В Next.js компоненты React могут быть отрендерены на сервере перед отправкой HTML-кода клиенту. Это позволяет улучшить SEO, так как поисковые системы получают полностью отрендеренный HTML.
   • Функция getServerSideProps используется для получения данных на сервере перед рендерингом страницы. Она выполняется на каждом запросе к странице.

   export async function getServerSideProps(context) {
     // Получение данных на сервере
     const res = await fetch('https://api.example.com/data');
     const data = await res.json();
   ​
     // Передача данных в компонент страницы
     return { props: { data } };
   }
   

   • В этом примере getServerSideProps выполняется на сервере, запрашивая данные с внешнего API и передавая их в компонент страницы.

2. API маршруты:

   • Next.js позволяет создавать API маршруты, которые выполняются на сервере. Это полезно для создания серверных функций, таких как обработка форм или взаимодействие с базой данных.

   // pages/api/hello.js
   export default function handler(req, res) {
     // Обработка запроса на сервере
     res.status(200).json({ message: 'Hello from server!' });
   }
   

   • Этот код создает API маршрут, который возвращает JSON-ответ. Он выполняется на сервере при каждом запросе к /api/hello.

Клиентская сторона

1. Рендеринг на клиенте:

   • После того как HTML-код был отправлен клиенту, React берет на себя управление компонентами, и начинается рендеринг на клиенте. Это позволяет добавлять интерактивность и обновлять интерфейс без перезагрузки страницы.

2. Код, связанный с пользовательским интерфейсом:

   • Весь код, который зависит от взаимодействия пользователя, например, обработчики событий, выполняется на клиенте.

   function Button() {
     // Обработчик события клика
     const handleClick = () => {
       alert('Button clicked!');
     };
   ​
     return <button onClick={handleClick}>Click me</button>;
   }
   

   • В этом примере функция handleClick выполняется на клиенте, когда пользователь нажимает на кнопку.

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

1. Статическая генерация (SSG):

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

   export async function getStaticProps() {
     // Получение данных на этапе сборки
     const res = await fetch('https://api.example.com/data');
     const data = await res.json();
   ​
     // Передача данных в компонент страницы
     return { props: { data } };
   }
   

   • getStaticProps выполняется на сервере во время сборки, а не на каждом запросе, что позволяет создавать статические страницы.

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