108: Jonathan Reinink - Client-Side Rendering, Server-Side Routing

February 14, 2019

69 min episode · 2 min read

Jonathan Reinink,Adam Wavin

Episode

69 min

Read time

2 min

AI-Generated Summary

Published Dec 25, 2025

Key Takeaways

✓Hybrid architecture pain points: Mixing server-rendered Blade templates with Vue components creates confusion about template locations, requires switching between build processes, and forces parent wrapper components when siblings need to communicate, eventually consuming entire page sections unnecessarily into Vue.
✓Client-side rendering without SPAs: Render every page as a full Vue component by passing component names and JSON-encoded props through data attributes on a root div, letting Vue instantiate on page load while controllers prepare all data server-side, eliminating API requirements.
✓Data preparation advantages: Controllers transform database queries into component-ready props before rendering, avoiding multiple HTTP requests that SPAs require. Six database queries on the server execute faster than six Ajax calls from the client, leveraging Laravel's Eloquent ORM directly.
✓Authorization through props: Pass permission checks as boolean props from controllers using a can object structure, either globally for page-level actions or nested within individual resources. This approach views all data through the authenticated user's lens, enriching resources with editable metadata.
✓Route and layout solutions: Use Ziggy library to expose Laravel named routes to JavaScript, register route as a Vue mixin for template access. Implement layouts as Vue components with default slots, enabling reactive title updates and component communication without server-side template inheritance.

What It Covers

Jonathan Reinink explains his approach to building Laravel applications using Vue.js for all UI rendering while maintaining traditional server-side routing and controllers, avoiding the complexity of full single-page applications and APIs.

Key Questions Answered

•Hybrid architecture pain points: Mixing server-rendered Blade templates with Vue components creates confusion about template locations, requires switching between build processes, and forces parent wrapper components when siblings need to communicate, eventually consuming entire page sections unnecessarily into Vue.
•Client-side rendering without SPAs: Render every page as a full Vue component by passing component names and JSON-encoded props through data attributes on a root div, letting Vue instantiate on page load while controllers prepare all data server-side, eliminating API requirements.
•Data preparation advantages: Controllers transform database queries into component-ready props before rendering, avoiding multiple HTTP requests that SPAs require. Six database queries on the server execute faster than six Ajax calls from the client, leveraging Laravel's Eloquent ORM directly.
•Authorization through props: Pass permission checks as boolean props from controllers using a can object structure, either globally for page-level actions or nested within individual resources. This approach views all data through the authenticated user's lens, enriching resources with editable metadata.
•Route and layout solutions: Use Ziggy library to expose Laravel named routes to JavaScript, register route as a Vue mixin for template access. Implement layouts as Vue components with default slots, enabling reactive title updates and component communication without server-side template inheritance.

Notable Moment

Reinink realized that using v-cloak to hide entire server-rendered pages until Vue loads eliminates the primary benefit of server-side rendering, making the approach pointless since users cannot see content any faster than pure client-side rendering would provide.

Know someone who'd find this useful?