У сучасній веб-розробці Nextjs та PHP є двома популярними підходами до створення веб-додатків. Nextjs є фреймворком для фронтенду, що базується на React, і забезпечує чудові можливості для рендерингу сторінок і обробки даних, в той час як PHP дозволяє писати бізнес-код безпосередньо на сторінках і швидко реалізовувати динамічні функції веб-сторінок без додаткових залежностей від фреймворків. У цій статті розглядається детальне порівняння цих двох технологій з точки зору бізнес-логіки, обробки даних і взаємодії сторінок, а також наводяться приклади коду.

Бізнес-логіка

Архітектура бізнес-логіки Nextjs має компонентну модель, де сторінки поділяються на кілька незалежних компонентів, кожен з яких відповідає за певну частину логіки. Структура проекту базується на папці pages, файли в якій відповідають за різні маршрути. Наприклад, для створення сторінки зі списком блогів можна написати код у файлі pages/blog.js.

javascript
import React from 'react';

const Blog = () => {
return (

);
};

export default Blog;

Таке розбиття на компоненти робить код гнучким, зручним для повторного використання та підтримки.

Бізнес-логіка PHP зазвичай пишеться безпосередньо в .php файлах, де можуть бути змішані HTML, PHP та CSS. Для прикладу, сторінка входу користувача може виглядати наступним чином:

php

Username:
Password:
Login

Такий підхід дуже підходить для простих бізнес-логік, але з ростом складності проєкту читабельність і підтримка коду можуть ускладнитися.

Обробка даних та взаємодія

Обробка даних у Nextjs використовує функції, такі як getStaticProps і getServerSideProps, для отримання даних. Наприклад, для отримання і відображення списку блогів з API бекенду, код може виглядати так:

javascript
export async function getServerSideProps() {
const res = await fetch('https://api.example.com/blogs');
const blogs = await res.json();
return {
props: {
blogs
}
};
}

const Blog = ({ blogs }) => {
return (

);
};

export default Blog;

Для взаємодії з клієнтом, Nextjs використовує React-хуки, як-от useState, щоб динамічно оновлювати дані на сторінці. Наприклад, додавання функції пошуку для списку блогів:

javascript
import React, { useState } from 'react';

export async function getServerSideProps() {
const res = await fetch('https://api.example.com/blogs');
const blogs = await res.json();
return {
props: { blogs }
};
}

const Blog = ({ blogs }) => {
const [searchTerm, setSearchTerm] = useState('');
const filteredBlogs = blogs.filter((blog) =>
blog.title.toLowerCase().includes(searchTerm.toLowerCase())
);
return (

);
};

export default Blog;

Обробка даних у PHP зазвичай включає взаємодію з базою даних. Наприклад, для отримання списку постів з бази даних MySQL можна використати наступний код:

php
<?php
$conn = new mysqli($servername, $username, $password, $dbname);

if ($conn->connecterror) {
die("Connection failed: " . $conn->connecterror);
}

$sql = "SELECT id, title FROM blogs";
$result = $conn->query($sql);

if ($result->numrows > 0) {
echo "

Blog List

";
while($row = $result->fetchassoc()) {
echo "

";
}
} else {
echo "No Blog Posts Found";
}

$conn->close();
?>

Однак PHP має деякі недоліки, такі як можливість SQL-ін’єкцій, тому важливо використовувати параметризовані запити для забезпечення безпеки.

Рендеринг сторінок

Рендеринг сторінок у Nextjs підтримує кілька режимів. Наприклад, у режимі статичної генерації сторінки (SSG), функція getStaticProps виконується під час процесу побудови і створює статичний HTML файл:

javascript
export async function getStaticProps() {
const res = await fetch('https://api.example.com/blogs');
const blogs = await res.json();
return {
props: { blogs },
revalidate: 60 // Перевірка даних кожні 60 секунд
};
}

const Blog = ({ blogs }) => {
return (

);
};

export default Blog;

В режимі рендерингу на сервері (SSR), функція getServerSideProps виконується при кожному запиті, що дозволяє отримувати дані в реальному часі.

Рендеринг сторінок у PHP є динамічним, і сторінки генеруються на сервері, після чого відправляються клієнту. Щоб оновити дані, сторінка повинна бути перезавантажена. Це може погіршити досвід користувача, оскільки кожен пошук або оновлення вимагає повного перезавантаження сторінки. Проте, для покращення досвіду користувача, PHP може використовувати AJAX для часткового оновлення сторінки.

Висновок

Nextjs та PHP мають різні підходи до веб-розробки. Nextjs підходить для створення сучасних веб-додатків, оскільки пропонує потужні можливості оптимізації продуктивності, повторного використання компонентів і ефективної розробки, але вимагає більш високого рівня знань у фронтенд-розробці. PHP, в свою чергу, є простим і ефективним для швидкого створення динамічних сторінок і бізнес-логіки, але при цьому може бути менш гнучким для складних проектів. Вибір між цими технологіями залежить від вимог проєкту та технічних можливостей команди.

Перекладено з: Next.js vs PHP: Real Code Comparison for Web Applications