如何在 Laravel 中使用帶有 JS-SSR 的刀片引擎？

Question

我想使用 Vue & Laravel。 To avoid flash of unstyled content , I want to use SSR in Laravel using the Server side rendering JavaScript in your Laravel application package from spatie.

但是，據我了解，它僅在我將整個 HTML 代碼放入app.vue文件時才有效，並且我的刀片最終只能是這樣的：

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

我不能在app.vue中使用刀片語法。

是否可以使用類似的東西

<html>
    <head>
        <title>My server side rendered app</title>
        <script defer src="{{ mix('app-client.js') }}">
    </head>
    <body>
        <div id="app">
            @include('layouts.nav')
            {{ __('Dear :name', ['name' => 'Adam']) }}
            @lang('Hey, welcome to this page!')
            @yield('content')
            <flash message="Hi"></flash>
       </div>
    </body>
</html>

但仍然允許 Vue 的服務器端渲染？

Answer 1

我知道這是一個老問題。 但我注意到你從來沒有真正得到一個可靠的答案。

我使用 Laravel 刀片和 Vue 單文件組件構建了許多應用程序，其方式似乎與您在此處所做的類似。

根據我的經驗，目前這里有三種方法可以幫助您避免或至少改善它：

隱藏整個#app 標簽內容（使用 display:none 或其他 CSS 屬性），然后在 Vue 完成渲染所有內容后添加 class 以顯示它。
使用 v-cloak 指令添加一些 CSS 直到組件已安裝。
服務器端單獨渲染每個組件和 output 每個單獨放置在 DOM 中的位置。 我從來沒有證明有必要這樣做，但它是最好的整體解決方案，因為您的整個頁面將在所有 JS 加載和執行之前呈現。

希望這可以幫助。

如何在 Laravel 中使用帶有 JS-SSR 的刀片引擎？

問題描述

1 個解決方案

解決方案1
0 2022-07-23 14:38:56

如何在 Laravel 中使用帶有 JS-SSR 的刀片引擎？

問題描述

1 個解決方案

解決方案1 0 2022-07-23 14:38:56

解決方案1
0 2022-07-23 14:38:56