Почему я выбрал Astro для своего персонального сайта в 2025 году

Как Fullstack разработчик, я постоянно ищу инструменты, которые помогают создавать качественные продукты быстро и эффективно. Когда пришло время обновить мой персональный сайт (вы читаете его прямо сейчас!), я столкнулся с выбором: использовать привычный React (Next.js), попробовать что-то новое или вернуться к основам? После некоторого исследования выбор пал на Astro. И вот почему.

Ключевые Требования к Сайту

Мои главные цели были:

🚀 Максимальная производительность: Сайт должен загружаться молниеносно. Это критично для User Experience и SEO.
🔍 Отличное SEO: Структура, семантика, мета-теги, sitemap.xml.
✍️ Удобство работы с контентом: Блог — важная часть сайта, поэтому добавление и редактирование постов (в Markdown) должно быть простым.
🎨 Современный дизайн и DX: Хотелось использовать современные инструменты вроде Tailwind CSS и иметь приятный процесс разработки (Developer Experience).

Почему не React/Next.js?

Хотя я люблю React и активно использую его в PERN-стеке, для контентного сайта, где интерактивность минимальна (за исключением, может быть, переключателя тем и мобильного меню), полновесный SPA-фреймворк показался избыточным. Next.js великолепен, но его мощь (SSR, ISR) здесь была не нужна, а потенциальный JavaScript бандл — нежелателен для максимальной скорости.

Преимущества Astro

Astro идеально попал в мои требования:

Zero JS by Default & Islands Architecture: Astro рендерит всё в статический HTML/CSS на сервере. JavaScript подключается только для конкретных интерактивных компонентов (“островов”), если они нужны. Результат — почти нулевой JS на клиенте для большинства страниц.
Ориентация на контент: Встроенная поддержка Markdown, коллекций контента (astro:content) и генерация страниц из .md файлов — это просто мечта для блогов и документации.
Гибкость: Хочешь использовать React/Vue/Svelte/Solid компонент для сложного виджета? Пожалуйста! Astro поддерживает интеграцию с популярными UI-фреймворками.
SEO-френдли: Генерация sitemap.xml, канонические URL, легкая работа с мета-тегами — все это есть “из коробки” или через официальные интеграции.
Интеграции: Легко подключить Tailwind CSS (npx astro add tailwind), MDX, парсеры и многое другое.

Диаграмма: Astro Islands Architecture

Интеграция с Tailwind CSS

Настройка Tailwind оказалась элементарной. Одна команда — и все готово. Использование Tailwind классов прямо в .astro компонентах ощущается очень естественно. А плагин @tailwindcss/typography (класс .prose) автоматически стилизует весь контент из Markdown, что экономит кучу времени на написание CSS для статей.

---
// Пример .astro компонента с Tailwind
import BaseLayout from '../layouts/BaseLayout.astro';
---
<BaseLayout title="Пример">
  <h1 class="text-4xl font-bold text-blue-600 dark:text-blue-400 mb-4">
    Привет, Tailwind!
  </h1>
  <p class="text-gray-700 dark:text-gray-300">
    Стилизация с помощью утилитарных классов.
  </p>
</BaseLayout>

Выводы

Переход на Astro для моего персонального сайта оказался отличным решением. Я получил невероятно быстрый сайт, удобный процесс разработки и публикации контента, а также все необходимые инструменты для SEO. Если вы создаете контентный сайт, портфолио или блог — настоятельно рекомендую присмотреться к Astro!

2. Создай src/content/blog/getting-started-with-pern.md (Второй пример поста)

---
title: "Старт работы с PERN стеком: Руководство для начинающих"
description: "Пошаговое введение в PERN (PostgreSQL, Express, React, Node.js) стек. Установка, настройка базового проекта, взаимодействие между frontend и backend. Советы от Богдана Новотарского."
pubDate: 2025-04-28 # YYYY-MM-DD
tags:
  [
    "pern",
    "postgresql",
    "express",
    "react",
    "nodejs",
    "fullstack",
    "tutorial",
    "javascript",
  ]
image: "/images/blog/pern-stack-logo-combination.png" # Плейсхолдер
draft: false
---

PERN (PostgreSQL, Express.js, React, Node.js) — это мощный и популярный стек технологий для создания современных полнофункциональных веб-приложений. Если вы хотите стать Fullstack разработчиком, освоение PERN — отличный выбор. В этой статье я, Богдан Новотарский, проведу вас через первые шаги настройки базового проекта на этом стеке.

Что такое PERN?

Кратко расшифруем компоненты:

PostgreSQL: Мощная, объектно-реляционная система управления базами данных с открытым исходным кодом. Отличается надежностью, расширяемостью и поддержкой сложных запросов.
Express.js: Минималистичный и гибкий веб-фреймворк для Node.js. Идеален для создания RESTful API и бэкенд-логики.
React: Популярная JavaScript-библиотека для создания пользовательских интерфейсов (UI), разработанная Facebook. Основана на компонентном подходе.
Node.js: Среда выполнения JavaScript на стороне сервера, построенная на движке V8 от Google Chrome. Позволяет использовать JavaScript для бэкенд-разработки.

