How to avoid re-render component on layout ?

Hi there!

I'm writing a forum-like app with laravel 8 and InertiaJs. I want to display on my layout a side column containing a nested list of all forums.

I use the Laravel Eloquent extension laravel-adjacency-list for managing recursive forums, and get the list in a tree with nested children.

As I use a lot of recursive component to display the list of links, I would like to avoid re-render the list for performance issues when I switch to others pages using the same layout .

I already cached my query, share it in the Inertia Page inside a function in the HandleInertiaRequest ( as said in Inertia docs partial reloads ).

I've put a console.count() in the mounted section of the nestedLink component, and actually it increases on each page, as many times there are forums... with or without using code splitting.

Do you have you any ideas to solve my problem please ?

Sinnbeck

3 years ago

Best Answer

Level 102

If it is part of the layout itself, you can use persistent layouts to ensure it does not fetch the data on each page load (unless full page load). But you might need to load the data needed from the layout, instead of passing it in with inertia. https://inertiajs.com/pages#persistent-layouts

2 likes

pascal78

3 years ago

Level 34

Answering to myself after re-reading the Inertia documentation ...

I had to use persistent layout, actually I was wrapping it in a component , so the good pratice is :


import ForumLayout from "@/Layouts/ForumLayout.vue";

export default {
  layout: ForumLayout,

Well I'm loosing the ability to use named slots inside my layout, but it's a good compromise...

Here is a good discussion about it on Github Inertia Issues

1 like

pascal78

3 years ago

Level 34

@sinnbeck Thank you for your answer !

I manage to use persistent layout :)

I'm passing my forum_tree property through HandleInertiaRequests middleware, accessing it via $page.props and it looks ok

1 like

Please or to participate in this conversation.