‌
8 - Server components and fetching data

Для доступа к видео войдите в систему

8 - Server components and fetching data

Оценить качество материала и подачу материала автором видео:

Front-end

Трудоустройтесь middle front-end разработчиком на React JS (TypeScript) за 12-16 месяцев обучения с ежедневной менторской поддержкой в формате видео 1 на 1 и коммерческими проектами в портфолио

Перейти на курс
Front-end

Back-end

Трудоустройтесь middle back-end разработчиком за 12-16 месяцев обучения с ежедневной менторской поддержкой в формате видео 1 на 1 и коммерческими проектами в портфолио

Перейти на курс
Back-end

Карьерный бустер

Получите коммерческий опыт на реальных стартапах, прокачайте tech & soft навыки, научитесь работать в команде, проходить собеседования и получите первую работу в IT!

Перейти на курс
Карьерный бустер

Основы Front-end

Сделайте первый шаг в IT, освоив базовые знания разработки и научившись создавать небольшие проекты на JavaScript

Перейти на курс
Основы Front-end

Основы Back-end

Сделайте первый шаг в IT, освоив базовые знания разработки. Без опыта. Без математики. Только практика: JavaScript, SQL, Node JS, база данных

Перейти на курс
Основы Back-end

Server components and fetching data

Автор конспекта: Стогниева Виктория

📦 Введение: Фундаментальное отличие архитектуры

Данная лекция посвящена фундаментальному отличию и главному преимуществу фреймворка Next.js перед библиотекой React— серверному рендерингу по умолчанию.

🔄 Ключевое различие:

  • React (классический подход): Браузер получает минимальный HTML и достраивает интерфейс с помощью JavaScript
  • Next.js (App Router): Страница готовится на сервере и отправляется уже готовой

🎯 Основной тезис: По умолчанию в архитектуре App Router все компоненты являются серверными (Server Components). Next.js выполняет код компонента на сервере, генерирует готовый HTML-документ и отправляет его клиенту.

Результат: Пользователь видит контент практически мгновенно, в отличие от модели React, где контент появляется только после выполнения JavaScript в браузере.

🔍 Рендеринг на сервере: Практический пример и польза для SEO

📈 Стратегическая важность для SEO

Проблема: Поисковым роботам (Googlebot) критически важно видеть содержательный HTML-код сразу при первом запросе, без исполнения JavaScript.

Решение Next.js: Серверный рендеринг "из коробки" ✅

💻 Практический пример: создание серверной страницы /books

page.tsx
import styles from "../page.module.css"
 
export default function Home() {
  return (
    <div className={styles.page}>
      <main className={styles.main}>Books</main>
      <div>List</div>
      <div>Content</div>
    </div>
  )
}
header.tsx
"use client"
 
import Link from "next/link"
import styles from "./header.module.css"
 
export const Header = () => (
  <nav className={styles.navigation}>
    <ul>
      <li>
        <Link href="/" className={styles.link}>
          Main
        </Link>
      </li>
      <li>
        <Link href="/profile" className={styles.link}>
          Profile
        </Link>
      </li>
      <li>
        <Link href="/books" className={styles.link}>
          Books
        </Link>
      </li>
    </ul>
  </nav>
)

📊 Анализ результатов и SEO-выводы

Открыв в инструментах разработчика вкладку 'Network' и убедившись, что выбран фильтр 'All' (Все), а не 'Fetch/XHR', мы можем изучить ответ, который сервер отправил браузеру.

В файле с именем books мы увидим полноценный HTML-документ, который уже содержит всю нашу разметку: заголовок <h1>Books</h1> и div с текстом "list" и "content".

books

🔍 Ключевой вывод для SEO:

Поисковой робот, запрашивая эту страницу, видит тот же самый готовый HTML и может немедленно проиндексировать ее содержимое. Если бы это было стандартное React-приложение, робот получил бы практически пустой <body>, что затруднило бы индексацию и негативно сказалось на позиции сайта в поисковой выдаче.

❓

Но что произойдет, если мы попытаемся загрузить на эту страницу динамические данные, используя привычные для Reactподходы?

🖥️ Клиентские компоненты и получение данных: Подход React

