SSR을 지원하는 Laravel Jetstream VueJS 3 및 InertiaJS 작업
이 기사에서는 SSR을 지원하는 Laravel의 JetStream InertiaJS 스택을 시작하는 데 도움을 줄 것입니다. JetStream은 다음 Laravel 프로젝트에 안전한 인증 시스템을 제공하고 VueJS3가 포함된 InertiaJS는 현대적이고 우아한 맛을 제공합니다. Laravel에 어느 정도 익숙하다고 가정하겠습니다. 그렇지 않아도 괜찮습니다. 따라하기만 하면 이 튜토리얼이 도움이 될 것이라고 확신합니다.
목차
What is JetStream
What is InertiaJS
Why should I use Inertia with SSR support
1- Install new Laravel App
2- Install JetStream with SSR support
3- Start your Laravel server
4- Laravel & Inertia Routing
5- InertiaJS Forms
JetStream 및 InertiaJS에 대한 간단한 배경 지식을 제공하는 것으로 시작하겠습니다.
제트스트림이란:
Jetstream provides the implementation for your application's login, registration, email verification, two-factor authentication, session management, API via Laravel Sanctum, and optional team management features. Jetstream is designed using Tailwind CSS and offers your choice of Livewire or Inertia scaffolding. Source
Laravel Breeze 인증 시스템의 보다 완전한 버전입니다. JetStream을 사용하면 앱을 위한 보안 인증 메커니즘을 생성하는 데 시간을 낭비하지 않고 다음 애플리케이션을 시작할 수 있습니다.
InertiaJS란 무엇입니까?
Inertia allows you to create fully client-side rendered, single-page apps, without much of the complexity that comes with modern SPAs. It does this by leveraging existing server-side frameworks. DOCS
InertiaJS는 Laravel 및 VueJS와 나란히 작동합니다. 무엇이든 도와주려고 항상 노력하는 다정한 이웃이라고 생각하시면 됩니다. 관성은 Vue 라우터 대신 Laravel 라우터를 사용할 수도 있습니다.
SSR 지원과 함께 Inertia를 사용해야 하는 이유:
Server-side rendering allows you to pre-render an initial page visit on the server, and to send the rendered HTML to the browser. This allows visitors to see and interact with your pages before they have fully loaded, and also provides other benefits such as decreasing the time it takes for search engines to index your site. DOCS
단일 페이지 앱은 검색 엔진을 혼란스럽게 하는 것으로 알려져 있기 때문에 VueJS를 사용할 때 검색 엔진 최적화(SEO)가 어려울 수 있습니다. 이 문제에 사용할 수 있는 다른 솔루션이 있지만 InertiaJS는 SSR(Server Side Rendering) 기능을 추가하여 구출했습니다.
시작할 시간입니다 🚀
1- 새 Laravel 앱 설치:
You're free to choose the best installation method 이 튜토리얼에 Laravel Installer를 사용하겠습니다.laravel new {project name}
{프로젝트 이름}을 프로젝트에 지정하려는 이름으로 바꾸는 것을 잊지 마십시오.
2- SSR 지원으로 JetStream 설치:
When you install JetStream and Vue Inertia stack, it will install InertiaJS with VueJS 3 and TailwindCSS by default. The installation will configure everything for you, you really won't have to do a thing.
- Start with JetStream composer package
composer require laravel/jetstream
- Install InertiaJS stack with SSR support
php artisan jetstream:install inertia --ssr
3- Laravel 서버를 시작하십시오.
Since Laravel recently runs on Vite, we need to run 2 terminal commands.
npm run dev
And in another terminal window we need to run the below:
php artisan serve
And Voilà! You have a Laravel project with a fully secured authentication system, InertiaJS components styled with TailwindCSS and all of that ready to be customized to fit your project.
4- Laravel 및 관성 라우팅:
Let's create a Product model and allow our users to create a new product and get redirected to the newly created product page.
- Create a new database and connect to use using your
.envfile in the main project directory. In my case I created a new mySQL database called tutorial and made the below changes in.envfile.
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=tutorial
DB_USERNAME=root
DB_PASSWORD=
- Open up your terminal and hit the below command to create a Product model with migration:
php artisan make:model Product -mc
- Head to your products table in
database/migrationand make the below changes to add user_id, name and slug for each product.
public function up()
{
Schema::create('products', function (Blueprint $table) {
$table->id();
$table->foreignId('user_id');
$table->string('name');
$table->string('slug');
$table->timestamps();
});
}
app/models/Product file and make those columns fillable and write the product relation to users. Since every product will belong to a user, then we're going to use belongsTo relationship .<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Product extends Model
{
use HasFactory;
protected $fillable = [
'user_id',
'name',
'slug',
];
public function user()
{
return $this->belongsTo(User::class);
}
}
public function products()
{
return $this->hadMany(Product::class);
}
php artisan migrate:fresh
routes/web.php를 놀이터로 사용합니다. 먼저 제품을 보여주기 위해 경로를 작업해 보겠습니다.
//Route to show the product
Route::get('{slug}', function () {
return Inertia::render('ProductShow')>name('products.show');
});
더 이상
return view()를 사용하지 않는다는 점에 유의하세요. return Inertia::render를 사용하면 InertiaJS 구성 요소를 렌더링할 수 있습니다.이제 요청을 게시하기 위한 다른 경로가 필요합니다.
use App\Models\Product;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;
use Inertia\Inertia;
//Route to submit a new product and redirect to show it
Route::post('products/create', function (Request $request) {
$validated = $request->validate([
'name' => 'required',
'slug' => 'required',
]);
$user_id = $validated['user_id'] = auth()->user()->id;
$product_slug = $validated['slug'];
Product::create($validated);
return redirect()->route('products.show', [$user_id, $product_slug]);
})->name('products.create');
5- InertiaJS 양식:
Notice that we already have welcome route set by default in web.php , we will use this welcome page to add to it our form.
resources/js/Pages/Welcome.vue and replace it with the below code. We will use Inertia's useForm helper .<script setup>
import { Head, Link } from "@inertiajs/inertia-vue3";
import { useForm } from "@inertiajs/inertia-vue3";
defineProps({
canLogin: Boolean,
canRegister: Boolean,
});
const form = useForm("createProduct", {
name: null,
slug: null,
});
const submit = () => {
form.post(route("products.create"), {
onSuccess: () => form.reset(),
});
};
</script>
<template>
<Head title="Welcome" />
<div
class="relative flex items-top justify-center min-h-screen bg-gray-100 dark:bg-gray-900 sm:items-center sm:pt-0"
>
<div
v-if="canLogin"
class="hidden fixed top-0 right-0 px-6 py-4 sm:block"
>
<Link
v-if="$page.props.user"
:href="route('dashboard')"
class="text-sm text-gray-700 underline"
>
Dashboard
</Link>
<template v-else>
<Link
:href="route('login')"
class="text-sm text-gray-700 underline"
>
Log in
</Link>
<Link
v-if="canRegister"
:href="route('register')"
class="ml-4 text-sm text-gray-700 underline"
>
Register
</Link>
</template>
</div>
<div class="max-w-6xl mx-auto sm:px-6 lg:px-8">
<form @submit.prevent="submit">
<input type="text" id="name" name="name" v-model="form.name" />
<input type="text" id="slug" name="slug" v-model="form.slug" />
<button type="submit">Submit</button>
</form>
</div>
</div>
</template>
위의 코드를 보고 Inertia의 useForm 도우미와의 양식 통합에 대한 구문이 얼마나 간단한지 확인하십시오. 양식이라는 상수를 만들고
useForm와 같게 만든 다음 양식에 이름을 지정하고 데이터를 정의합니다. 그런 다음 제출을 위해 const를 만들고 Laravel 경로 이름을 지정하면 됩니다.Product.vue로 지정한 후 아래 코드를 붙여넣습니다.<script setup>
import { Head } from "@inertiajs/inertia-vue3";
</script>
<template>
<Head title="Product" />
<div
class="relative flex items-top justify-center min-h-screen bg-gray-100 dark:bg-gray-900 sm:items-center sm:pt-0"
>
<h1 class="text-6xl font-bold text-black">Hi, I'm product</h1>
</div>
</template>
이제 프로젝트를 테스트할 준비가 되었습니다 😎
새 사용자를 등록하고 홈페이지로 이동하여 양식을 작성하고 제출을 클릭하십시오. 페이지 새로고침이나 지연 없이 마술처럼 product.show 경로로 리디렉션되는 자신을 발견하게 될 것입니다.
이 빠른 자습서가 도움이 되었기를 바랍니다. 현재 바쁜 일정에도 불구하고 커뮤니티에 보답하기 위해 최선을 다하고 있습니다. 댓글 섹션에 질문이 있으면 게시해 주세요. 가능한 한 빨리 연락드리겠습니다 👋
Reference
이 문제에 관하여(SSR을 지원하는 Laravel Jetstream VueJS 3 및 InertiaJS 작업), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/moose_said/working-with-laravel-jetstream-vuejs-3-inertiajs-with-ssr-support-1ehh텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
