Введение

Next.js уже давно является популярным выбором для создания приложений React, отображаемых на сервере. Благодаря встроенной поддержке серверного рендеринга (SSR) разработчики могут создавать динамические, оптимизированные для SEO приложения. Однако появление App Router в Next.js 13 и усовершенствования в Next.js 14 значительно упростили и улучшили SSR.

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

SSR в маршрутизации страниц (Pre-Next.js 13)

До появления App Router SSR обрабатывался в системе маршрутизации страниц с использованием специальных функций, таких как getServerSideProps. Эта функция вызывалась при каждом запросе, что позволяло разработчикам получать данные на стороне сервера перед рендерингом страницы.

Пример SSR при маршрутизации страниц с использованием getServerSideProps:

export default function Blogs({ data }) {
  // Render the fetched data
  return (
    

      {data.map((item) => (
        

          
{item.title}
          
{item.content}
        
      ))}
    
  );
}

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

  // Pass the data as props to the page component
  return { props: { data } };
}

Здесь getServerSideProps — это ключ к SSR в системе маршрутизации страниц. Он позволяет получать данные из API (или любого другого источника данных) при каждом запросе и передавать их компоненту страницы в качестве реквизита. Несмотря на свою мощь, этот шаблон может привести к созданию сложных кодовых баз при обработке большого количества серверной логики и различных маршрутов.

Маршрутизация приложений и SSR в Next.js 14

В Next.js 14 SSR стал более оптимизированным и интегрированным в систему маршрутизации приложений. В этой новой системе представлены серверные и клиентские компоненты, где SSR гораздо более интуитивно понятен.

Теперь в App Routing вы можете напрямую получать данные внутри компонентов без использования специальных функций, таких как getServerSideProps. Этого можно добиться, используя действия сервера, что упрощает и облегчает поддержку кода.

Пример SSR в маршрутизации приложений с помощью серверных компонентов:

"use server";

export async function getBlogs() {
  try {
    const response = await fetch('https://api.example.com/posts');
    return response.json();
  } catch (error) {
    return { error: error.message };
  }
}

// This component runs on the server and fetches data
export default async function Blog() {
  const blogs = await getBlogs();

  return (
    

      {(blogs || []).map((blog) => (
        

          
{blog.name}
          
{blog.content}
        
      ))}
    
  );
}

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

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

Основные преимущества серверных действий:

Чистый код: Вместо того, чтобы разбрасывать серверную логику по отдельным файлам или функциям, вы можете хранить все в одном месте.
Улучшенная ремонтопригодность: меньше движущихся частей означает меньше кода для управления, что упрощает обслуживание вашего приложения.
Повышение производительности. Благодаря интеллектуальным механизмам кэширования вы можете точно настроить серверную логику для достижения оптимальной производительности.

Гидратация в Next.js

В контексте Next.js и рендеринга на стороне сервера (SSR) гидратация относится к процессу, в котором статически обработанная HTML-страница (отправленная с сервера) преобразуется в полностью интерактивное приложение React в браузере. Он «гидратирует» статический HTML с помощью клиентского JavaScript React, чтобы сделать страницу интерактивной.

Гидратация в маршрутизации приложений и маршрутизации страниц

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

В маршрутизации приложений с серверными компонентами гидратируются только клиентские компоненты (те, которые обрабатывают интерактивность). Такая выборочная гидратация уменьшает объем JavaScript, отправляемого клиенту, что приводит к повышению производительности.

Пример клиентских компонентов в маршрутизации приложений:

'use client';  // Mark this as a client component

export default function Button() {
  return (
     alert('Button clicked!')}>Click Me
  );
}

Здесь компонент «Кнопка» помечен как клиентский компонент с надписью «использовать клиент». Он обеспечивает интерактивность и работает на стороне клиента, в то время как другие неинтерактивные компоненты остаются серверными компонентами, что повышает производительность.

Подробнее об гидратации в маршрутизации приложений

Вот как это работает:

Родительские компоненты как серверные компоненты:

Родительские компоненты (обычно компоненты более высокого уровня или целые компоненты страницы) обычно являются серверными компонентами. Они запускаются на сервере и обрабатывают такие вещи, как выборка данных, рендеринг статического HTML и передача этих данных дочерним компонентам.
Поскольку они визуализируются на сервере, они не содержат JavaScript на стороне клиента и не являются интерактивными.

Клиентские компоненты для интерактивности:

Дочерние компоненты, которые обрабатывают интерактивность (например, кнопки, формы и т. д.), являются клиентскими компонентами. Эти компоненты могут использовать перехватчики React (useState, useEffect и т. д.) и гидратируются на стороне клиента.
Серверные компоненты передают данные этим клиентским компонентам через реквизиты.
После загрузки HTML в браузер Next.js гидратирует клиентские компоненты, присоединяя необходимые прослушиватели событий и делая страницу интерактивной.

// Server Component (Parent Component)
export default async function ParentComponent() {
  // Fetch data on the server
  const data = await fetch('https://api.example.com/data').then(res => res.json());

  return (
    

      
This is Server-Side Rendered
      
    
  );
}

// Client Component (Child Component)
'use client';

import { useState } from 'react';

function ClientComponent({ data }) {
  const [count, setCount] = useState(0);

  return (
    

      
Data from server: {JSON.stringify(data)}
      
Client-side counter: {count}
       setCount(count   1)}>Increment
    
  );
}

Заключение

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

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