Rails 非同期処理導入で発生するrenderの嵐

Question

前提

ここに質問の内容を詳しく書いてください。
（例）現在,Railsで転職用ポートフォリを作成中です。
現在、投稿機能、投稿に対するコメント機能、投稿に対するいいね機能などを実装しました。

投稿に対するいいね機能を非同期(Ajax)で実装しています。

いいねボタンを押した時にいいね解除ボタンを表示させるため、パーシャル(_like.html.haml)を作成しています。

いいねボタンを押したときにcreate.js.hamlにて、id: "post-#{post.id}-likes"のhtmlに_like.html.hamlをレンダリングする仕様です。

問題点

実際のいいね、いいね解除は問題なく動作するのですが、投稿一覧ページ(いいねボタンが大量に存在する) にて、
_like.html.haml が繰り返しによって各投稿ごとにrenderされてしまうため、ページ読み込みに時間がかかってしまいます。

※大まかな構造を説明するため、不要な部分を除いています。

**投稿一覧ページ**

- @post.each do |post|
  = post.content
  %div{ id: "post-#{post.id}-likes" }
    = render 'like', post: post

**_like.html.haml**

- if user_signed_in?
  - if post.already_liked?(current_user)
    = link_to post_like_path(post, post.likes), method: :delete, remote: true do
      %font
        .fas.fa-heart.likes-heart-already{ id: 'delete-like-link' }
  - else
    = link_to post_likes_path(post), method: :post, remote: true do
      %font
        .far.fa-heart.likes-heart-yet{ id: 'create-like-link' }

**create.js.haml**

$("#post-#{@post.id}-likes").html("#{j(render('likes/like', post: @post))}");

**likes_controller.rb** 

class LikesController < ApplicationController
  before_action :authenticate_user!

  def create
    @post = Post.find(params[:post_id])
    @like = current_user.likes.build(post_id: @post.id)
    @like.save
    respond_to do |format|
      format.js
    end
  end

  def destroy
    @post = Post.find(params[:post_id])
    Like.find_by(post_id: @post.id, user_id: current_user.id).destroy
    respond_to do |format|
      format.js
    end
  end
end

** posts_controller.rb ** #追加しました‼︎ 6/29
class PostsController < ApplicationController

  def index
    @posts = current_user.feed.eager_load(:user, :likes).page(params[:page]) #feedメソッドはUserモデルに定義
    @post = Post.new
    @like = Like.new
  end

end

** user.rb **             #追加しました‼︎ 6/29
class User < ApplicationRecord

  def feed
    following_ids = "SELECT following_id FROM relationships
                     WHERE follower_id = :user_id"
    Post.where("posts.user_id IN (#{following_ids})
                     OR posts.user_id = :user_id", user_id: id)
  end

end

考えている解決策

通常の投稿一覧ページへのアクセスではrenderを使用しない方法を考えているのですが、いいね機能の非同期処理を実装するにあたって_likeパーシャル作成は避けられないため、コードが重複してしまうので、悩んでいます。

初めての質問のため、説明不足、失礼な部分があるかもしれません。
何か良い方法がありましたらご教授お願いいたします。

補足情報（バージョンなど）

rails', '~> 5.2.1'
ruby '2.6.6'
docker環境

Comments

[winterboum]

controllerを載せて

[NaoyaAbe]

見ていただきありがとうございます！
今likesコントローラを載せさせていただきました！

[winterboum]

繰り返し要素が見当たりませんね、、、
すみません力不足です

[NaoyaAbe]

コードを見ていただき、ありがとうございました！

[asm]

投稿一覧側のコントローラはどうなっていますか？

[NaoyaAbe]

お返事が遅くなり申し訳ありません！
コードを見ていただき、ありがとうございます！

ただいま、投稿一覧のコントローラと、そのコントローラで使用しているfeedメソッドの定義部分を載せました。

私自身の考えでは、コントローラでのデータ取得方法などが原因ではないと考えています。

「ajaxで非同期処理を行うためにパーシャル化したはいいが、ページへの同期アクセスにてパーシャルのrenderが大量発生してしまう。」

ということの解決策でなにか思い当たることはありますでしょうか。
よろしく願いいたします。

イメージ的には、eachメソッドでrenderが大量に発生することを防止するcollectionのオプションみたいな方法(大量の繰り返しでもパーシャルを一度しかrenderしない)がありそうで、見つからず、苦戦しています。

Answer 1

_like.html.hamlと同フォルダに

  = post.content
  %div{ id: "post-#{post.id}-likes" }
    = yield

を_post_layout.html.hamlとして保存し

= render partial: 'like', layout: 'post_layout', collection: @posts, as: :post

とすることは可能かと思いますが奇妙な構成になるのが気掛かりです。

---

config.action_view.logger = nilにてログを抑制すると改善しそうな気もします

Comments

[NaoyaAbe]

回答していただき、ありがとうございます！
実装までに時間がかかってしまい、お返事が遅くなりました！

回答で記入していただいた方法の、'_post_layout.html.haml'を作り、
= render partial: 'like', layout: 'post_layout', collection: @posts, as: :post
とすることで、renderの嵐を抑制することができました！

yieldの使い方の勉強になりました！
ありがとうござました！