108: Jonathan Reinink - Client-Side Rendering, Server-Side Routing
Episode
69 min
Read time
2 min
Topics
Design & UX, Software Development, Science & Discovery
AI-Generated Summary
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.
Episode Transcript
In this episode of Fullstack Radio I talked to Jonathan Renick about building your entire front end with Vue JS without abandoning server side routing or data fetching. This is Fullstack Radio episode one zero eight. Hey, everyone. Welcome to another episode of the Fullstack Radio podcast. I'm your host, Adam Wavin. And today, I am talking to recurring guest. I think the most recurring guest of all time, my buddy, Jonathan Renick. How is it going, Jonathan? It's going good, man. Great to be back on yet again. I like that I'm in spot number one. I I don't know if that means anything, but I I feel like that's a win somehow. So the reason that I wanted to have you on the show to chat again today is that I'm in private. We've sort of been having some conversations about, kind of the way that we develop, you know, Laravel applications especially in this era where kind of user interfaces are getting more and more complex. And I know we both talked in the past about like, you know, maybe we should start building SPAs and stuff like that. But I think in general, both of us are still pretty kind of we we still kind of are comfortable in our ways. You know what I mean? And just trying to figure out ways to to build better apps without sort of throwing the baby out with the bathwater. And, you've talked to me about an approach that you've been sort of experimenting with lately that's been working out well for you that you wrote a blog post about yesterday and I think it'd be really cool to sort of talk about that. So I think maybe the best place to start is just talking a bit about, like, how we've built applications, traditionally and what your approach has been up until now when you've needed to add some sort of, like, complex interactivity to, like, an otherwise vanilla traditional Laravel app where you're doing server side running, regular controllers, you know, blade for your templates that sort of thing. So how have you been handling that, up until now? Yeah. For sure. So I've been building pretty classic server side rendered apps to this point. I haven't made the big switch to building single page apps although I have you know, with work, I've built some of them but primarily on my own projects, I still prefer that classic MVC server side approach to web development. Where everything's like a full page refresh and just kinda your custom rails style application. Bingo. Exactly. So and but obviously, there's been a lot of change in the client side space with the introduction of like Angular and Vue and React and all these really, really powerful JavaScript libraries that make reactive content and all this stuff really possible taking sort of what was started with jQuery to a whole new level. But I would say that I'm still …
Get the full transcript (12,882 words) + summary by email — free
One-time email with the complete transcript and AI summary of this episode. No account needed.
One email, no spam. We’ll also show you what SignalCast does.
You just read a 3-minute summary of a 66-minute episode.
Get Full Stack Radio summarized like this every Monday — plus up to 2 more podcasts, free.
Pick Your Podcasts — FreeKeep Reading
More from Full Stack Radio
153: DHH – Omarchy and Designing Your Own OS on Arch Linux
Aug 21 · 76 min
This Week in Startups
The Drone Company Quietly Taking Over Delivery
May 27
More from Full Stack Radio
152: Ben Orenstein - How to Stand Out When Applying for a Job at a Small Company
Jan 28 · 47 min
Capital Allocators
[REPLAY] Jonathan Lewinsohn – Diameter Capital Partners (Manager Meetings, EP.05)
Feb 2
Books, tools, and gear mentioned in this episode
SignalCast may earn commission on purchases via these links.
Tools
- ZiggyRecommended
“Use Ziggy library to expose Laravel named routes to JavaScript, register route as a Vue mixin for template access.”
More from Full Stack Radio
We summarize every new episode. Want them in your inbox?
153: DHH – Omarchy and Designing Your Own OS on Arch Linux
152: Ben Orenstein - How to Stand Out When Applying for a Job at a Small Company
151: DHH – Building HEY with Hotwire
150: Secret Screencasting Tips & Behind the Scenes of Tailwind CSS 2.0
149: Choosing a Payment Processor, Radical Icons & W3C Hype
Similar Episodes
Related episodes from other podcasts
This Week in Startups
May 27
The Drone Company Quietly Taking Over Delivery
Capital Allocators
Feb 2
[REPLAY] Jonathan Lewinsohn – Diameter Capital Partners (Manager Meetings, EP.05)
The Bootstrapped Founder
Jun 11
394: Taylor Otwell — The (Quite Entrepreneurial) Creator of Laravel
Odd Lots
Aug 10
NYT CEO Meredith Kopit Levien on Running a Media Brand in the Age of AI
a16z Podcast
Jul 2
Outsmarting Uber: Why Bolt Wins in Europe
Explore Related Topics
This podcast is featured in Best Cybersecurity Podcasts (2026) — ranked and reviewed with AI summaries.
Read this week's Software Engineering Podcast Insights — cross-podcast analysis updated weekly.
You're clearly into Full Stack Radio.
Every Monday, we deliver AI summaries of the latest episodes from Full Stack Radio and 192+ other podcasts. Free for one show.
Start My Monday DigestNo credit card · Unsubscribe anytime