Skip to main content
Full Stack Radio

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

69 min episode · 2 min read
·

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.

Know someone who'd find this useful?

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.

Browse all Full Stack Radio transcripts →

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 — Free

Keep Reading

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.
  • by Cloudinary

    SPONSORS: Cloudinary
  • by Rollbar

    SPONSORS: Rollbar

More from Full Stack Radio

We summarize every new episode. Want them in your inbox?

Similar Episodes

Related episodes from other podcasts

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 Digest

No credit card · Unsubscribe anytime