Enabling SSR on an existing React + Laravel App

The Environment

PHP 7.3NodeJS 14.15.1React 17.0.1

Installation + Setup

composer require spatie/laravel-server-side-rendering
NODE_PATH=/absolute/path/to/node/runtime
NODE_PATH="C:\\\"Program Files\"\\nodejs\\node.exe"
require('./bootstrap');// other imports...
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(<App />, document.getElementById('root'));
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root')
)
const App = () => // ... React elementexport default withRouter(App);
import App from './router';
import React from 'react';
import ReactDOMServer from 'react-dom/server';
// render to html & dispatch
const html = ReactDOMServer.renderToString(
<StaticRouter location={context.url}>
<App />
</StaticRouter>
);

dispatch(html);
<script defer src="{{ mix('js/app-client.js') }}"></script>
{!! ssr('js/app-server.js')                                                                                                                                                           ->fallback('<div id="root"></div>')                                         ->render() !!}                                                                   
mix.js('resources/js/app-client.js', 'public/js').react()
.js('resources/js/app-server.js', 'public/js').react()
Route::pattern('any', '.*');Route::redirect('/', '/app'); // Not required, but will redirect base requests to app/.Route::view('app/{any?}', 'index');

Refractoring

const page = React.lazy(() => import('./pages/page')); // OLD
import page from './pages/page'; // NEW
export function isBrowserContext(){
return typeof window === 'undefined'
}
// example
if(isBrowserContext()){
localStorage.setItem('foo', 'bar');
}

No-bullshit guides on how to do things. go hop!

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Props vs State

Axios: Powerful library

Easily Create a Form and a Dynamic Table in Vue.js

[Action required] Your RSS.app Trial has Expired — Mon Feb 14 2022

CodePush Update Strategies for a React Native App

Using Elm in React — from the ground up

Using Web-Sockets to update images

A full pass in JS promise(part 2)

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Jake Lee

Jake Lee

No-bullshit guides on how to do things. go hop!

More from Medium

Install Redis for Laravel Valet with PHP 8.1

How to install Laravel PHP Framework on macOS?

Build a Basic CRUD App with Laravel 8 and React.js

Creating An App Using Laravel WebSockets and NextJs (PART 1)