Схема взаимодействия компонентов PERN стека Базовая схема взаимодействия клиента, сервера и базы данных в PERN

Необходимые инструменты

Перед началом убедитесь, что у вас установлены:

Node.js и npm: Скачайте с nodejs.org. npm установится вместе с Node.js.
PostgreSQL: Установите СУБД и какой-нибудь GUI-клиент (например, pgAdmin или DBeaver) с postgresql.org.
Текстовый редактор: VS Code, WebStorm или любой другой по вашему вкусу.
Git: Система контроля версий (git-scm.com).

Структура проекта

Обычно PERN проект делят на две основные папки:

my-pern-app/
├── client/ # React frontend (создается с помощью Create React App или Vite)
└── server/ # Node.js/Express backend

Настройка Backend (Express + PostgreSQL)

Создаем папку server и инициализируем проект:

mkdir server
cd server
npm init -y
npm install express pg dotenv cors # Основные зависимости
npm install -D nodemon # Для удобства разработки

pg: Драйвер для работы с PostgreSQL.
dotenv: Для загрузки переменных окружения из .env файла.
cors: Middleware для обработки Cross-Origin Resource Sharing.

Создаем базовый файл сервера (server.js или index.js):

// server/index.js
require("dotenv").config(); // Загружаем переменные окружения
const express = require("express");
const cors = require("cors");
const db = require("./db"); // Настроим подключение к БД отдельно

const app = express();
const PORT = process.env.PORT || 5000;

// Middleware
app.use(cors()); // Разрешаем запросы с других доменов (нашего React-приложения)
app.use(express.json()); // Позволяем парсить JSON в теле запроса

// Простой роут для проверки
app.get("/api/test", (req, res) => {
  res.json({ message: "Backend работает!" });
});

// TODO: Добавить другие роуты для работы с данными (CRUD)

app.listen(PORT, () => {
  console.log(`Сервер запущен на порту ${PORT}`);
});

Настраиваем подключение к БД (db.js):

// server/db.js
const { Pool } = require("pg");

const pool = new Pool({
  user: process.env.DB_USER,
  host: process.env.DB_HOST,
  database: process.env.DB_DATABASE,
  password: process.env.DB_PASSWORD,
  port: process.env.DB_PORT,
});

module.exports = {
  query: (text, params) => pool.query(text, params),
};

Создаем файл .env в папке server и указываем данные для подключения к вашей БД PostgreSQL:

# server/.env
DB_USER=your_db_user
DB_HOST=localhost
DB_DATABASE=your_db_name
DB_PASSWORD=your_db_password
DB_PORT=5432
PORT=5001 # Можно указать другой порт для бэкенда

Добавляем скрипт запуска в package.json:

 // server/package.json
 "scripts": {
   "start": "node index.js",
   "dev": "nodemon index.js" // Для разработки
 },

Теперь можно запустить бэкенд командой npm run dev.

Настройка Frontend (React)

Возвращаемся в корневую папку и создаем React-приложение (используя Vite для скорости):

cd .. # Выходим из папки server
npm create vite@latest client --template react-ts # Или react для JS
cd client
npm install
npm install axios # Для выполнения HTTP-запросов к бэкенду

Делаем тестовый запрос к API из React компонента (например, App.tsx):

// client/src/App.tsx
import { useState, useEffect } from "react";
import axios from "axios";
import "./App.css"; // Стили Vite

function App() {
  const [message, setMessage] = useState<string>("");
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    // Указываем полный URL к нашему API
    const apiUrl = "http://localhost:5001/api/test"; // Порт из server/.env

    axios
      .get(apiUrl)
      .then((response) => {
        setMessage(response.data.message);
      })
      .catch((err) => {
        console.error("Ошибка при запросе к API:", err);
        setError("Не удалось загрузить данные с сервера.");
      });
  }, []); // Пустой массив зависимостей - выполнить один раз при монтировании

  return (
    <div className="App">
      <h1>Тестовое PERN Приложение</h1>
      {error ? (
        <p style={{ color: "red" }}>{error}</p>
      ) : (
        <p>
          Сообщение от бэкенда: <strong>{message || "Загрузка..."}</strong>
        </p>
      )}
    </div>
  );
}

export default App;

Запускаем React-приложение:

npm run dev

Теперь, если оба сервера (бэкенд на порту 5001 и фронтенд Vite обычно на 5173) запущены, вы должны увидеть сообщение “Backend работает!” на странице React-приложения.

Следующие шаги

Это только самое начало! Дальше вам предстоит:

Создать таблицы в PostgreSQL.
Реализовать CRUD-операции (Create, Read, Update, Delete) на бэкенде (Express API).
Создать компоненты в React для отображения и взаимодействия с данными.
Настроить обработку форм, валидацию, аутентификацию и многое другое.

Надеюсь, это руководство поможет вам сделать первые шаги в увлекательный мир PERN стека! Удачи в разработке!