[Vue warn]: Hydration node mismatch

Question

In my project where I use Vue 3, Laravel 10, Vite, and Inertia.js, when I perform SSR (Server-Side Rendering) and get the render on the server-side, I encounter a 'Hydration node mismatch' error because the server-side render and client-side render do not match. The reason for this error is that the mobile and desktop components are not properly determined on the server-side, leading to incorrect rendering. How can I solve this issue?

I can't seem to find a solution other than going through all the components and fixing the issue manually. However, this process requires a significant amount of time and can negatively impact the project's performance, which I'm reluctant to do.

Answer 1

I finally solved the problem. On the Laravel side, I used the Jenssegers\Agent\Agent library to check whether the device is mobile or not. Then, I passed this information as props to the client-side. Based on the received data, I adjusted the components, and the issue was resolved.

controller;

    use Jenssegers\Agent\Agent;
    
    class InertiaTestController extends Controller
    {
        public function dashboard()
        {
            $agent = new Agent();
            $isMobile = $agent->isMobile();
    
            return Inertia::render('Dashboard/Dashboard', [
                  'isMobile' => $isMobile
            ])
        }
    }

Dashboard.vue;

...
<DektopComponent v-if="isMobile"/>
<MobileComponent v-else/>
...

export default{
   isMobile: {
       type: Boolean,
   }
}