Получение и обработка данных в Next.js

Введение

Next.js — это фреймворк на основе React, который предоставляет функциональность серверного рендеринга и генерации статических веб-страниц. Одной из ключевых особенностей Next.js является удобная работа с данными, полученными с сервера.

Получение данных на стороне сервера

Для получения данных на стороне сервера в Next.js используются функции getStaticProps и getServerSideProps.

Пример с getStaticProps

getStaticProps используется для генерации статических страниц на этапе сборки.

// pages/index.js
export async function getStaticProps() {
  const res = await fetch("https://example.com/data");
  const data = await res.json();

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

export default function Home({ data }) {
  return (
    <div>
      {/* Отображение данных */}
      {data.map((item) => (
        <p key={item.id}>{item.title}</p>
      ))}
    </div>
  );
}
Пример с getServerSideProps

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

// pages/about.js
export async function getServerSideProps() {
  const res = await fetch("https://example.com/data");
  const data = await res.json();

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

export default function About({ data }) {
  return (
    <div>
      {/* Отображение данных */}
      {data.map((item) => (
        <p key={item.id}>{item.title}</p>
      ))}
    </div>
  );
}

Обработка данных на клиенте

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

import React, { useState, useEffect } from "react";

export default function ClientSide() {
  const [data, setData] = useState([]);

  useEffect(() => {
    async function fetchData() {
      const res = await fetch("https://example.com/data");
      const result = await res.json();
      setData(result);
    }

    fetchData();
  }, []);

  return (
    <div>
      {/* Отображение данных */}
      {data.map((item) => (
        <p key={item.id}>{item.title}</p>
      ))}
    </div>
  );
}

Заключение

Next.js предлагает гибкие подходы к работе с данными, как на стороне сервера, так и на стороне клиента. Выбор между getStaticProps, getServerSideProps и клиентскими хуками зависит от конкретных требований к приложению и типа данных, с которыми вы работаете.

Вам также может понравиться
Tags: Веб-разработка

Другие похожие посты