Чтобы использовать интерактивные возможности, которые работают в браузере — например, хуки (useState, useEffect) или обработчики событий, — компонент необходимо явно пометить как клиентский. Это делается с помощью директивы "use client" в самом начале файла. Такой подход меняет модель рендеринга и получения данных на знакомую по React.

❗

Важный нюанс: даже при использовании директивы "use client", Next.js все равно попытается отрендерить на сервере весь статический контент, который не зависит от состояния или браузерных API. Клиенту будет отправлен уже частично готовый HTML, что ускоряет первоначальную отрисовку страницы (First Contentful Paint) и улучшает воспринимаемую производительность.

📝 Пошаговый процесс получения данных на стороне клиента (React-подход):

  1. Шаг 1: Добавляем директиву "use client" в начало файла.
  2. Шаг 2: Импортируем и используем хуки useState и useEffect.
  3. Шаг 3: Внутри useEffect выполняем fetch-запрос к внешнему API.
  4. Шаг 4: Сохраняем данные в состояние и отображаем их в JSX.
page.tsx
import { useEffect, useState } from "react"
import styles from "../page.module.css"
 
export default function Home() {
  const [todoList, setTodoList] = useState<{ title: string } | null>(null)
 
  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/todos/1")
      .then((response) => response.json())
      .then((json) => setTodoList(json))
  }, [])
 
  return (
    <div className={styles.page}>
      <main className={styles.main}>
        Books
        <div>List</div>
        <div>{todoList?.title}</div>
      </main>
    </div>
  )
}

🔎 Анализ результата с точки зрения SEO:

После загрузки страницы данные (например, заголовок title) отобразятся в браузере для пользователя. Однако, если заглянуть в исходный HTML-код во вкладке "Network", мы обнаружим, что этого заголовка там нет.

WithoutContent

💡

Вывод: Динамические данные, полученные на клиенте с помощью useEffect, невидимы для поисковых роботов в первоначальном ответе сервера. Это сводит на нет преимущества SSR для самого важного — динамического контента.

⚡ Получение данных на сервере: Сила Next.js

Next.js предлагает нативное и элегантное решение — получение данных непосредственно в серверном компоненте. Этот подход решает проблему SEO и упрощает код.

🔧 Процесс рефакторинга для серверного получения данных:

  1. Удаляем "use client": Компонент становится серверным по умолчанию.
  2. Удаляем хуки: useState и useEffect больше не нужны.
  3. Делаем компонент асинхронным: Добавляем async к функции компонента.
  4. Выполняем fetch напрямую: Используем await прямо в теле компонента.

💻 Итоговый код серверного компонента:

page.tsx
import styles from "../page.module.css"
 
export default async function Home() {
  const data = await fetch("https://jsonplaceholder.typicode.com/todos/1")
  const toolList = await data.json()
 
  return (
    <div className={styles.page}>
      <main className={styles.main}>
        Books
        <div>List</div>
        <div>{toolList?.title}</div>
      </main>
    </div>
  )
}

🎯 Ключевое преимущество

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

📈 Анализ результатов и ключевые выводы

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

🔍 1. SEO-оптимизация

При проверке ответа от сервера во вкладке "Network" мы видим, что HTML-код теперь содержит заголовок, полученный из API. Это означает, что динамический контент полностью доступен поисковым роботам с самого начала, что критически важно для индексации и ранжирования.

✅ Результат: Поисковые роботы видят полный контент страницы сразу

🔒 2. Безопасность и производительность

fetch-запрос, выполненный в серверном компоненте, не отображается в клиентской вкладке "Network". Это происходит потому, что запрос выполняется напрямую с сервера Next.js на сервер API (модель 'сервер-сервер' или back-to-back).

Преимущества:

  • 🛡️ Безопасность: API-ключи и токены никогда не покидают сервер
  • 🚀 Производительность: Уменьшение объема передаваемого JavaScript
  • 📉 Скрытая логика: Бизнес-логика запросов остается на сервере

💻 3. Упрощение кода

Отказ от useState и useEffect для простого получения и отображения данных делает код компонента значительно чище, понятнее и проще в поддержке.

Next.js Базовый Курс

Видеоурок - 10 видео из 17