AWS上のNext.js App RouterとCDNキャッシュ利用の課題と解決策 - Findy Tech Blog

2024/11/05 43 users AWS上 Next.js App Router 課題 解決策

こんにちは。 Findy Toolsの開発をしている林です。 私たちのプロジェクトではフロントエンドのフレームワークにNext.js App Routerを使っており、AWSのECSへデプロイして運用しています。 そして、一部のレンダリングの処理が重いページのキャッシュを実装する際に、直面した課題と解決策を紹介します。 Next.jsのキャ... 続きを読む

レンダリングを探訪する

2024/10/23 57 users パク LT資料 さくらじまハウス パフォーマンス 課題

※ 当記事は、さくらじまハウス 2024 のLT「レンダリングを探訪する」 の書き起こしとして作成しました。 LT資料: はじめに この記事では、ブラウザのレンダリングについて掘り下げていきます。Web アプリケーション開発において、パフォーマンスの最適化や複雑なバグの解決は日常的な課題です。ブラウザのレンダリングフ... 続きを読む

Reactのレンダリングとメモ化についてようやく理解したので書く - Qiita

2024/10/10 115 users Qiita React Props ユーティリティ関数 メモ化

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? レンダリングとメモ化についてようやく理解したので書く なぜこの記事を書こうと思ったのか Reactを学び始めてから、props の渡し方、配列処理のメソッド、ユーティリティ関数の使... 続きを読む

【初学者向け】CSR / SSR / SSG / ISRとは？架空アプリでレンダリング手法の違いを理解しよう！ - RAKUS Developers Blog | ラクス エンジニアブログ

2024/09/27 24 users ISR SSG クライ ラクス SSR

初めまして！新卒1年目のmochi_proteinと申します。 CSR / SSR / SSG / ISRがどのような概念か、 架空アプリを例として、それぞれの違いを初学者向けにやさしく解説していきます！ 🔖目次は以下の通りです🔖 はじめに 架空アプリ「楽楽鮮魚」の仕様 前提知識 レンダリングとは？ 動的にHTMLを生成するとは？ CSR（クライ... 続きを読む

自分の認識をだらだら書くとこうなる。 結局のところ2003年から2011年頃まで..

2024/06/25 290 users 認識 2011年頃 NVIDIA 自分 PlayStation

自分の認識をだらだら書くとこうなる。 結局のところ2003年から2011年頃までいちばん延べ計算量が必要だったのはリアルタイムの3Dグラフィックスのレンダリングだったんだ。そこではNVIDIAって会社がPCゲームのプラットフォームを握ってしまっていてそこで技術開発をめっちゃ進めてしまったんだ。 結果的にPlayStation2... 続きを読む

ゲーム内の円周率が「3.14159……」ではない場合どうなるのか？

2024/05/24 39 users 円周率 DOOM ゲーム内 一環 FPSゲーム

円周率は無理数であり、その値が「3.14159……」となることはよく知られています。こうした円周率はグラフィカル・プログラミングやビジュアル・レンダリングの一環としてゲーム内でも用いられることがありますが、あの伝説的なFPSゲーム「Doom」に用いられた円周率の値は間違っているそうです。こうした「誤った円周率」... 続きを読む

Webブラウザで3Dモデルを高速に描画する「Babylon.js 7.0」正式リリース。MMD（MikuMikuDance）やApple Vision Proサポート

2024/03/31 157 users MikuMikuDance MMD Babylon.js

Webブラウザで3Dモデルを高速に描画する「Babylon.js 7.0」正式リリース。MMD（MikuMikuDance）やApple Vision Proサポート Webブラウザで3Dモデルを高速に描画する「Babylon.js 7.0」正式リリース。MMD（MikuMikuDance）やApple Vision Pro、WebXRなどをサポートし、よりリアルなレンダリングを実現する機能追加も行わ... 続きを読む

テーブルの仮想スクロールとスクリーンリーダー向けのアクセシビリティ

2024/03/24 14 users アクセシビリティ DOM テーブル 負荷 テクニック

Webアプリケーションで、大量のデータを表示したいときに使われる、「仮想スクロール」と呼ばれるテクニックがあります。 大量のデータを素直にDOMに挿入してしまうと、レンダリングの処理に非常に負荷がかかり、場合によってはブラウザをフリーズさせてしまったりします。そこで使われるのが「仮想スクロール」です。ス... 続きを読む

なぜ document.title = 'title' は useEffect でラップする必要があるのか

