基本的にwebアプリは表示するデータを読み込んでからページを表示します。
しかしそれだと重いデータを取得・表示する場合、ページの表示速度が落ちて重たい動作になります。
なので先に軽い部分だけを読み込みそのページに移動してから重いデータを読み込むことで
すべてを表示するまでの時間は変わらない(むしろ少し落ちる)がページの移動速度を大幅に上げることができます。
体感上はかなりサクサクした動作になります。
↓ツイッターの遅延ロード
gem 'render_async'
を書きbundle
次にrenderを書き直します。
変更前:
```erb:index.html
<%= render "data", posts:@posts %>
これを
```erb:index.html
<%= render_async data_path %>
or
<%= render_async data_user_path(@user) %>
このようにする。
次にルーティング
get "data", to: "posts#data", as: "data"
#↓パラメーターが必要な場合
get "data_user/:id", to: "posts#data_user", as: "data"
def index
#@posts = Post.all
end
def data
@posts = Post.all
render partial: "data", locals: {posts:@posts}
end
def data_user
@user = User.find_by(name: params[:id])
@posts = @user.posts.all
render partial: "data_user", locals: {posts:@posts}
end
最後はレイアウトに
```erb:application.html.erb
<%= content_for :render_async %>
を追加。
これだけで遅延ロードが完成します。

# turbolinksを使用している場合
このままだと時々表示されない場合があります。
<%= render_async data_path, html_options: { 'data-turbolinks-track': 'reload' } %>
html_options: { 'data-turbolinks-track': 'reload' }を追加して
config/initializersにrender_async.rbを作りましょう
```render_async.rb
RenderAsync.configure do |config|
config.turbolinks = true # Enable this option if you are using Turbolinks 5+
end
kaminariやjscrollで無限スクロールなどを実装している場合、これをしないと動きません。
config/initializers/render_async.rb
RenderAsync.configure do |config|
config.jquery = true
end
遅延ロードって大きなサービスだと結構使われているのに日本語の情報が少なくて困ったので書きました。
体感上の動作速度がかなり変わるのでぜひやってみてください。
AmmotというSNSを作りました。
文字数制限が6000字まで、画像・動画・PDF・音声は同時に10個まで投稿可能な自由なSNSです。
マークダウンにも対応しているので皆さん大好きなソースコードもきれいに載せれます。
ぜひ使ってみてください。
僕のツイッターアカ
https://twitter.com/yamada1531
Crieitは誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。
また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!
こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください。
ボードとは?
コメント