Popular posts

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 Index

All 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.