신규 프로젝트 준비 - 1. 셋업

해당 글의 주제
Laravel, Inertia를 활용한 React SSR 셋업

목표

• React를 모놀리스 방식으로 사용하여 서버와의 연결시간을 단축시키고 싶습니다.
• 인증관련 구현에 많은 시간을 빼앗기고 싶지 않기때문에 Laravel Breeze의 인증 스캐폴딩을 활용하려 합니다.
• 프론트엔드는 Inertia with React로 구성하여 SSR CSR의 장점을 모두 포함하려 합니다.

준비물

• Docker 또는 PHP와 Comperser (해당 글은 Docker를 활용했습니다.)

본격 셋업

해당 프로젝트는 m1칩을 사용하는 Mac에서 진행하고 있습니다.

1. Laravel 설치하기

라라벨 설치는 매우 쉽습니다. 라라벨 공식 문서를 참고하여 설치합니다.

작년 상반기까지만해도 Docker와 m1칩이 제대로 호환되지 않아 brew를 활용해 PHP를 직접 설치했던 기억이 있는데요. 해당 글을 작성하는 시점엔 Docker의 실리콘칩 버전이 정식으로 출시하였기 때문에 개인적으로는 Docker를 활용하는것이 제일 편한 세팅방법이라고 생각합니다.

2. Laravel Breeze!!

Laravel Breeze 설치시 인증관련 Model, View, Controller를 모두 수정하기 때문에 새프로젝트를 구성한 직후 설치해주는게 좋습니다.

해당 프로젝트에서 라라벨을 사용하려는 이유 중 하나가 Laravel Breeze 입니다.

Laravel Breeze는 회원가입, 로그인, 비밀번호 재설정, 이메일 확인, 비밀번호 확인과 같은 인증에 필요한 기본요소를 모두 갖추고 있는데요.

모델, 컨트롤러 외에도 React,Vue,Livewire,Blade 등 의 템플릿으로 프론트엔드의 스캐폴딩을 구성해주기 때문에 인증관련 구현에 시간을 거의 쓰지 않아도 됩니다.

Laravel Breeze가 제공하는 깔끔한 인터페이스. 😎

3. Inertia

Inertia는 SPA프레임워크를 서버와 함께 모놀리스 방식으로 사용할 수 있게 해주는 라이브러리입니다.

서버의 라우팅 방식을 그대로 사용하기때문에 별도의 API가 필요없으며, 서버와 SPA를 통째로 배포가능합니다.

또한 SSR를 지원합니다! 👍

Inertia 공식 문서를 따라 SSR 설정이 가능합니다.

하지만 !!

아무래도 SSR에 대한 지원을 출시한지 얼마되지 않았기 때문에 현재는 React관련 이슈가 있습니다.

이슈 - SSR 설정시 React가 route를 찾기 못합니다. 🥲

그러나 위 이슈는 매우 간단한 과정을 통해 해결할 수 있으므로, 아래에 해결 방법을 공유합니다.

React SSR 해결방법

route를 수동으로 추가하여 해결하는 방법입니다.

위에서 작성한 SSR을 포함한 셋업 과정을 모두 마치셨다면 app/Http/Middleware 경로에 HandleInertiaRequests.php 파일이 있을텐데요.

해당 파일의 share 함수를 아래와 같이 변경 해주어야합니다.

use Tightenco\Ziggy\Ziggy;

...

public function share(Request $request)
{
    $ziggy = new Ziggy($group = null, $request->url()); 
    return array_merge(parent::share($request), [
        'auth' => [
            'user' => $request->user(),
        ],
        'ziggy' => $ziggy->toArray()
    ]);
}

그 다음 resources/js/ssr.js 파일을 아래와 같이 변경해주세요.

import React from "react";
import ReactDOMServer from "react-dom/server";
import { createInertiaApp } from "@inertiajs/inertia-react";
import createServer from "@inertiajs/server";
import route from "ziggy-js";

createServer((page) =>
    createInertiaApp({
        page,
        render: ReactDOMServer.renderToString,
        resolve: (name) => require(`./Pages/${name}`),
        setup: ({ App, props }) => {
	        // route를 수동으로 추가합니다.
            const Ziggy = {
                ...props.initialPage.props.ziggy,
                location: new URL(props.initialPage.props.ziggy.url),
            };
            global.route = (name, params, absolute, config = Ziggy) =>
                route(name, params, absolute, config);
            return <App {...props} />;
        },
    })
);

mix && mix --mix-config=webpack.ssr.mix.js 명령어로 빌드를 새로해준 다음 node public/js/ssr.js 명령어로 서버를 재시작하면 해당 이슈가 해결이 된 것을 확인 할 수 있습니다.

자바스크립트 사용을 중지해도 렌더링 된 DOM를 볼 수 있습니다. 👍

참고

• Inertia Issues
• Using Ziggy with Inertia Server-Side Rendering