README

在 Laravel 中让服务器端渲染变得更容易。

<html>
    <head>
        <title>My server side rendered app</title>
        <script defer src="{{ mix('app-client.js') }}">
    </head>
    <body>
        {!! ssr('js/app-server.js') !!}
    </body>
</html>

此包是 spatie/server-side-rendering 库的 Laravel 桥接器。在开始之前，查看说明文档了解底层概念和注意事项。此说明文档还假设您已经对构建服务器端渲染 JavaScript 应用有一些了解。

Vue 和 React 示例应用可在 spatie/laravel-server-side-rendering-examples 查看。

安装

您可以通过 composer 安装此包

composer require spatie/laravel-server-side-rendering

服务提供者和 Ssr 别名将自动注册。

如果您想调整一些设置，可以可选地发布配置文件。

php artisan vendor:publish --provider="Spatie\Ssr\SsrServiceProvider" --tag="config"

使用

先决条件

首先，您需要选择一个引擎来执行您的脚本。服务器端渲染库附带 V8 和 Node 引擎。默认情况下，该包配置为使用 Node，因为您可能已经在其系统上安装了它。

在您的 .env 文件中设置 NODE_PATH 环境变量以开始

NODE_PATH=/path/to/my/node

您还需要确保存在 storage/app/ssr 文件夹，或更改 ssr.node.temp_path 配置值。

如果您想使用 V8 引擎，可以跳过前面的两个步骤。但是，您需要安装 v8js 扩展。

配置

除此之外，无需其他配置。如果您仍需调整设置，请参阅 config 文件，该文件有很好的文档。

设置您的脚本

您需要构建两个脚本：服务器脚本和客户端脚本。有关如何构建这些脚本，请参考您选择的前端框架的文档。

mix.js('resources/assets/js/app-client.js', 'public/js')
   .js('resources/assets/js/app-server.js', 'public/js');

服务器脚本应传递给 ssr 函数，客户端脚本应手动加载。该包假定您正在使用 Laravel Mix，并将为您解析路径。您可以在配置文件中将 mix 设置为 false 以取消此行为。

{!! ssr('js/app-server.js) !!}
<script src="{{ mix('js/app-client.js') }}">

您的服务器脚本应调用一个 dispatch 函数，将渲染的 HTML 返回到视图。以下是一组用于服务器端渲染应用的 Vue 脚本的快速示例。有关如何将所有内容结合在一起的完整解释，请参阅 spatie/server-side-rendering 的说明文档。

// resources/assets/js/app.js

import Vue from 'vue';
import App from './components/App';

export default new Vue({
    render: h => h(App),
});

// resources/assets/js/app-client.js

import app from './app';

app.$mount('#app');

// resources/assets/js/app-server.js

import app from './app';
import renderVueComponentToString from 'vue-server-renderer/basic';

renderVueComponentToString(app, (err, html) => {
    if (err) {
        throw new Error(err);
    }

    dispatch(html);
});

在视图中渲染应用

该包提供了一个 ssr 辅助函数来渲染您的应用。

<html>
    <head>
        <title>My server side rendered app</title>
        <script defer src="{{ mix('app-client.js') }}">
    </head>
    <body>
        {!! ssr('js/app-server.js')->render() !!}
    </body>
</html>

也提供了一个门面。

<html>
    <head>
        <title>My server side rendered app</title>
        <script defer src="{{ mix('app-client.js') }}">
    </head>
    <body>
        {!! Ssr::entry('js/app-server.js')->render() !!}
    </body>
</html>

渲染选项可以在函数或门面调用之后链式调用。

<html>
    <head>
        <title>My server side rendered app</title>
        <script defer src="{{ mix('app-client.js') }}">
    </head>
    <body>
        {!! ssr('js/app-server.js')->context('user', $user)->render() !!}
    </body>
</html>

有关可用选项的文档，请参阅 spatie/server-side-rendering。

测试

composer test

更新日志

请参阅 CHANGELOG 了解最近发生了什么变化。

贡献

有关详细信息，请参阅 CONTRIBUTING。

安全

如果您发现任何安全相关的问题，请通过电子邮件 freek@spatie.be 而不是使用问题跟踪器。

明信片软件

您可以使用这个包，但如果它进入了您的生产环境，我们非常感谢您从您的家乡给我们寄一张明信片，注明您正在使用我们哪个包。

我们的地址是：Spatie，Samberstraat 69D，2060 安特卫普，比利时。

我们将所有收到的明信片发布在我们的公司网站上。

致谢

支持我们

Spatie是一家位于比利时安特卫普的网页设计公司。您可以在我们的网站上找到所有开源项目的概述链接。

您的业务是否依赖于我们的贡献？请与我们联系，并在Patreon上支持我们。所有的承诺都将用于分配人力资源以维护和新酷的功能。

许可证

MIT许可证（MIT）。有关更多信息，请参阅许可证文件。

guansunyata / laravel-server-side-rendering

维护者

详细信息