🔧 Inertiajs Server-side Rendering (SSR) For React (Vite Setup)

🕛 Zeit seit Veröffentlichung: 55 Tage, 6 Stunden 21 Minuten
📆 Veröffentlicht am: 14.10.2024 um 20:04 Uhr
Nachrichtenbereich: 🔧 Programmierung
🔗 Quelle: dev.to

Before starting, ensure you're using the latest version of Inertia.js. If not, you can upgrade by following the Upgrade Guide.

Step 1: Install Required Packages

For React:

• You don't need to install any specific package for SSR in React.

For Laravel:

• You need to install the SSR package for Laravel:

composer require inertiajs/inertia-laravel

Step 2: Create an SSR File

Create an ssr.jsx or ssr.js file inside the resources/js/ directory. The full path should look like this: resources/js/ssr.js. You can use the following command to create the file:
touch resources/js/ssr.js

• After creating the file, you need to define the resolve and setup functions for your ssr.jsx or ssr.js.

• For the exmple this shown you can check here:

Step 3: Update vite.config.js

• Now, update your vite.config.js file by adding the SSR property. In the laravel function (after the input function), add the following line ssr: 'resources/js/ssr.js'

Step 4: Update package.json

• Next, modify your package.json file to include both a normal build and an SSR build. Replace the existing build script with: "build": "vite build && vite build - ssr"

• Now, run the following build command in your terminal:
  npm run build

• After the build completes, start the SSR service with the following Artisan command:
  php artisan inertia:start-ssr

Step 5: Update app.jsx

• In your app.jsx, replace createRoot with hydrateRoot to enable SSR.

Note: Potential Issues with SSR

• After completing all the steps, you may encounter errors with some React components. This is because certain npm libraries do not support SSR. For example, I faced issues with the lightgallery npm package as it didn't fully support SSR. In such cases, you can conditionally import libraries that don't work with SSR.

• With these steps, you should have a fully functional SSR setup for Inertia.js with React using Vite as your bundler.

...