Certainly! This is a common issue when setting up SSR with Inertia.js (React), Laravel, and Vite. When you build for SSR, you need to ensure that your CSS is properly linked in your server-rendered HTML. Here’s a checklist and solution:
1. Ensure CSS is Imported in Your Entry File
Make sure your main React entry file (e.g., app.jsx or app.tsx) imports your CSS:
import './app.css'; // or your main CSS file
2. Use @vite Blade Directive
In your resources/views/app.blade.php (or wherever you render your Inertia root), ensure you have:
@vite('resources/js/app.jsx')
This will inject the correct CSS and JS assets in production.
3. Vite SSR Manifest
Vite generates a manifest.json during build. Laravel Vite plugin uses this to inject the correct assets. Make sure you are using the latest laravel-vite-plugin.
4. Correct Build Commands
Make sure you run both client and SSR builds:
npm run build
npm run build:ssr
5. Check SSR Server Entry
Your SSR entry (e.g., ssr.jsx) should not import CSS directly. CSS should only be imported in the client entry (e.g., app.jsx), as SSR does not process CSS.
6. Clear Caches
Sometimes, cached views or assets can cause issues. Run:
php artisan view:clear
php artisan config:clear
php artisan cache:clear
7. Example app.blade.php
Here’s a minimal example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My App</title>
@vite('resources/js/app.jsx')
@inertiaHead
</head>
<body>
@inertia
</body>
</html>
8. Production Asset Serving
Ensure your public/build directory is present and contains your built assets after running npm run build.
Summary:
- Import CSS in your client entry file.
- Use
@vitein your Blade template. - Run both build commands.
- Do not import CSS in SSR entry.
- Clear Laravel caches.
If you follow these steps and still have issues, check your browser’s network tab to see if the CSS file is being loaded or if there are 404 errors. If so, double-check your Vite and Laravel configuration.
Let me know if you need more specific help!