[ΠΠΌΠΈΡΡΠΈΠΉ ΠΠ°Π²ΡΠΈΠΊ] Nuxt - ΠΈΠ½ΡΠ΅Π½ΡΠΈΠ²Π½ΡΠΉ Π±Π°Π·ΠΎΠ²ΡΠΉ ΠΊΡΡΡ (2024)

Π¦Π΅Π»Ρ ΠΊΡΡΡΠ°
Π Π°Π·ΠΎΠ±ΡΠ°ΡΡΡΡ Ρ Π³Π»Π°Π²Π½ΡΠΌΠΈ ΡΠ΅ΠΌΠ°ΠΌΠΈ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠ° Nuxt ΠΈ Π½Π°ΡΡΠΈΡΡΡΡ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ SPA, ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΠΈΠ΅ Server Side Rendering, Ρ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΠΌΠΈ ΡΡΡΠ΄ΠΎΠ·Π°ΡΡΠ°ΡΠ°ΠΌΠΈ Π΄Π»Ρ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠΈΡΡΠ°
(ΠΏΠΎ ΡΡΠ°Π²Π½Π΅Π½ΠΈΡ Ρ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠ΅ΠΉ SSR Ρ Π½ΡΠ»Ρ Π½Π° ΡΠΈΡΡΠΎΠΌ Vue).
ΠΡ Ρ ΠΎΡΠΈΠΌ ΠΎΡΠ³Π°Π½ΠΈΠ·ΠΎΠ²Π°ΡΡ ΡΡΠ΅Π½ΠΈΡΠΎΠ²ΠΊΡ, ΠΏΡΠΈΠ±Π»ΠΈΠΆΠ΅Π½Π½ΡΡ ΠΊ ΡΠ΅Π°Π»ΡΠ½ΠΎΡΡΠΈ, ΠΈ ΠΏΠΎΡΡΠΎΠΌΡ ΡΡΠ°Π·Ρ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°Π΅ΠΌ Vuetify, ΠΈΠ·ΡΡΠ°Π΅ΠΌ Π΅Ρ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ ΠΈ ΠΏΡΠΎΡΡΠΏΡΠ²Π°Π΅ΠΌ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ UI-Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊ ΠΏΡΠΈ SSR.
ΠΡΠΎΠ³ΡΠ°ΠΌΠΌΠ° ΠΊΡΡΡΠ°
29 ΠΌΠ°Ρ, 20:00 β ΡΡΠΎΠΊ 1

