Next.js Advanced: статическая генерация, серверный рендеринг и SEO-оптимизация.
Next.js Advanced: статическая генерация, серверный рендеринг и SEO-оптимизация.

Next.js занимает важную позицию в современной веб-разработке, особенно благодаря его мощной поддержке статической генерации (SG), серверного рендеринга (Server-Side Rendering (SSR)) и поисковой оптимизации (SEO). В этой статье я углублюсь в принципы работы, сценарии применения и лучшие практики этих основных функций, а также покажу на примерах кода, как эффективно использовать Next.js в реальных проектах для создания высокопроизводительных и оптимизированных для SEO приложений.

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

Статическая генерациядаNext.jsТехнология предварительного рендеринга, предоставленная,Он генерирует HTML-файл страницы во время сборки.,Эти файлы могут распространяться непосредственно среди пользователей через CDN после развертывания.,Для рендеринга в реальном времени не требуется никакого сервера. SG подходит для страниц с относительно фиксированным контентом и низкой частотой обновления.,Это может значительно улучшить скорость загрузки страниц и использование ресурсов сервера.

1. использоватьgetStaticPropsПолучить статические данные

Используется в компонентах страницы.getStaticPropsметоды жизненного цикла Получить статические данные。Этот метод запускается во время сборки,Возвращенные данные будут использоваться для создания статических HTML-файлов.

Язык кода:js
копировать
jsx
export const getStaticProps = async () => {
  const posts = await fetchPostsFromApi(); // Получить статические данные
  return {
    props: {
      posts,
    },
    revalidate: 60, // Необязательно, укажите интервал обновления данных (секунды).
  };
};

function HomePage({ posts }) {
  // Логика рендеринга страниц
}

2. использоватьgetStaticPaths预定义动态路由

对于动态路由（нравитьсяpages/posts/[slug].js）,нуждатьсяиспользоватьgetStaticPathsУкажите список предварительно обработанных путей。

Язык кода:js
копировать
jsx
export const getStaticPaths = async () => {
  const slugs = await getPostSlugsFromApi(); // Получить динамический список путей
  return {
    paths: slugs.map((slug) => ({ params: { slug } })),
    fallback: 'blocking', // Необязательно, укажите стратегию обработки несовпадающих путей.
  };
};

export const getStaticProps = async (context) => {
  const post = await fetchPostBySlug(context.params.slug); // Получить данные на основе пути
  return {
    props: {
      post,
    },
  };
};

function PostPage({ post }) {
  // Логика рендеринга страниц
}

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

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

1. использоватьgetServerSideProps获取服务器端数据

与getStaticPropsпохожий,getServerSidePropsТакже работает на стороне сервера,Но он срабатывает каждый раз, когда пользователь его запрашивает. Подходит для сценариев, требующих данных в реальном времени.

Язык кода:js
копировать
jsx
export const getServerSideProps = async (context) => {
  const currentUserId = context.req.user?.id; // Получить текущий идентификатор пользователя из контекста запроса
  const personalizedData = await fetchPersonalizedData(currentUserId); // Получайте данные в реальном времени
  return {
    props: {
      personalizedData,
    },
  };
};

function UserProfilePage({ personalizedData }) {
  // Логика рендеринга страниц
}

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

Next.js имеет множество встроенных SEO-оптимизированных функций, в том числе:

  • Автоматическая обработка<head>Этикетка：использоватьnext/headКомпонент динамически управляет метаинформацией страницы.（нравитьсяtitle、description、canonicalждать）。
Язык кода:js
копировать
jsx
import Head from 'next/head';

function BlogPost({ post }) {
  return (
    <>
      <Head>
        <title>{post.title}</title>
        <meta name="description" content={post.summary} />
        <link rel="canonical" href={`/posts/${post.slug}`} />
      </Head>
      {/* Содержимое страницы */}
    </>
  );
}
  • Быстрая загрузка первого экрана и удобство сканирования, обеспечиваемое предварительным рендерингом：несмотря ни на чтодаSGвозвращатьсядаSSR,Оба могут предоставить полную структуру HTML для сканирования поисковыми роботами.,Улучшите SEO-рейтинг.
  • next/imageкомпоненты：Встроенная оптимизация изображений и функции отложенной загрузки.,Помогает улучшить показатели производительности страницы.,Что, в свою очередь, влияет на SEO.
