Level 80
@sarfaraz1212 Define “slow”.
Jul 16, 2024
17
Level 1
Inertia React app is slow
I am building a basic project which is not at all complex with React and laravel using inertia but my pages where there is something related to query are loading very slow, even the log/signup provided by breeze is a bit slow.
can anyone suggest me how can i make my app faster?
public function index()
{
$query = Task::query();
$sortField = request("sort_field","created_at");
$sortDirection = request("sort_direction","asc");
if(request('name'))
{
$query->where("name","like","%".request("name")."%");
}
if(request('status'))
{
$query->where("status","like","%".request("status")."%");
}
$tasks = $query->orderBy($sortField,$sortDirection)->paginate(10)->onEachSide(1);
return inertia("Task/index",
[
"tasks" => TaskResource::collection($tasks),
"queryParams" => request()->query() ?: null,
]);
}
this is my page it is rendering like 50-60 records.
Level 1
Level 80
@sarfaraz1212 So what have you actually done to try and diagnose the issue…?
Use the browser’s developer console to look at the network requests. Install something like Laravel Debugbar or Laravel Telescope to see if you’re running a lot of database queries on each page load or something.
You can only fix something once you diagnose the problem.
Level 1
@martinbean i have a remote DB maybe this could be one of the reasons?
Level 80
@sarfaraz1212 Quite possibly. So measure database query times to determine whether it is or not.
If you had installed one of the packages I suggested in my last comment, they will show you the execution time for queries.
Level 1
@martinbean it was related to remote DB. On local host it runs fine
Level 80
@sarfaraz1212 OK? Feel free to mark this question as solved in that case.
Level 50
When you're doing a LIKE query with a wildcard at the start, no index can be used. That really kills performance as the entire table has to be scanned.
You should look into using a full text search engine or just adding full text indexes and matching against those.
Your problem might be elsewhere, but this is a clear performance issue.
Level 1
@JussiMannisto ok let me test it.
Level 73
@sarfaraz1212 You could clean that up a little by using when instead of if
return view('books.index')
->with([
'books' => BookIndexView::query()
->when($request['authors'], function ($query, $authors) {
$query->whereIn('author_id',
$this->numericStringToArray($authors));
})
->when($request['published'], function ($query, $published) {
$query->where('published_year', $published);
})
->when($request['genre'], function ($query, $genre) {
$query->where('genre', $genre);
})
->when($request['format'], function ($query, $format) {
$query->where('format', $format);
})
->when($request['search'], function ($query, $search) {
$query->where('title', 'LIKE', "$search%")
->orWhere('author_name', 'LIKE', "$search%")
->orWhere('series', 'LIKE', "$search%");
})
->orderBy('author_name')
->orderBy('series')
->orderBy('part')
->orderBy('published_year')
->get(),
]);
```
Level 1
public function index()
{
$query = Task::with(['project', 'assignedUser', 'createdBy', 'updatedBy']);
$sortField = request("sort_field", "created_at");
$sortDirection = request("sort_direction", "asc");
if ($name = request('name')) {
$query->where('name', 'LIKE', $name . '%');
}
if ($status = request('status')) {
$query->where('status', 'LIKE', $status . '%');
}
$tasks = $query->orderBy($sortField, $sortDirection)
->paginate(10)
->onEachSide(1);
return inertia("Task/index", [
"tasks" => TaskResource::collection($tasks),
"queryParams" => request()->query() ?: null,
]);
}
this helped me to speed up the query. Previosuly the execution time was above 3 seconds , now it is 1 or below 1
Level 73
@sarfaraz1212 Do you have any indexes on name, status and created_at?
Level 1
$table->string('name')->index();
$table->enum('status', ['pending', 'in_progress', 'completed'])->index();
$table->unsignedBigInteger('created_by')->index();
Level 73
@sarfaraz1212 Show me the execution plan for your query.
Level 1
i was using remote DB that's why it was slow. Thankyou for the help it made my syntax and query better
Level 51
Are you using WSL on Windows? That is slow.
Level 1
One of the most common causes of slow pages is inefficient database queries. Check your queries for the following:
N+1 Query Problem: Ensure you're not running extra queries in loops (for example, loading related models without eager loading). Use Laravel's with() method for eager loading relationships.
php // Eager load relationships User::with('profile', 'posts')->get();
Database Indexing: Ensure that the columns you're filtering or sorting by are indexed. This can significantly speed up query execution.
Query Optimization: Use EXPLAIN in MySQL to analyze slow queries and optimize them. Avoid selecting unnecessary columns.
php // Avoid unnecessary columns User::select('id', 'name', 'email')->get();
Please or to participate in this conversation.