GyaanSetu WebDev

Frontend, backend and devops for the modern web.

230 articlesDeep, practical knowledge

Next.jsのソフト404がクロールバジェットを浪費し、SEOペナルティを招く

Google Search Consoleは、コンテンツが含まれていないにもかかわらず「200 OK」を返すページを「ソフト404」として検出します。Next.jsでは、適切なデータ検証を伴わないダイナミックルーティングによってこの問題が頻発し、クロールバジェットの浪費、検索順位の下落、そして直帰率の急増を引き起こします。

WebDev · 3 分で読めます

React 18のuseSyncExternalStoreが外部状態による「ティアリング」を解消

この新しいフックはレンダリング中にスナップショットの読み取りを行うため、Reactのコンカレントレンダラーがレンダリングを一時停止または再開した場合でも、すべてのコンポーネントが同じ値を見ることを保証し、従来のuseEffectパターンで問題となっていた視覚的な「ティアリング」を排除します。

WebDev · 3 分で読めます

印刷業者は2026年7月19日までにGS1 Digital Linkを導入しなければ、EU市場へのアクセス権を失う

新しいエコデザイン規則では、印刷されたパッケージがデジタルエンドポイントとして扱われるため、GS1 Digital Linkに対応したQRコードが必要となります。リゾルバーが機能していない場合、製品の通関ができなくなるほか、倉庫自動化の停滞やリサイクル報告義務の不履行を招く恐れがあります。

WebDev · 3 分で読めます

PostgreSQLの移行中に誤って関数を重複させ、本番APIがクラッシュした事例

開発者が CREATE OR REPLACE FUNCTION を使用してオプション引数を追加した際、PostgreSQLが既存の関数を上書きするのではなく、新しいオーバーロードを作成してしまいました。この定義の重複によって「function is not unique」エラーが発生し、本番APIで400レスポンスが返される事態となりました。

WebDev · 3 分で読めます

SEO向上:Next.js 14が完全にレンダリングされたHTMLを提供し、クロールの遅延を大幅に削減

個人のブログで行った簡単なテストでは、データフェッチをサーバーコンポーネントに移行することで、JavaScriptのバンドルサイズを約60%削減し、ページのファーストペイント時間を200ミリ秒未満に短縮。ユーザーとクローラーの両方に、即座にHTMLを配信できるようになりました。

WebDev · 3 分で読めます

asyncioタスクが保存されないと本番環境で消失する — Setを使って解決する方法

本番環境において、asyncio.create_taskで作成した「投げっぱなし(fire-and-forget)」のタスクは、参照を保持しておかないとPythonのガベージコレクタによって回収されてしまうことがあります。これにより、「Task was destroyed but it is pending!」というエラーが発生し、予期せぬサイレントな失敗を招く原因となります。

WebDev · 2 分で読めます

Web Locks APIで、複数タブによる認証サーバーへのリフレッシュリクエスト集中を防止

Axiosの401インターセプターを`navigator.locks`でラップすることで、ネットワークリフレッシュを実行するタブを1つに限定できます。他のタブは`localStorage`から新しいJWTを読み取るだけで済むため、ユーザーのログアウトを招くリクエストの連鎖を防ぐことが可能です。

WebDev · 4 分で読めます

動的なアイコンのインポートによりWSL2開発サーバーがクラッシュ、3.6 GBのRAMを消費

Turbopackを使用したNext.js 16プロジェクトで、約9,000個のモジュールを含むアイコンパッケージをインポートしたところ、Turbopackが完全なインメモリ・モジュールマップを構築。これにより.wslconfigのRAM上限に達してvmmemWSLがフリーズし、制限設定にもかかわらずWindowsの強制終了が発生した。

WebDev · 4 分で読めます

ユーザーがボタンをクリック。リクエストが止まる。10秒間の沈黙。ユーザーはフォールバックボタンをクリック。すると、2つのジョブが実行されてしまう。

ユーザーがボタンをクリック。リクエストが止まり、10秒間の沈黙が続く。ユーザーはフォールバックボタンをクリック。すると、一つの意図に対して2つのジョブが実行されることになり、結果として重複が発生してしまいます…。

WebDev · 6 分で読めます

ChatGPT、GitHub Copilot、Cursor、そしてそれらに類するAIツールは、プロンプトを打ち終える前にReactコンポーネントを生成できるようになりました

ChatGPT、GitHub Copilot、Cursor、そしてそれらに類するAIツールは、プロンプトを打ち終える前にReactコンポーネントを生成できるようになりました。Next.jsのルートをSupabaseに接続する?数秒で完了します。Re…

WebDev · 4 分で読めます

多くの開発者は、ブラウザ上では完璧に見える機能をリリースし、それで大変な作業は終わったと思い込んでしまいます。私は

多くの開発者は、ブラウザ上では完璧に見える機能をリリースし、それで大変な作業は終わったと思い込んでしまいます。私はDjangoのフードブログを構築している際、まさにその間違いを犯してしまいました。その...

WebDev · 5 分で読めます