SSR (серверный рендеринг) — это еще один метод создания страниц в Next.js. В этой статье я хочу объяснить, что такое SSR, как он работает и как реализовать его как в Page Router, так и в App Router проекта Next.js.

Что такое ССР?

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

Как работает ССР?

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

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

Как реализовать SSR в App Router

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

Например, если у вас есть статическая страница и вы получаете данные из API, эта страница по умолчанию будет использовать SSR. Важно отметить, что при использовании SSR страница не объединяется и не обрабатывается предварительно во время сборки. А если вы используете динамическую страницу в своем проекте, она будет использовать SSG по умолчанию, если вы не извлекаете никаких данных. Но когда вы выполняете выборку из API, он переключится на SSR, и во время сборки статические страницы объединяться не будут.

это пример реализации SSR в статическом маршруте:

import React from 'react';

const AboutPage = async () => {
  // Fetch data from an API or any server-side source
  const data = getDataFromApi();

  return (
    

      
About Us
      
{data}
    
  );
};

export default AboutPage;

Как реализовать SSR в Page Router

Чтобы реализовать SSR в маршрутизаторе страниц, вам необходимо создать в файле функцию getServerSideProps. Эта функция будет вызываться после каждого запроса пользователя. Если вы используете динамический маршрут, например файл [id], вам также потребуется использовать getServerSideProps в вашем файле. Эта функция принимает аргумент, часто называемый контекстом, из которого вы можете получить идентификатор — значение динамической страницы. Эта функция вызывается сервером при каждом запросе пользователя.

это пример реализации в файле tsx:

import { GetServerSideProps } from 'next';

interface AboutProps {
  data: string;
}

const AboutPage: React.FC = ({ data }) => {
  return (
    

      
About Us
      
{data}
    
  );
};

// This function runs on the server on every request
export const getServerSideProps: GetServerSideProps = async () => {
  const data = getDataFromApi();
  return {
    props: {
      data,
    },
  };
};

export default AboutPage;

это пример реализации в файле jsx:

const AboutPage = ({ data }) => {
  return (
    

      
About Us
      
{data}
    
  );
};

// This function runs on the server on every request
export async function getServerSideProps() {
  const data = getDataFromApi();

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

export default AboutPage;

Заключение

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

Надеюсь, вам понравилась эта статья! Если у вас есть какие-либо вопросы, не стесняйтесь спрашивать меня. Если вы хотите прочитать об ISR и SSG, вы можете прочитать мои статьи о них здесь для ISR и здесь для SSG. Если вы хотите узнать обо всем больше, вы можете следить за моим сайтом.

Спасибо, что читаете! А сейчас до свидания!