Π¦Π΅Π»Ρ ΠΊΡΡΡΠ°
Π Π°Π·ΠΎΠ±ΡΠ°ΡΡΡΡ Ρ Π³Π»Π°Π²Π½ΡΠΌΠΈ ΡΠ΅ΠΌΠ°ΠΌΠΈ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠ° Nuxt ΠΈ Π½Π°ΡΡΠΈΡΡΡΡ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ SPA, ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΠΈΠ΅ Server Side Rendering, Ρ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΠΌΠΈ ΡΡΡΠ΄ΠΎΠ·Π°ΡΡΠ°ΡΠ°ΠΌΠΈ Π΄Π»Ρ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠΈΡΡΠ°
(ΠΏΠΎ ΡΡΠ°Π²Π½Π΅Π½ΠΈΡ Ρ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠ΅ΠΉ SSR Ρ Π½ΡΠ»Ρ Π½Π° ΡΠΈΡΡΠΎΠΌ Vue).
ΠΡ Ρ ΠΎΡΠΈΠΌ ΠΎΡΠ³Π°Π½ΠΈΠ·ΠΎΠ²Π°ΡΡ ΡΡΠ΅Π½ΠΈΡΠΎΠ²ΠΊΡ, ΠΏΡΠΈΠ±Π»ΠΈΠΆΠ΅Π½Π½ΡΡ ΠΊ ΡΠ΅Π°Π»ΡΠ½ΠΎΡΡΠΈ, ΠΈ ΠΏΠΎΡΡΠΎΠΌΡ ΡΡΠ°Π·Ρ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°Π΅ΠΌ Vuetify, ΠΈΠ·ΡΡΠ°Π΅ΠΌ Π΅Ρ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ ΠΈ ΠΏΡΠΎΡΡΠΏΡΠ²Π°Π΅ΠΌ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ UI-Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊ ΠΏΡΠΈ SSR.
ΠΡΠΎΠ³ΡΠ°ΠΌΠΌΠ° ΠΊΡΡΡΠ°
29 ΠΌΠ°Ρ, 20:00 β ΡΡΠΎΠΊ 1
- ΠΠ½Π°ΠΊΠΎΠΌΡΡΠ²ΠΎ Ρ Nuxt, ΡΠ°Π±ΠΎΡΠ° Ρ Nuxi
- ΠΡΠΎΡΠ΅ΡΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ ΠΈ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΡ Π°Π²ΡΠΎΠΈΠΌΠΏΠΎΡΡΠ°
- Π‘ΡΡΡΠΊΡΡΡΠ° Π΄ΠΈΡΠ΅ΠΊΡΠΎΡΠΈΠΉ ΠΈ ΠΎΡΠ½ΠΎΠ²Π½ΡΠ΅ ΡΠ°ΡΡΠΈ ΡΠΈΡΡΠ΅ΠΌΡ
- ΠΡΠΎΡΡΠΎΠΉ ΡΠΎΡΡΠΈΠ½Π³, ΡΡΡΠ°Π½ΠΈΡΡ ΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ
- ΠΠ»Π°Π³ΠΈΠ½Ρ ΠΈ middleware
- ΠΠ°ΡΡΡΠΎΠΉΠΊΠΈ Π² nuxt.config
- ΠΡΠ±ΠΎΡ UI, ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠ° Vuetify 3 Π² Nuxt
- ΠΠ°Π·ΠΎΠ²ΡΠ΅ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΠΈ Vuetify
- ΠΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΡ ΠΈ ΡΡΠΈΠ»ΠΈ
- Application layout
- ΠΡΠ½ΠΎΠ²Π½ΡΠ΅ UI-ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ
- ΠΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ ΠΈΠΊΠΎΠ½ΠΎΠΊ
- SSR ΠΈ Π³ΠΈΠ΄ΡΠ°ΡΠ°ΡΠΈΡ SPA
- ΠΡΠΎΠ±Π»Π΅ΠΌΠ° Π°ΡΠΈΠ½Ρ ΡΠΎΠ½Π½ΡΡ ΠΎΠΏΠ΅ΡΠ°ΡΠΈΠΉ
- Π Π°Π±ΠΎΡΠ° Ρ Π΄Π°Π½Π½ΡΠΌΠΈ Π² Nuxt
- useFetch, useAsyncData ΠΈ $fetch
- Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΎΠ±ΡΡΡΠΊΠΈ $appFetch
- ΠΡΠ°Π½ΡΡ ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ²: setup, dependsOn, provide
- ΠΠ²ΡΠΎΡΠΈΠ·Π°ΡΠΈΡ: pinia ΠΈ auth store
- Π ΠΎΡΡΠΈΠ½Π³ ΠΈ Π²Π»ΠΎΠΆΠ΅Π½Π½ΡΠ΅ ΠΌΠ°ΡΡΡΡΡΡ
- ΠΠ΅ΡΠ°-Π΄Π°Π½Π½ΡΠ΅ ΠΌΠ°ΡΡΡΡΡΠΎΠ² ΠΈ definePageMeta
- Π Π°Π·ΡΠ°Π±ΠΎΡΠΊΠ° Auth-middleware
- $appFetch: Π°Π²ΡΠΎΡΠΈΠ·Π°ΡΠΈΡ ΠΈ 401-ΡΠ΅ ΠΎΡΠΈΠ±ΠΊΠΈ
- ΠΡΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ SSR Π΄Π»Ρ Π·Π°ΠΊΡΡΡΡΡ ΡΡΡΠ°Π½ΠΈΡ
- Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ Π²Ρ ΠΎΠ΄Π° Π½Π° ΡΠ°ΠΉΡ
- Π Π°Π±ΠΎΡΠ° Ρ ΡΠΎΡΠΌΠ°ΠΌΠΈ
- Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ composable useForm
- ΠΠ±ΡΠ°Π±ΠΎΡΠΊΠ° 422-ΡΡ ΠΎΡΠΈΠ±ΠΎΠΊ
- Layouts Π΄Π»Ρ ΠΊΠ»ΠΈΠ΅Π½ΡΡΠΊΠΎΠΉ ΡΠ°ΡΡΠΈ ΠΈ Π°Π΄ΠΌΠΈΠ½-ΠΏΠ°Π½Π΅Π»ΠΈ
- Π Π°Π·ΡΠ°Π±ΠΎΡΠΊΠ° ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»Π° Π°Π΄ΠΌΠΈΠ½ΠΊΠΈ
- ΠΠ·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ Ρ backend-api
- Api ΠΈ ΠΏΠ°ΡΡΠ΅ΡΠ½ repository
- Π£ΠΌΠ΅ΡΠ΅Π½Π½ΠΎΠ΅ ΠΏΠΎΠ³ΡΡΠΆΠ΅Π½ΠΈΠ΅ Π² typescript
- Π‘ΠΊΡΡΡΠ°Ρ ΠΏΠ°ΠΏΠΊΠ° .nuxt ΠΈ ΠΌΠ°Π³ΠΈΡ ΡΠΈΠΏΠΎΠ²
- Π Π΅ΠΆΠΈΠΌΡ Π³Π΅Π½Π΅ΡΠ°ΡΠΈΠΈ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ°
- ΠΡΠ΅ΡΠ΅Π½Π΄Π΅ΡΠΈΠ½Π³ vs SSR
- SSR ΠΈ ΡΠΎΠΊΡΡΡ UI-Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊ
- Π Π°Π±ΠΎΡΠ° Ρ SEO-ΡΠ΅Π³Π°ΠΌΠΈ
- AsyncData ΠΈ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΠΌΠ΅ΡΠ°ΡΠ΅Π³ΠΈ
- ΠΠΎΡΠ°Π±ΠΎΡΠΊΠ° SPA
- Π Π°Π·Π²ΡΡΡΡΠ²Π°Π½ΠΈΠ΅ Π½Π° VDS
- Node.js ΠΈ pm2
- Nginx reverse proxy
- ΠΡΠΎΠ²Π΅ΡΠΊΠ° Core Web Vitals Ρ SSR ΠΈ Π±Π΅Π·
Π‘ΠΊΡΡΡΠΎΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅. ΠΠ°ΠΌ Π½ΡΠΆΠ½ΠΎ Π²ΠΎΠΉΡΠΈ ΠΈΠ»ΠΈ Π·Π°ΡΠ΅Π³ΠΈΡΡΡΠΈΡΠΎΠ²Π°ΡΡΡΡ.
Π‘ΠΠΠ§ΠΠ’Π¬Π‘ΠΊΡΡΡΠΎΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅. ΠΠ°ΠΌ Π½ΡΠΆΠ½ΠΎ Π²ΠΎΠΉΡΠΈ ΠΈΠ»ΠΈ Π·Π°ΡΠ΅Π³ΠΈΡΡΡΠΈΡΠΎΠ²Π°ΡΡΡΡ.