Фронтенд умер или коротко о Next.js 14

#Фронтенд умер?

Для тех кто не хочет долго читать - пока что фронтенд жив, но есть нюанс.

#В чем нюанс?

Недавно Next.js обновился на 14 версию. Самое основное, что добавили - Server Actions. Если простым языком, это когда в одном файле, да даже в одной функции может быть фронтенд и бэкенд код.

export default function ServerComponent() {
  async function myAction() {
    'use server'
    // ...
  }
}

Server Actions появились в версие Next.js 13.4, но тогда они были как эспериментальная функция. Я её кстати успел попробовать на одном из своих пет-проектов. Ещё в этой версие добавили App Router, что было довольно непривычно первое время, но это уже другая тема.

Казалось бы, а что в этом такого? А дело в том, что при таком подходе как таковой фронтенд уже не используется. Точнее даже не так, он используется, но уже в связки с бэкендом. А это уже фулстек - когда разработчик пишет фронтенд и бэкенд.

#Серверный рендеринг

Тендеция перехода на серверные компонтенты довольно чиста и понятна. Это как минимум быстро.

Забавно то, что PHP использует серверный рендеринг с самого зарождения языка, а если грубо говорить, то это 1994 год. Конечно, в самом 1994 году были немного другие задачи, чем сейчас, но подход тот же.

А вот тут в клиентском компоненте имопртируется серверный компонент:

'use client'

import { myAction } from './actions'

export default function ClientComponent() {
  return (
    <form action={myAction}>
      <button type="submit">Add to Cart</button>
    </form>
  )
}

#Что будет с фронтендом?

Рынок фронтенда плавно двигается к фуллстэк, то есть фронтендерам нужно будет знать бэкенд, как минимум как писать SQL запросы к базе данных, какие бывают базы данных, и как шифровать данные.

#Заключение

Как-будто сам фронтенд стал легче, но чтобы быть конкурентным на рынке к нему добавился ещё и бэкенд. Для новичков это может стать небольшой проблемой, ведь часто люди задаются вопросом: “А что учить, фронтенд или бэкенд?”. Сейчас всё двигается к тому, что фронтендеры сами по себе вымирают. А если вы фулл-стек, то нечего переживать.

#Ресурсы

• Подробнее про Next.js 14;
• Первое появление Server Actions в Next.js;
• Ссылка, на случай если вам интересно, что за пет-проект я делал с использованием Server Actions.