19.07.2024 в 15:31

Как использовать серверный рендеринг в приложениях Next.js для лучшего SEO

Серверный рендеринг (SSR) — это метод веб-разработки, который может помочь улучшить SEO вашего сайта. Это достигается путем создания HTML-контента на сервере в ответ на запрос пользователя.

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

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

Что такое серверный рендеринг?

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

Это отличается от рендеринга на стороне клиента (CSR), когда браузер загружает базовую структуру HTML, а затем использует JavaScript для получения и отображения контента.

Как начать работу с Next.js и SSR

Начало работы с Next.js и рендерингом на стороне сервера (SSR) включает несколько шагов. Вот пошаговое руководство, которое поможет вам настроить проект Next.js и реализовать SSR.

Шаг 1. Установите Next.js

Сначала вам нужно установить Next.js. Вы можете сделать это с помощью create-next-app, который настраивает новый проект Next.js с конфигурацией по умолчанию. Запустите следующую команду в своем терминале:

npx create-next-app my-next-app
cd my-next-app
npm run dev

Эта команда создает новое приложение Next.js в папке my-next-app и запускает сервер разработки.

Шаг 2. Понимание структуры проекта

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

pages/: эта папка содержит все страницы вашего приложения. Каждый файл представляет маршрут в вашем приложении.

public/: здесь можно размещать статические ресурсы, такие как изображения.

Styles/: содержит файлы CSS для стилизации вашего приложения.

Шаг 3. Создайте простую страницу с помощью SSR

Теперь давайте создадим простую страницу, использующую SSR.

Создайте новый файл pages/index.js:

// pages/index.js
import React from 'react';

const Home = ({ data }) => {
  return (
    <div>
      <h1>Welcome to Next.js with SSR</h1>
      <p>Data fetched from the server: {data.message}</p>
    </div>
  );
};

export async function getServerSideProps() {
  // Fetch data from an API or other sources
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  // Return the data as props to the Home component
  return {
    props: {
      data,
    },
  };
}

export default Home;

Давайте обсудим этот код более подробно. Для домашнего компонента:

Компонент Home — это функциональный компонент, который принимает реквизиты.

Проп data содержит данные, полученные с сервера.

Внутри компонента мы отображаем приветственное сообщение и полученные данные.

Функция getServerSideProps:

Эта функция экспортируется из файла Pages/index.js.

Он выполняется на сервере для каждого запроса к этой странице.

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

Извлеченные данные возвращаются как объект с ключом реквизита. Этот объект будет передан компоненту Home в качестве реквизита.

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

export async function getServerSideProps() {
  try {
    const res = await fetch('https://api.example.com/data');
    if (!res.ok) {
      throw new Error('Failed to fetch data');
    }
    const data = await res.json();
    return {
      props: {
        data,
      },
    };
  } catch (error) {
    console.error(error);
    return {
      props: {
        data: { message: 'Error fetching data' },
      },
    };
  }
}

Шаг 4. Запустите приложение

Запустите сервер разработки, если он еще не запущен:

npm run dev

Откройте браузер и перейдите по адресу http://localhost:3000. Вы должны увидеть сообщение, полученное из API, отображаемое на странице.

Как Next.js обеспечивает рендеринг на стороне сервера

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

Серверный рендеринг (SSR): страницы обрабатываются при каждом запросе.

Генерация статического сайта (SSG): страницы генерируются во время сборки.

Next.js определяет, какой метод рендеринга использовать, на основе функций, которые вы реализуете в компонентах страницы (getStaticProps и getServerSideProps).

Компоненты страницы Next.js

Next.js использует каталог страниц/ для определения маршрутов. Каждый файл в этом каталоге соответствует маршруту вашего приложения.

pages/index.js → /

pages/about.js → /about

pages/posts/[id].js → /posts/:id

Вот базовый пример компонента страницы:

// pages/index.js
import React from 'react';

const Home = () => {
  return (
    <div>
      <h1>Welcome to Next.js</h1>
      <p>This is the home page.</p>
    </div>
  );
};

export default Home;

Получение данных с помощью getStaticProps и getServerSideProps

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

Пример:

// pages/index.js
import React from 'react';

