Ідеальне комбо Next & Redux-Saga
Привіт! Хочу поділитися досвідом імплементації цікавої стратегії розробки SPA (Single Page Application) додатку з рендерингом на стороні серверу. Відразу повідомлю, що стаття орієнтована на розробників програмного забезпечення з базовими знаннями. Все що описано нище, практично працює на декількох проектах в реальному житті. Приємного читання 😉
Якщо розглядати React стек для створення відносно складного додатку, то в більшості випадків доцільним є використання бібліотеки керування станом додатку. Де-факто, стандартом у цій сфері є бібліотека Redux. Хоча вона існує ще з 2015 року, проте й досі набирає популярності. Більше того бібліотека є обов’язковою в більшості вакансій, пов’язаних з React. Навіть нове React API контексту не змінило її позицій. Рахуємо, що бібліотеку для керування стану додатку ми маємо.
Асинхронні операції
Наступний крок розвитку нашого додатку - керування асинхронними діями. Зазвичай це запити до сервера чи обробка якихось дій користувача. Тут є 2 хороших варіанта: redux-thunk та redux-saga. На мою думку thunk підходить для простих додатків. А щодо saga, то це рішення, яке не тільки вирішить проблему з асинхронними операціями, а й проблему існування бізнес логіки в компонентах. Вирішення другої проблеми, як на мене, не менш важливе ніж першої. Тому, я вважаю redux-saga найкращою бібліотекою для керуванням асинхронними діями в додатках, з використанням бібліотек React та Redux.
Отож, обраний стек React & Redux & Redux-Saga я б назвав ідеальним, манною небесною для сучасної розробки користувацьких інтерфейсів. Проте, ця стаття не про ці бібліотеки. Про них є безліч інформації в мережі Інтернет. Я рекомендую розібратися з ними і використати в наступних проектах. Якщо у вас немає мінімальних знань щодо них, то наступна частина буде для Вас складнішою, але все одно корисною.
Рендеринг на стороні серверу
Навіть маючи ідеальний стек технологій, ми також отримуємо досить поширену проблему. Багато хто має труднощі, бо не вирішив її на етапі старту проекту. Що ж це? SEO (Search Engine Optimization)! Це пошукова оптимізація вашого вебсайту. Так, це не завжди потрібно, проте дуже часто грає вирішальну роль. Що потрібно щоб SEO працювало добре? Все просто - SSR (Server-Side Rendering).
SSR вирішує проблему з SEO. Хоча Google crawler (Googlebot) вже ніби вміє працювати з SPA додатками, та на практиці це не зовсім так. Пошукова оптимізація при SSR працює краще ніж при рендерингу у браузері. Це факт.
SSR має ще й інші переваги. Наприклад, швидший початковий рендеринг та перенесення навантаження на сервер, оскільки сторінка приходить вже готова з серверу. Отже, потрібно обрати фреймворк. Насправді вибір невеликий. Next.js! Це найкраще рішення, яке використовує багато великих вебсайтів.
Імплементація
Візьміть до уваги що налаштування звичайного saga flow в даній статті не розглядається. Нас цікавить імплементація саме Redux cховища при рендері на стороні серверу. Для налаштувань саги на стороні браузера читайте офіційний туторіал Redux-Saga. Отже, нам знадобиться бібліотека next-redux-wrapper. Вона автоматично створює потрібні екземпляри сховища для клієнта та сервера і гарантує, що вони мають однаковий стан. За посиланням ви знайдете детальний опис API цієї бібліотеки, а також опис можливих сценаріїв.
1. Створюємо головну сагу та імплементуємо генератор сховища
2. Обгортаємо головний компонент _app.js у компонент вищого порядку, який був створений на першому кроці
3. Виконуємо необхідні виклики на сервері, після чого зупиняємо сагу на сервері
4. Додаємо до редусерів обробник HYDRATE. Він належним чином узгоджує гідратований стан поверх існуючого стану
5. Це й все. Тепер можна отримати дані з сховища в будь-якому місці додатку, чи то на стороні сервера чи клієнта
Якщо моя розповідь вам допомогла, ви знайшли помилку або можете запропонувати покращення, будь ласка не соромтеся написати мені. Мої контакти ви знайдете на початку сторінки 😉