82 подписчика
Next.js подход для больших фреймворков
Подход который использует next.js для работы оказался настолько удачным, что его начали перенимать большие фреймворки, создав, на мой взгляд, лучший способ разработки приложений. Под подходом, я имею ввиду роутинг на бекенде и почти полное отсутствие явной работы с состоянием на фронтенде, по крайней мере, в тех местах где мало интерактива. Фактически в таком подходе фронтенд становится шаблонизатором для бекенда.
Недавно я зарелизил проект по приемке абитуриентов в наш колледж написанный с помощью этого подхода. В качестве бекенд фреймворка там используется Laravel (PHP), а в качестве фронтенда не встроенный шаблонизатор blade, а Inertia.js (https://inertiajs.com/) клей, который прозрачно соединяет бекенд с фронтендовым фреймворком на выбор, в нашем случае React, но мы могли бы легко использовать и Vue.
Бекенд, в такой схеме работает почти на 100% как если бы мы использовали классическую серверную шаблонизацию.
public function create(): Response
{
$college = new College;
return $this->render(['college' => $college]);
}
В этом примере экшен отвечает за формирование страницы создания колледжа. Данные для этой страницы передаются по классике. Никакого намека на js тут нет. Рендерингом занимается Inertia.js, которая берет данные для рендеринга и вставляет их сериализованную версию прямо в html в виде переменной с объектами.
Эти данные автоматически прокидываются в клиентские компоненты отвечающие за соответствующие экшены.
type EditPageProps = PageProps<{ college: College }>
export default function Edit({ college }: EditPageProps) {
const { props: { scope } } = usePage<SharedProps>()
Кроме прочего, Inertia.js дает кучку разных вспомогательных инструментов, например хук useForm который знает как работать с бекендом на Laravel, что дает автоматический захват ошибок и вот это все.
Но даже в таком подходе иногда нужен API, например для автокомплитов. Inertia.js и Laravel этому никак не мешают, всегда можно добавить любое API.
1 минута
6 июня 2024