How to use SSR with Blade engine?

iwasherefirst2 commented 4 years ago

Thank you for providing this awesome package!

I wonder, how do you server-side render when one is using both, Vue components and Blade engine?

For example, this is how my master file looks:

<html>
    <head>
        <title>My server side rendered app</title>
        <script defer src="{{ mix('app-client.js') }}">
    </head>
    <body>
        <div id="app">
            <navigation>
                <nav-item>@lang('Home')<nav-item>
                <nav-item>@if(Auth::check())@lang('Dashboard')@else @lang('Login') @endif </nav-item>
            <navigation>
            @yield('content')
            <flash message="{{ $message }}"></flash>
       </div>
    </body>
</html>

Since I can't put any Blade syntax into my App.vue nor the $message value from the controller, I can't just use

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

Is using Blade syntax and using values from controller still possible when using SSR?

jcsoriano commented 4 years ago

If your App.vue renders the content for the entire body, then it wouldn't be possible, just like you can't use blade inside vue files.

However, if in your example only the @yield('content') part is rendered in SSR, then you can use blade files like normal outside of the server-side-rendered content.

Applied to your example:

layouts/app.blade.php

<html>
    <head>
        <title>My server side rendered app</title>
        <script defer src="{{ mix('app-client.js') }}">
    </head>
    <body>
        <div id="app">
            <navigation>
                <nav-item>@lang('Home')<nav-item>
                <nav-item>@if(Auth::check())@lang('Dashboard')@else @lang('Login') @endif </nav-item>
            <navigation>
            @yield('content')
            <flash message="{{ $message }}"></flash>
       </div>
    </body>
</html>

Then in your other blade file:

ssr.blade.php

@layout('layouts.app')

@section('content')
    {!! ssr('js/app.vue') !!}
@endsection

Or just put replace @yield('content') with {!! ssr('js/app.vue') !!} in your original example

spatie-bot commented 4 years ago

Dear contributor,

because this issue seems to be inactive for quite some time now, I've automatically closed it. If you feel this issue deserves some attention from my human colleagues feel free to reopen it.

spatie / laravel-server-side-rendering

How to use SSR with Blade engine? #60