Laravel + Inertia js

Inertia.js is a framework that allows you to build single-page applications using server-side rendering (SSR) and client-side rendering (CSR) together. It combines the best of both worlds by leveraging the benefits of SSR for initial page load and SEO, and CSR for subsequent interactions.

To implement SSR and CSR with Laravel and Inertia.js, you need to follow these steps:

1. Install the necessary dependencies:

   • Laravel: Make sure you have Laravel installed on your system.
   • Inertia.js: Install the Inertia.js package using Composer: composer require inertiajs/inertia-laravel.
   • Inertia.js Vue Adapter: Install the Inertia.js Vue adapter using npm or yarn: npm install @inertiajs/inertia @inertiajs/inertia-vue.

2. Set up your Laravel routes:

   • Define your routes in the routes/web.php file. You can use the Inertia\Inertia facade to return Inertia responses. For example:

     use Inertia\Inertia;
     
     Route::get('/', function () {
         return Inertia::render('Welcome');
     });
     

3. Create your Vue components:

   • Create your Vue components in the resources/js/Pages directory. These components will be used to render your pages.
   • Each component should extend the @inertia directive and define a props property to receive data from the server. For example:

     <template>
         <div>
             <h1>{{ title }}</h1>
             <p>{{ message }}</p>
         </div>
     </template>
     
     <script>
     export default {
         props: {
             title: String,
             message: String,
         },
     };
     </script>
     

4. Render your Inertia pages:

   • In your Laravel routes, use the Inertia::render method to render your Inertia pages. Pass the component name and any data you want to send to the component. For example:

     Route::get('/', function () {
         return Inertia::render('Welcome', [
             'title' => 'Welcome to My App',
             'message' => 'This is an example message.',
         ]);
     });
     

5. Set up your main layout:

   • Create a main layout file in the resources/js/Layouts directory. This layout will be used as the base for all your pages.
   • Use the @inertia directive to render the Inertia pages within the layout. For example:

     <template>
         <div>
             <header>
                 <!-- Your header content -->
             </header>
     
             <main>
                 <inertia-link href="/">Home</inertia-link>
                 <inertia-link href="/about">About</inertia-link>
     
                 <inertia>
                     <!-- Your Inertia page content will be rendered here -->
                 </inertia>
             </main>
     
             <footer>
                 <!-- Your footer content -->
             </footer>
         </div>
     </template>
     

6. Update your Laravel views:

   • Update your Laravel views to use the main layout file. For example, in your welcome.blade.php file:

     @extends('layouts.app')
     
     @section('content')
         <div id="app"></div>
     @endsection
     

7. Compile your assets:

   • Compile your JavaScript and CSS assets using Laravel Mix. Run the following command: npm run dev or yarn dev.

8. Start your Laravel development server:

   • Start your Laravel development server using the php artisan serve command.

With these steps, you should be able to implement SSR and CSR with Laravel and Inertia.js. The server will render the initial page load using SSR, and subsequent interactions will be handled by CSR.