const Home = ({ posts }) => {
  return (
    <div>
      <h1>Blog Posts</h1>
      <ul>
        {posts.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
};

// This function runs at build time
export async function getStaticProps() {
  // Fetch data from an API
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts = await res.json();

  return {
    props: {
      posts,
    },
  };
}

export default Home;

getServerSideProps используется для рендеринга на стороне сервера. Он запускается при каждом запросе и позволяет получать данные во время запроса.

Пример:

// pages/index.js
import React from 'react';

const Home = ({ data }) => {
  return (
    <div>
      <h1>Server-Side Rendering with Next.js</h1>
      <p>Data fetched from the server: {data.message}</p>
    </div>
  );
};

// This function runs on every request
export async function getServerSideProps() {
  // Fetch data from an external API
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: {
      data,
    },
  };
}

export default Home;

Преимущества SSR для SEO с помощью Next.js и способы оптимизации

В этом разделе мы рассмотрим основные преимущества использования SSR для SEO и дадим простые советы о том, как максимально эффективно использовать эти преимущества с помощью вашего приложения Next.js.

1. Улучшенная индексация поисковыми системами.

Рендеринг на стороне клиента (CSR) может вызвать проблемы с поисковыми системами, которые не могут правильно индексировать контент, поскольку он отображается в браузере пользователя с помощью JavaScript.

Однако SSR отображает контент на сервере перед отправкой его в браузер пользователя, гарантируя, что HTML-код является полным и его можно легко сканировать и индексировать поисковыми системами.

Используйте SSR для важных страниц. Убедитесь, что ключевые страницы, такие как целевые страницы, сообщения в блогах и страницы продуктов, отображаются на сервере, чтобы облегчить индексацию.

Пример. Использование SSR для страницы сообщения в блоге:

// pages/blog/[id].js
import React from 'react';
import { useRouter } from 'next/router';
import Head from 'next/head';

const BlogPost = ({ post }) => {
  const router = useRouter();
  if (router.isFallback) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <Head>
        <title>{post.title}</title>
        <meta name="description" content={post.excerpt} />
      </Head>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
};

export async function getServerSideProps({ params }) {
  const res = await fetch(`https://api.example.com/posts/${params.id}`);
  const post = await res.json();

  return {
    props: {
      post,
    },
  };
}

export default BlogPost

Компонент BlogPost: этот компонент отображает сообщение в блоге. Он использует next/head для управления метатегами, которые важны для SEO.

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

2. Ускоренная загрузка

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

Оптимизируйте время ответа сервера. Убедитесь, что ваш сервер оптимизирован для быстрого ответа. Используйте стратегии кэширования, чтобы снизить нагрузку на сервер.

Пример – заголовок управления кэшем для SSR:

export async function getServerSideProps({ res }) {
  res.setHeader('Cache-Control', 'public, s-maxage=10, stale-while-revalidate=59');

  const resData = await fetch('https://api.example.com/data');
  const data = await resData.json();

  return {
    props: {
      data,
    },
  };
}

Функция getServerSideProps: эта функция устанавливает заголовки управления кэшем для кэширования ответа на 10 секунд и обслуживания устаревшего контента при повторной проверке в течение 59 секунд. Это улучшает время ответа сервера и скорость загрузки страниц, способствуя улучшению SEO.

3. Улучшение обмена информацией в социальных сетях

При обмене ссылками в социальных сетях такие платформы, как Facebook и Twitter, сканируют содержимое URL-адреса для создания предварительного просмотра. SSR гарантирует наличие необходимых метаданных в исходном HTML-коде, что приводит к улучшению предварительного просмотра и повышению рейтинга кликов.

Управляйте метатегами с помощью next/head. Используйте компонент next/head для добавления метатегов для социальных сетей и SEO.

Пример – Добавление метатегов на страницу:

import Head from 'next/head';

const Page = ({ data }) => (
  <div>
    <Head>
      <title>{data.title}</title>
      <meta name="description" content={data.description} />
      <meta property="og:title" content={data.title} />
      <meta property="og:description" content={data.description} />
      <meta property="og:image" content={data.image} />
      <meta name="twitter:card" content="summary_large_image" />
    </Head>
    <h1>{data.title}</h1>
    <p>{data.content}</p>
  </div>
);

Компонент страницы: этот компонент использует next/head для добавления метатегов SEO, включая теги Open Graph для предварительного просмотра в социальных сетях. Это гарантирует, что при совместном использовании страницы платформы социальных сетей смогут создавать расширенные предварительные просмотры с предоставленными метаданными.

4. Улучшенный пользовательский опыт

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

Предварительная обработка страниц со статической генерацией (SSG) для менее динамичного контента. Используйте SSG для страниц, которые не часто меняются, чтобы снизить нагрузку на сервер и повысить производительность.

Пример. Использование SSG для статической страницы:

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/static-data');
  const data = await res.json();

  return {
    props: {
      data,
    },
    revalidate: 10, // Revalidate at most once every 10 seconds
  };
}

const StaticPage = ({ data }) => (
  <div>
    <h1>{data.title}</h1>
    <p>{data.content}</p>
  </div>
);

export default StaticPage;

Компонент StaticPage: этот компонент отображает статический контент, полученный из API.

Функция getStaticProps: эта функция извлекает данные во время сборки и проверяет их каждые 10 секунд, гарантируя, что контент всегда будет свежим, одновременно снижая нагрузку на сервер.

Заключение

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

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

Источник:

How to Use Server-Side Rendering in Next.js Apps for Better SEO

#JavaScript #Next.js

Войти на сайт

Как использовать серверный рендеринг в приложениях Next.js для лучшего SEO

Что такое серверный рендеринг?

Как начать работу с Next.js и SSR

Шаг 1. Установите Next.js

Шаг 2. Понимание структуры проекта

Шаг 3. Создайте простую страницу с помощью SSR

Функция getServerSideProps:

Шаг 4. Запустите приложение

Как Next.js обеспечивает рендеринг на стороне сервера

Компоненты страницы Next.js

Получение данных с помощью getStaticProps и getServerSideProps

Пример:

Пример:

Преимущества SSR для SEO с помощью Next.js и способы оптимизации

1. Улучшенная индексация поисковыми системами.

2. Ускоренная загрузка

3. Улучшение обмена информацией в социальных сетях

4. Улучшенный пользовательский опыт

Заключение

Источник: