Next.js と Server-side Rendering をプロダクト環境で3年運用してきた知見と率直な所感 | MEDLEY Developer Portal
2024-07-23Next.js と Server-side Rendering をプロダクト環境で3年運用してきた知見と率直な所感こんにちは、医療プラットフォーム本部・プロダクト開発室・第1開発グループ所属の加藤です。 オンライン診療・オンライン服薬指導アプリ「CLINICS」の開発を担当しています。 今回は CLINICS で採用している Next.js と Server-side Rendering (SSR) についてお話ししたいと思います。 Next.js は昨今注目を集めている React ベースの Web フレームワークです。 これから Web フロントエンドの開発を始めるにあたって採用を検討している方も多いのではないでしょうか。 Next.js といえば React コンポーネントをサーバー上で実行して HTML を返す SSR に対応しているのが大きな特徴です。 SSR
Misconceptions about view transitions | Blog | Chrome for Developers
The View Transition API is a web development game changer. Whether your website is single or multi-page, this powerful API lets you create seamless transitions between views, resulting in native-like experiences that captivate users. Currently available in Chrome, with same document view transitions soon to be available in Safari. With more and more people starting to look into the View Transition
Written by Luke Bjerring, Jude Gao, and Chris Krogh At Faire, speed matters. Our product should be lightning fast so that our customers can achieve their goals quickly — whether that’s setting up their shop in our marketplace, finding the products they’re looking for, or something else — and get back to running their business. Over the past year, the Faire Engineering team has prioritized many spe
エンジニアのみなさま、日々の学習本当にお疲れ様です！ また本記事まで足を運んでいただき本当に感謝です。 約2分程度で読めるので最後まで読んでもらえると幸いです。 タイトルに対する結論 Chrome DevToolsの項目にある 「Lighthouse」 を活用しましょう。 Lighthouseとは ウェブページの品質向上に役立つよう開発されたオープンソースの自動化ツールです。任意のウェブページ、公開ページ、認証要求ページに対して実行できます。パフォーマンス、ユーザー補助、プログレッシブ ウェブアプリ、SEO などの監査を実施しています。 デジタル庁のサイトを使って確認してみる テキストだとイメージしづらいため、早速サイトを見ながら確認してみましょう。 確認手順 1. 対象サイトを開いた状態で「Chrome DevTools」を開く 画面上に「Chrome DevTools」が表示されます
search consoleのページ左にナビゲーションのリストがあります。その中の大分類名 エクスペリエンス です。簡単に言うと『訪問ユーザーがあなたのサイトを閲覧しているときに 快適だと感じているかどうか』の指標。 快適あるいは『特に気になる・気に障る点がない』と言い換えても良いかと思います。イライラすることなく閲覧できるかどうか。 小分類最初の ページエクスペリエンス ではサイト全体がどう判断されているかのグラフを見ることができます。続く小分類は (全体的な)ページエクスペリエンスのシグナルになるもの です。 ページエクスペリエンス モバイルとPCとに分かれて評価されており「全体的にあなたのサイトはこうよ」というGoogleの判断が結果として表示されています。2022年からは 検索ランキングのシグナル として活用されていますので、ここで『不良』… かなぁ、ちょっと表現が見たことなくてわ
ユーザー中心の指標を使用することには、どのウェブサイトでも普遍的に測定できる多くの価値があります。これらの指標を使用すると、次のことができます。 実際のユーザーがウェブ全体をどのように体験しているかを把握できます。 自分のサイトを競合他社のサイトと比較する。 カスタムコードを記述しなくても、分析ツールで有用で実用的なデータを追跡できます。 ユニバーサル指標は良い基準となりますが、特定のサイトの全体的なエクスペリエンスを把握するには、多くの場合、これら以外の指標を測定する必要があります。 カスタム指標を使用すると、そのサイトのみに当てはまる、サイトの利便性に関する次のような要素を測定できます。 SPA が 1 つの「ページ」から移行するのにかかる時間必要があります。 データベースから取得したデータをログイン ユーザーのページに表示するのにかかる時間です。 サーバーサイド レンダリング（SSR
集合駅検索サービス KokoneでNext.js App Routerを大活用してリファクタリングしてみた (RSC/Streaming) - Qiita
集合駅検索サービス KokoneでNext.js App Routerを大活用してリファクタリングしてみた (RSC/Streaming)リファクタリングReact個人開発Next.jsAppRouter この記事で話すこと この記事では、集合駅WEB検索サービス Kokoneで、Next.js App RouterのReact Server Component(RSC)を活用できる様にリファクタを進めた中で検討したことや結果について共有できればと思います！ 恐らく今回のリファクタでSever Component(SC)とClient Component(CC)を分離する上で、躓くであろう壁にはほとんどぶつかりワークアラウンドができたのではないかなと思っています😅 現状App RouterでSCが活用できてない方やCCとの分離で悩まれている方に有益な情報を共有できたらと思っています！(も
社内イベントでフロントエンドクイズ大会を開催しました - Cybozu Inside Out | サイボウズエンジニアのブログ
この記事は、CYBOZU SUMMER BLOG FES '24 (Frontend stage) DAY4 の記事です。 こんにちわ。フロントエンドエキスパートチームの@nus3_です。 サイボウズでは開発、運用に関わる様々なチームや職能の人が集まって交流を深める社内イベントとして開運夏まつり 2024 が 7 月 2 ~ 4 日の 3 日間で開催されました。 開運夏まつり 2024 については詳しくは次の記事をご覧ください。 組織を強くするために！サイボウズ社内テックカンファレンス開催 この開運夏まつり 2024 の初日に Cybozu Frontend Day 2024 Summer と称し、社内でフロントエンドの交流ができるようなイベントを行いました。このイベントの詳細については後日、記事が公開される予定ですので、乞うご期待ください。 自分は、そんな Cybozu Frontend
Webサイトのパフォーマンスを簡単に確認する方法 - Qiita
エンジニアのみなさま、日々の学習本当にお疲れ様です！ また本記事まで足を運んでいただき本当に感謝です。 約2分程度で読めるので最後まで読んでもらえると幸いです。 タイトルに対する結論 Chrome DevToolsの項目にある 「Lighthouse」 を活用しましょう。 Lighthouseとは ウェブページの品質向上に役立つよう開発されたオープンソースの自動化ツールです。任意のウェブページ、公開ページ、認証要求ページに対して実行できます。パフォーマンス、ユーザー補助、プログレッシブ ウェブアプリ、SEO などの監査を実施しています。 デジタル庁のサイトを使って確認してみる テキストだとイメージしづらいため、早速サイトを見ながら確認してみましょう。 確認手順 1. 対象サイトを開いた状態で「Chrome DevTools」を開く 画面上に「Chrome DevTools」が表示されます
概要 こんにちは。HRBrainでオウンドメディア・ランディングページの開発を担当している渡邉です。 HRBrainでは、Next.js（TypeScript）とContentfulというHeadless CMSを使ってオウンドメディアを運営しています。 本記事では、Contentfulに入力したRich TextデータをNext.js側からAPI経由で取得し、目次を作成する方法をご紹介します。 手順 ContentfulのAPIを使用してRich Textデータを取得（本記事では具体的なAPIリクエストは省略します） 必要なライブラリを追加 Rich TextデータをHTMLに変換 Rich Textデータから目次を生成 コンポーネント側から呼び出す 必要なライブラリの追加 最初に、実装で必要となるContentful関連のライブラリをインストールします。 ▼ContentfulのRic
概要 Core Web Vitalsがそれぞれどういった指標であるかが曖昧で、それをNextJsの機能を使ってどのように改善できるのかが気になったので、軽く調べた際のメモになります。 Core Web Vitalsとは Web Vitalsは、Googleが提供するウェブサイトのユーザーエクスペリエンスを評価するための一連の指標のことであり、Core Web Vitals は、その中でも特に重要なLargest Contentful Paint（LCP）、First Input Delay（FID）、Cumulative Layout Shift（CLS）からなる3つの指標のことである。 Core Web Vitalsには各指標の目標閾値が含まれていて、この閾値によって定性的にユーザーエクスペリエンスが「良好」か、「改善が必要」か、「低い」かを測定できる。 また、Googleのコア ランキ
![[NextJS]Core Web Vitalsを理解してNextJSで改善する機能を調べる](https://cdn-ak-scissors.b.st-hatena.com/image/square/35ca7dca09ed1327eb50842097cef0501ca3a4ff/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--JtY1Kb43--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%25255BNextJS%25255DCore%252520Web%252520Vitals%2525E3%252582%252592%2525E7%252590%252586%2525E8%2525A7%2525A3%2525E3%252581%252597%2525E3%252581%2525A6NextJS%2525E3%252581%2525A7%2525E6%252594%2525B9%2525E5%252596%252584%2525E3%252581%252599%2525E3%252582%25258B%2525E6%2525A9%25259F%2525E8%252583%2525BD%2525E3%252582%252592%2525E8%2525AA%2525BF%2525E3%252581%2525B9%2525E3%252582%25258B%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3A%2525E3%252582%252586%2525E3%252583%2525BC%2525E3%252581%2525A8%2525E3%252581%25258A%2525E3%252581%252598%2525E3%252581%252595%2525E3%252582%252593%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzE2OWM4YzQwOGEuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
さくらサーバーは遅い？ この記事では、「さくらサーバーの応答スピードは遅い？他のレンタルサーバーにした方が良い？」という疑問にお答えします。 結論から言って、ページ表示速度が速いサーバーに比べると「さくらサーバーはやや遅い。」というのが結論です。 筆者はさくらサーバー、エックスサーバー、mixhost等の各社レンタルサーバーを実際に契約してメディア運営してるので、実際に比較してみました。 ページスピードインサイトで確認 googleが提供しているWebツール、PageSpeed Insightsでサイトの応答速度を計測することができます。 実際に、私がさくらサーバーで運営しているメディアの応答速度を実測してみましょう。 「0～100」のスコアでページ表示速度が速いのか？遅いのか？判定を行ないます。結果としては、19という低スコアを叩き出してしまいました。 ウェブに関する主な指標の評価：不合
View Transition API は、ウェブ開発のゲーム チェンジャーです。ウェブサイトがシングルページでもマルチページでも、この強力な API でビューをシームレスに切り替えて、ユーザーを魅了するネイティブのようなエクスペリエンスを提供できます。現在は Chrome でご利用いただけます。同じドキュメント表示の移行は、まもなく Safari でもご利用いただけるようになる予定です。 View Transition API を検討する人が増える中、誤解を解くときが来ています。 誤解 1: View Transition API でスクリーンショットを撮る ビュー遷移を実行すると、API はコンテンツの新旧の状態のスナップショットを作成します。これらのスナップショットは、ドキュメントの「移行の仕組み」セクションで説明されているように、アニメーション化されます。 古いスナップショットには
DevTools の新機能（Chrome 127） | Blog | Chrome for Developers
[要素] パネルで CSS アンカーの位置を調査する アンカーの位置指定機能をデバッグしやすくするため、[スタイル] タブでは、明示的なアンカー ID と暗黙的なアンカーをノードにリンクできるようになりました。 また、popovertarget 属性値が DOM 内の popover 要素にリンクされるようになりました。 Chromium の問題: 289900232、330306231。 ソースパネルの改善 このバージョンでは、[ソース] パネルにいくつかの改善を加えています。 「ここは一時停止しない」の強化 [Never Pause Here] オプションを使用すると、Debugger が同じ行で何度も一時停止することを防止できます。これにより、繰り返し配信される無関係なブレークポイントの処理が容易になります。このバージョンではこの機能が強化され、次のデバイスで動作するようになりました
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Boosting performance: Faire’s transition to NextJS
Webサイトのパフォーマンスを簡単に確認する方法 - Qiita
Google search consoleで気にした方が良いこと 気にしない方が良いこと
カスタム指標 | Articles | web.dev
Next.js + Contentfulでブログの目次を実装する - Qiita
[NextJS]Core Web Vitalsを理解してNextJSで改善する機能を調べる
[実測]さくらサーバーは遅いから引っ越すと幸せになるよ。って話。
ビュー遷移に関する誤解 | Blog | Chrome for Developers