2024/03/13 9 users useEffect クリーンアップ title エフェクト

答え(結論): レンダリングとエフェクトを分離するため クリーンアップを設定するため useEffect でラップする意味ってなくない? 以下の2つのコードはどちらもレンダリングすると Hello world と表示され、ページタイトルが Hello world になります。 const App1 = () => { useEffect(() => { document.title = 'Hello wo... 続きを読む

useEffect: 基礎から使用すべきでない例まで

2024/01/04 215 users useEffect effect React コンポーネント

はじめに useEffect について、きっちり調べようと思い調べてみた。公式ドキュメントのまとめ記事になっている。 useEffect 基礎編 useEffect とは Effect を用いるとレンダリングの後にコードを走らせることができ、React 外のシステムの要素と同期することが可能になる。 なぜ必要か まず、React コンポーネントの二種... 続きを読む

Googleがリアルタイムに高精度なレンダリングを実現する新技術「SMERF」を発表

2023/12/14 13 users Nerf センチメートル単位 精度 リアルタイム メモリ効率

画像や映像から立体的なイメージを生み出せる「NeRF(Neural Radiance Fields：ニューラル輝度場)」や「MERF(Memory-Efficient Radiance Fields：メモリ効率のいい輝度場)」をさらに発展させ、センチメートル単位の精度のレンダリングを行いつつも必要スペックはMERF並みな「SMERF」という技術を、Googleの開発者チームが... 続きを読む

PythonやR対応の統合開発環境「JupyterLab 4.0」正式リリース。 より効率的なレンダリング、リアルタイムコラボレーション機能が分離など

2023/06/14 16 users Python 分離 WebIDE JupyterLab

PythonやR対応の統合開発環境「JupyterLab 4.0」正式リリース。 より効率的なレンダリング、リアルタイムコラボレーション機能が分離など Project Jupyterは、オープンソースで開発されているWebIDE「JupyterLab 4.0」の正式リリースを発表しました。 JupyterLabは、Webブラウザから使えるPythonやR、Scala言語などに対... 続きを読む

Webブラウザ上で3D/2Dモデルをぬるぬる動かせる「Babylon.js 6」正式版に。レンダリング性能が最大50倍、WASM化した物理演算エンジン搭載、液体のレンダリングも

2023/04/25 214 users マイクロソフト Babylon.js 液体 wasm化 ソース

マイクロソフトは、Webブラウザ上で2Dや3Dモデルの高速なレンダリングなどを可能にするオープンソースのJavaScriptライブラリ「Babylon.js」の最新版「Babylon.js 6.0」正式版をリリースしました。 We are thrilled to officially announce the release of Babylon.js 6.0! The web just got a WHOLE lot more exciting!... 続きを読む

原理から考えるCSSアニメーションのパフォーマンス改善

2023/04/03 17 users CSSアニメーション 原理 GPUアクセラレーション 主流

ブラウザに描画されるWebページをデジタルイラストに例えて、レンダリングの仕組みからCSSアニメーションのパフォーマンスを考える視点を解説します。 また、近い将来、GPUアクセラレーションをはじめとするパフォーマンス事情がどう変わっていくのかについても触れ、新たに主流になるかもしれないアニメーション実装手... 続きを読む

大規模メディアにおけるNext.js とVercelのレンダリングとキャッ シュ戦略について

2023/02/22 18 users Vercel Next.js

Oracle Database Technology Night #63 Oracle Exadata Database Serviceを活用したハイブリッド・ディザスター・リカバリー実践 前半 続きを読む

「State of JavaScript 2022」公開。利用率1位のフロントエンドライブラリはReact、レンダリングはNext.js、テストはJestなど、4万人のエンジニアが回答

2023/01/11 121 users 国別分布 React Jest インド イギリス

JavaScriptに興味を持つ世界中のIT技術者3万9472人が回答したアンケートの結果をまとめた「State of JavaScript 2022」が公開されました（日本語訳版が同時公開されています）。 回答者の国別分布を上位5位までを見ると米国が11.9％、ドイツが5.2％、フランスが3.7％、イギリス（UK）が3.6％、そしてインドが3.2％。 言... 続きを読む

React for Web/Reat Native両対応のUIフレームワーク「Tamagui 1.0」正式リリース。最適化コンパイラで高速なレンダリングなど実現

2023/01/04 13 users UIフレームワーク 最適化コンパイラ 正式リリース web

React for Web/Reat Native両対応のUIフレームワーク「Tamagui 1.0」正式リリース。最適化コンパイラで高速なレンダリングなど実現 React for WebとReact Nativeの両方に対応しオープンソースで開発されているクロスプラットフォーム対応のUIフレームワーク「Tamagui 1.0」が正式にリリースされました。 Tamaguiを用いる... 続きを読む

『ゼノブレイド3』の進化した陰影表現は一体どのようにして生まれたのか？モノリスソフトが行った新たなキャラクター表現【CEDEC+KYUSHU 2022】

2022/12/01 6 users CEDEC＋KYUSHU ゼノブレイド 一体 グラフィックス

モノリスソフトの舘野氏は『ゼノブレイド3』におけるグラフィックスプログラムを担当しており、グラフィックスの中でもキャラクター表現等のタイトル固有の部分の実装を主に担当しているとのこと。 今作のキャラクターのグラフィックはアニメーション、またはイラストや漫画風の作画でレンダリングを行う「トゥーンレン... 続きを読む

「すずめの戸締まり」制作でもAWSが活躍　レンダリングで活用　エンドロールにも……

2022/11/28 141 users 戸締り 戸締まり クラウドサービス くら ススメ

11月11日に公開となった新海誠監督の映画最新作「すずめの戸締り」。制作に当たってはレンダリングなどの用途にクラウドサービス「Amazon Web Services」を活用したという。エンドロールにもロゴが……。 11月11日に公開となった新海誠監督の映画最新作「すずめの戸締り」。制作に当たってはレンダリングなどの用途にクラ... 続きを読む

Denoのフルスタックフレームワーク「Fresh 1.1」登場。プラグインシステム、Preact DevTools対応、404ページのレンダリングなど新機能

2022/09/19 7 users TypeScript deno FRESH 登場 最新版

Denoのフルスタックフレームワーク「Fresh 1.1」登場。プラグインシステム、Preact DevTools対応、404ページのレンダリングなど新機能 JavaScriptやTypeScriptのサーバサイドランタイム「Deno」を開発するDeno Land Inc.は、Deno用のフルスタックフレームワーク「Fresh」最新版となる「Fresh 1.1」をリリースしました。 ... 続きを読む

ふっさふさの髪の毛が簡単に描ける「Blender 3.3」がリリース ～2年サポートのLTS／Intel Arc/AMD Vega GPUをフル活用したレンダリングにも対応

2022/09/08 25 users LTS ふざ Intel Arc リリース 髪の毛

続きを読む

ダイナミックレンダリングをGoogleはもはや推奨せず、回避策であり最終手段 – 海外SEO情報ブログ

2022/08/11 12 users ダイナミックレンダリング トキ セクション ドキュメント 上級

[レベル: 上級] ダイナミック レンダリングに関する技術ドキュメントを Google は更新しました。 ダイナミック レンダリングの利用を推奨せず、別の方法を採用するように強く促しています。 ダイナミック レンダリングは回避策であり非推奨 こちらは更新前のドキュメントの最初のセクションです。 こちらは更新後のドキ... 続きを読む

Reactに有利なベンチマークを作ってみた　【ハードモード】 - Qiita

2022/07/14 9 users Qiita React おさらい UIライブラリ ベンチマーク

前回のおさらい 前回の記事では、同じアプリケーションを6つのUIライブラリで実装し、Reactに有利な状況設定で作られたベンチマークを走らせると当然Reactが勝つという結果をお伝えしました。 そのベンチマークでは、「レンダリングのために高い負荷がかかっている状況でもユーザーが快適に入力を行えるかどうか」を測り... 続きを読む

Webブラウザのレンダリングの仕組みを理解する

2022/07/04 206 users JavaS 点線 HTMLレンダリングエンジン リソース 概要

参考：https://ja.wikipedia.org/wiki/HTMLレンダリングエンジン 2 レンダリングの仕組み レンダリングの大きな流れは下記のようになります。Webブラウザは、サーバーなどからHTML等のリソースを受け取り①〜⑥の処理を経て、レンダリングを実行します。それでは各処理の概要を見ていきます。 ※点線は、HTML内にCSSやJavaS... 続きを読む

Deno の Web フレームワーク Fresh チュートリアル

2022/06/20 7 users deno FRESH フレームワーク ビルド デフォルト

Fresh は Deno 製の Web フレームワークです。事前のビルドを必要せず、エッジでレンダリングを提供するという特徴があります。また Islands Architecture を採用しており、デフォルトではクライアントに JavaScript が配信されることがありません。 続きを読む