kaonavi Tech Talk #7Yuuki MinamiSPA
View Slide
Yuuki Minami2018 4CTO FEST🍜@maminami_minami
7MPA SPA
Front-end Back-endInfrastructure
( )
Laravel (PHP ) Multiple-PageApplicationReact HTML Laravel ViewAPI LaravelLaravel PHP
(Laravel PHP) ⾒ TTFB
72019 React jQuery(Laravel PHP) EC2
Laravel (Front-end Laravel)⾒ 💪💪💪💪
MPA SPAAPINext.jsCloudFront + S3
SPA
SPA( Laravel MPA)& SPA-> React Router v6SPA
URL Middleware, ControllerAction DispatchSide EffectsMPA
MPA SPAMPA: Side EffectsSPA: Side EffectsSide Effects
Side Effects SPASPA : Side Effects ( )SPA Controller SPA URLSide Effects ControllerSPA
ControllerController Controller Fat 🤢APIController SPAController SPASPA
SPASPA🤫⾒ 👮
React RouterSPA Next.js (next/link)Location State React Router
Link, useNavigate(state Omit)MPASide Effects Props shouldPageLoad
Router.tsxSPAsrc/pagesNext.js
Code SplittingReact.lazy Code Splitting✂SPA
ESLint no-restricted-imports ruleno-restricted-importsimportimportpaths patternsESLint >= v8.19.0
MPA SPA 🥺 🥰
!!!!🕺!