Язык кода:js
копировать
jsx
import Image from 'next/image';

function BlogPost({ post }) {
  return (
    <>
      <Image
        src={post.featuredImage.url}
        alt={post.title}
        width={800}
        height={450}
        layout="responsive"
      />
      {/* Содержимое страницы */}
    </>
  );
}

Заключение

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

boy illustration
Учебное пособие по Jetpack Compose для начинающих, базовые элементы управления и макет
boy illustration
Код js веб-страницы, фон частицы, код спецэффектов
boy illustration
【новый! Суперподробное】Полное руководство по свойствам компонентов Figma.
boy illustration
🎉Обязательно к прочтению новичкам: полное руководство по написанию мини-программ WeChat с использованием программного обеспечения Cursor.
boy illustration
[Забавный проект Docker] VoceChat — еще одно приложение для мгновенного чата (IM)! Может быть встроен в любую веб-страницу!
boy illustration
Как реализовать переход по странице в HTML (html переходит на указанную страницу)
boy illustration
Как решить проблему зависания и низкой скорости при установке зависимостей с помощью npm. Существуют ли доступные источники npm, которые могут решить эту проблему?
boy illustration
Серия From Zero to Fun: Uni-App WeChat Payment Practice WeChat авторизует вход в систему и украшает страницу заказа, создает интерфейс заказа и инициирует запрос заказа
boy illustration
Серия uni-app: uni.navigateЧтобы передать скачок значения
boy illustration
Апплет WeChat настраивает верхнюю панель навигации и адаптируется к различным моделям.
boy illustration
JS-время конвертации
boy illustration
Обеспечьте бесперебойную работу ChromeDriver 125: советы по решению проблемы chromedriver.exe не найдены
boy illustration
Поле комментария, щелчок мышью, специальные эффекты, js-код
boy illustration
Объект массива перемещения объекта JS
boy illustration
Как открыть разрешение на позиционирование апплета WeChat_Как использовать WeChat для определения местонахождения друзей
boy illustration
Я даю вам два набора из 18 простых в использовании фонов холста Power BI, так что вам больше не придется возиться с цветами!
boy illustration
Получить текущее время в js_Как динамически отображать дату и время в js
boy illustration
Вам необходимо изучить сочетания клавиш vsCode для форматирования и организации кода, чтобы вам больше не приходилось настраивать формат вручную.
boy illustration
У ChatGPT большое обновление. Всего за 45 минут пресс-конференция показывает, что OpenAI сделал еще один шаг вперед.
boy illustration
Copilot облачной разработки — упрощение разработки
boy illustration
Микросборка xChatGPT с низким кодом, создание апплета чат-бота с искусственным интеллектом за пять шагов
boy illustration
CUDA Out of Memory: идеальное решение проблемы нехватки памяти CUDA
boy illustration
Анализ кластеризации отдельных ячеек, который должен освоить каждый&MarkerгенетическийВизуализация
boy illustration
vLLM: мощный инструмент для ускорения вывода ИИ
boy illustration
CodeGeeX: мощный инструмент генерации кода искусственного интеллекта, который можно использовать бесплатно в дополнение к второму пилоту.
boy illustration
Машинное обучение Реальный бой LightGBM + настройка параметров случайного поиска: точность 96,67%
boy illustration
Бесшовная интеграция, мгновенный интеллект [1]: платформа больших моделей Dify-LLM, интеграция без кодирования и встраивание в сторонние системы, более 42 тысяч звезд, чтобы стать свидетелями эксклюзивных интеллектуальных решений.
boy illustration
LM Studio для создания локальных больших моделей
boy illustration
Как определить количество слоев и нейронов скрытых слоев нейронной сети?
boy illustration
[Отслеживание целей] Подробное объяснение ByteTrack и детали кода
©