## Проблема сучасних SPA-рішень

У сучасному веб-розробці ми часто стикаємося з дилемою: вибрати повноцінні SSR-сторінки для SEO чи клієнтські переходи для плавного UX. Особливо це помітно при реалізації розділів з горизонтальною навігацією, де:

1. Користувач скролить контент
2. Переходить до іншого розділу
3. Отримує неочікуване перезавантаження та скрол до верху

Я пропоную елегантне рішення, яке поєднує переваги обох підходів.

## Архітектура рішення

Розділимо код на дві логічні частини:

1. **Серверна частина** (`pages/mypage.js`) - відповідає за SSR та API-запити
2. **Клієнтський компонент** (`src/components/pages/mypage.js`) - відповідає за інтерактивність

### 1. Серверна частина (pages/mypage.js)

```jsx
import MyPageComponent from "@/components/pages/mypage";

export default function MyPage({ initialData, initialSection }) {
  return <MyPageComponent initialData={initialData} initialSection={initialSection} />;
}

export async function getServerSideProps(context) {
  const { section = "home" } = context.query;
  
  // Імітуємо запит до API (в реальному проекті тут буде fetch)
  const mockData = {
    home: { title: "Home Page", content: "This is the home page content." },
    products: { title: "Our Products", content: "Here are our amazing products..." },
    services: { title: "Services", content: "We offer these services..." },
    about: { title: "About Us", content: "Learn more about our company..."' },
    contact: { title: "Contact", content: "Get in touch with us..." },
  };

  return {
    props: {
      initialData: mockData[section],
      initialSection: section
    },
  };
}
```

### 2. Клієнтський компонент (src/components/pages/mypage.js)

```jsx
import { useState, useEffect } from "react";
import { useRouter } from "next/router";
import Link from "next/link";
import { Box, Typography, CircularProgress } from "@mui/material";
import { css } from "@emotion/react";

const menuStyles = css`
  display: flex;
  gap: 20px;
  padding: 20px 0;
  overflow-x: auto;
  position: sticky;
  top: 0;
  background: white;
  z-index: 100;
  border-bottom: 1px solid #eee;
`;

const menuItemStyles = (isActive) => css`
  cursor: pointer;
  padding: 8px 16px;
  border-radius: 4px;
  white-space: nowrap;
  background: ${isActive ? "#1976d2" : "transparent"};
  color: ${isActive ? "white" : "inherit"};
  &:hover {
    background: ${isActive ? "#1565c0" : "#f5f5f5"};
  }
`;

export default function MyPageComponent({ initialData, initialSection }) {
  const router = useRouter();
  const { section = initialSection } = router.query;
  const [data, setData] = useState(initialData);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    const fetchSectionData = async (sectionName) => {
      setLoading(true);
      try {
        const res = await fetch(`/api/sections?section=${sectionName}`);
        const newData = await res.json();
        setData(newData);
      } catch (error) {
        console.error("Failed to fetch section data:", error);
      } finally {
        setLoading(false);
      }
    };

    if (section !== initialSection) {
      fetchSectionData(section);
    }
  }, [section, initialSection]);

  const handleSectionClick = (e, sectionName) => {
    e.preventDefault();
    router.push(
      `/mypage?section=${sectionName}`,
      undefined,
      { shallow: true, scroll: false }
    );
  };

  const sections = ["home", "products", "services", "about", "contact"];

  return (
    <div>
      <Box css={menuStyles}>
        {sections.map((sectionName) => (
          <Link 
            key={sectionName} 
            href={`/mypage?section=${sectionName}`} 
            passHref
            shallow
          >
            <Box 
              css={menuItemStyles(section === sectionName)}
              onClick={(e) => handleSectionClick(e, sectionName)}
            >
              {sectionName}
            </Box>
          </Link>
        ))}
      </Box>

      {loading ? (
        <Box display="flex" justifyContent="center" py={4}>
          <CircularProgress />
        </Box>
      ) : (
        <Box p={3}>
          <Typography variant="h4" gutterBottom>
            {data?.title || "Welcome"}
          </Typography>
          <Typography paragraph>
            {data?.content || "Select a section above"}
          </Typography>
          <Typography color="text.secondary">
            Current section: {section}
          </Typography>
        </Box>
      )}
    </div>
  );
}
```

## API endpoint (`pages/api/sections.js`)

```js
export default function handler(req, res) {
  const { section = "home" } = req.query;

  const mockData = {
    home: { title: "Home Page", content: "This is the home page content." },
    products: { title: "Our Products", content: "Here are our amazing products..." },
    services: { title: "Services", content: "We offer these services..." },
    about: { title: "About Us", content: "Learn more about our company..." },
    contact: { title: "Contact", content: "Get in touch with us..." },
  };

  res.status(200).json(mockData[section] || mockData.home);
}
```

## Чому це працює ідеально?

1. **Перше завантаження**:
   - Сервер генерує повноцінний HTML з контентом
   - Пошукові боти бачать повний контент
   - URL містить параметр розділу

2. **Клієнтські переходи**:
   - Дані підвантажуються через API
   - Сторінка не перезавантажується
   - Позиція скролу зберігається
   - URL оновлюється (можна копіювати та ділитися)

3. **Прямі посилання**:
   - Працюють коректно через SSR
   - Завжди показують актуальний контент

## Оптимізації та нюанси

1. **Shallow Routing**:
   ```js
   router.push(url, undefined, { shallow: true })
   ```
   Дозволяє змінювати URL без перезавантаження сторінки

2. **Відміна скролу**:
   ```js
   { scroll: false }
   ```
   Забороняє автоматичний скрол до верху

3. **Однотипні запити**:
   - Сервер і клієнт використовують однакову структуру даних
   - Немає розбіжностей у відображенні

4. **Стани завантаження**:
   - Чітко відображаємо процес завантаження
   - Запобігаємо "миготінню" контенту

## Висновок

Запропоноване рішення ідеально підходить для:

- Інтернет-магазинів з категоріями
- Блогів з розділами
- Будь-яких сайтів з табованим контентом

Воно поєднує найкращі практики SEO та сучасного UX, забезпечуючи:

- Індексацію пошуковими системами
- Плавну навігацію для користувачів
- Стабільну роботу на всіх платформах
- Можливість ділитися посиланнями на конкретні розділи

Реалізація з розділенням на серверну та клієнтську частини робить код більш підтримуваним та масштабованим.


Рішення поєднує SEO-дружню серверну генерацію з плавною клієнтською навігацією без перезавантажень. Це ідеально підходить для сайтів з табованим або секційним контентом, зберігаючи скрол і актуальний URL.

Оптимальна навігація між розділами на сторінці в Next.js без втрати SEO та скролу

Знайдіть статтю за темою наSpotlib🔎