Hello.
We are building a new commercial app and after some research we chose laravel and react. As vue is backed by laravel so its easier to start with the any one approach like server side rendering, SPA's and stuff.
But with react server side rendering is a challenge, could be achieved by adding a few other packages and i am guessing it will make this process ugly. We need elegant, simple and easy to understand flow.
Another approach is SPA and having laravel as a backend API which i dont feel good about. It has its pros and cons but it doesn't seem a fair deal.
I need some direction please. Server side rendering? SPA? or give up on react and go with vue.
Thanks!
Yiu Pang Yuen
I recently encountered this issue myself. I had a Laravel website that I wanted to build fully in React, leveraging Laravel as the server-side instead of using something like Express + NodeJS. The issue you encounter is that PHP doesn't run Javascript, so it can't run React server-side. You have to install v8js for PHP and set that up, and get React to run through that.
It's a pain, it's not easy at all, and it's nothing I wanted to get tangled with.
The solution? Using Laravel strictly as an API, and leveraging the NextJS framework as a frontend.
It makes SSR dead simple with it's
static async getInitialProps()lifecycle they add to components that allows you to SSR any data or functionality you need:import Layout from '../components/MyLayout.js' import Link from 'next/link' import fetch from 'isomorphic-unfetch' const Index = (props) => ( <Layout> <h1>Batman TV Shows</h1> <ul> {props.shows.map(({show}) => ( <li key={show.id}> <Link as={`/p/${show.id}`} href={`/post?id=${show.id}`}> <a>{show.name}</a> </Link> </li> ))} </ul> </Layout> ) Index.getInitialProps = async function() { const res = await fetch('api.tvmaze.com/search/shows') const data = await res.json() console.log(`Show data fetched. Count: ${data.length}`) return { shows: data } } export default IndexAll the data is pulled server-side before the user loads the page elements, and React can just use it as props.
NextJS gives you fantastic stuff out of the box like it's webpack configs for stuff like code splitting, prefetching pages, and a static export for CDN distribution if your site is simple enough. All stuff that is difficult to setup from scratch. Even more complex features like dynamic routing (/blog/:id/) become simple when you combine NextJS and Express.
Everything's pretty well documented (their site has a whole walkthrough), and anything else you can usually in the Github issues. And there are plenty of videos online to help you get into the framework.
I've been using it for a few weeks now and I've been really digging it. I'm currently writing a tutorial series using Laravel as an API, and NextJS as the frontend. You can see my journey figuring out stuff like using Laravel's Passport for OAuth 2 authentication through NextJS to create protected pages and whatnot.