“Jamstack is an architecture designed to make the web faster, more secure, and easier to scale.” - these words resonate as true for the Laravel framework, as well. The talk tried to answer is there a place for Laravel in the Javascript-driven world of Jamstack. Should a Laravel team strive to adopt this new way of building websites? The talk was given at the PHP Serbia meetup in Belgrade, Serbia on September 27th, 2022.

1. Tihomir Opacic / Belgrade / 27.09.2022.
Where does Laravel fit in the
Jamstack concept?
PHP Serbia Meetup

2. What is Jamstack?

3. https://jamstack.org/
“Jamstack is an architecture designed to
make the web faster, more secure, and
easier to scale.”

4. “Jamstack” was
originally cased as
“JAMstack”
where “JAM” stood for
JavaScript, API & Markup.

6. 1998.

7. 2008.
SSG - Static Site Generators

8. 2010.
SPA - Single-Page Apps

9. 2015.
SSR SEO Issue

10. 2015.
Headless CMSs

11. 2015.
SSG is a thing!

12. 2019.
2016.

13. 2019.
2016.

14. https://jamstack.org/
“Jamstack is an architecture designed to
make the web faster, more secure, and
easier to scale.”

15. How?

16. Security
Jamstack
The Jamstack removes multiple moving parts and systems from the
hosting infrastructure resulting in fewer servers and systems to harden
against attack.

17. Scale
Jamstack
Popular architectures deal with heavy traffic loads by adding logic to
cache popular views and resources. The Jamstack provides this by
default. When sites can be served entirely from a CDN there is no
complex logic or workflow to determine what assets can be cached
and when.

18. Performance
Jamstack
Page loading speeds have an impact on user experience and
conversion. Jamstack sites remove the need to generate page views
on a server at request time by instead generating pages ahead of time
during a build.

19. Maintainability
Jamstack
When hosting complexity is reduced, so are maintenance tasks. A pre-
generated site, being served directly from a simple host or directly from
a CDN does not need a team of experts to "keep the lights on".

20. Portability
Jamstack
Jamstack sites are pre-generated. That means that you can host them
from a wide variety of hosting services and have greater ability to move
them to your preferred host. Any simple static hosting solution should
be able to serve a Jamstack site.

21. 2022.
1998. ===
?

25. Next.js Analytics
Next.js
A true lighthouse score based on real visitor data & page-by-page
insights

26. Image Optimization
Next.js
<Image> and Automatic Image Optimization with instant builds.

27. Hybrid: SSG and SSR
Next.js
Pre-render pages at build time (SSG - Static Site Generation) or request
time (SSR - Server-Side Rendering) in a single project.

28. Incremental Static Regeneration
Next.js
Add and update statically pre-rendered pages incrementally after build
time.

29. API Routes
Next.js
Optionally create API endpoints to provide backend functionality.

30. SSG - Static Site Generation
Next.js
• Pulls the data from API only at build-time
• Super-fast loading pages independent from the backend speed
• Great security

31. Incremental Static Regeneration
Next.js
• Allows real-time site content updates without needing to run entire build
process again
• Still independent from the API speed as the check is done asynchronously
upon visitor page view
• New content version is served for the next web page visitor

32. SSR - Server Side Rendering
Next.js
• Node process synchronously pulls the API data from the server
• Server internet connection is faster than users’
• API is securely hidden

33. API Routes
Next.js
• Allows us to use Next.js API routes to hide the original API
• We can safely apply API IP whitelisting security measure

34. The big challenger

38. Nested Routes
Remix

39. Nested Routes
Remix

40. Nested Routes
Remix

41. Nested Routes
Remix

42. Remix: CDN Caching, Static Site Generation, and Server Side Rendering
https://www.youtube.com/watch?v=bfLFHp7Sbkg

43. So where does the Laravel fit in,
in this train of thought?

44. Thanks!

45. @tihomiropacic / Belgrade / 27.09.2022.
Thanks!