DEV Community
·
Inertia.js 在 React 中的服务器端渲染 (Vite 设置)
💡
原文英文，约300词，阅读约需2分钟。
📝
内容提要
确保使用最新版本的Inertia.js。首先，安装必要包：React无需额外安装，Laravel需安装SSR包。在resources/js/目录下创建ssr.js文件，定义resolve和setup函数。更新vite.config.js，添加SSR属性，并修改package.json支持SSR构建。运行构建命令后，用Artisan启动SSR服务。在app.jsx中，将createRoot替换为hydrateRoot启用SSR。注意某些React组件可能不支持SSR，需条件导入。完成这些步骤后，即可实现Inertia.js的SSR设置。
🎯
关键要点
- 确保使用最新版本的Inertia.js。
- 为Laravel安装SSR包：composer require inertiajs/inertia-laravel。
- 在resources/js/目录下创建ssr.js文件，定义resolve和setup函数。
- 更新vite.config.js，添加SSR属性：ssr: 'resources/js/ssr.js'。
- 修改package.json以支持正常构建和SSR构建。
- 运行构建命令：npm run build，并用Artisan启动SSR服务：php artisan inertia:start-ssr。
- 在app.jsx中，将createRoot替换为hydrateRoot以启用SSR。
- 注意某些React组件可能不支持SSR，需条件导入不支持的库。
❓
延伸问答
如何确保使用最新版本的Inertia.js？
可以通过查看升级指南来升级到最新版本的Inertia.js。
在Laravel中如何安装SSR包？
在Laravel中，可以通过命令composer require inertiajs/inertia-laravel来安装SSR包。
如何创建ssr.js文件？
在resources/js/目录下创建ssr.js文件，使用命令touch resources/js/ssr.js。
如何更新vite.config.js以支持SSR？
在vite.config.js中添加SSR属性，具体为ssr: 'resources/js/ssr.js'。
如何启动SSR服务？
运行命令php artisan inertia:start-ssr来启动SSR服务。
在app.jsx中如何启用SSR？
在app.jsx中，将createRoot替换为hydrateRoot以启用SSR。
🏷️
标签
➡️
