Next.js Cacheのアツさをシェアしたい(App Router)
sumirenです。 2023年5月5日、ついにNext.js App Routerがstableになりましたね！ おめでとうございます！！ありがとうございます！！！ 今から本番で使うのが楽しみで待ちきれません。 13.4のリリースではstableの宣言とともに、目玉機能としてServer Actionsが来ています。Data Fetch（というか、もはやData Handling的なもの）の機能の一部として、とても興味深いです。 さて、Server Actions自体の解説は他の方に任せるとして、リリースノートには以下のような一文があります。 Server Actions in Next.js have been designed for deep integration with the rest of the data lifecycle, including the Next.js
useEffectをやめて、Suspenseを使おう
Reactコンポーネントの開発時、データフェッチは欠かせません。 SPAで開発を行う時、あなたも含めてuseEffect()を使ったことがあるはずです。 あなたがSWRやReact Queryの代わりにuseEffect()を使う理由は、いくつかあるのでしょう。 そんな方のために、Reactが提供する<Suspense>を使ってデータフェッチを行う方法を紹介します。 追記: Suspenseではウォーターフォール問題を解決できないとの指摘について 「Suspenseの実装」に記載のコードを見た限り、ウォーターフォール問題を解決できないとの指摘がありました。 実装の章では問題を解決することではなく、<Suspense>をどのように使うかに焦点を当てました。 具体的な実装方法に踏み込むとテーマから大きく外れてしまう可能性があったためです。 読みやすさを優先した結果、解決のための実装については割
Vercelのインフラ構成を妄想する
ども、takiponeです。 最近いじっていて面白いなぁと思っている開発者向けサービス Vercel のインフラ構成を妄想してみた様子をシェアします。 まずはインフラ構成について触れているドキュメントを見てみます。 以下の一文に集約されている感じです。 The Vercel Edge Network is a CDN with the ability to execute functions at the edge. 静的ファイルの配信とServerless Function(FaaS)による動的コンテンツをエッジで実行する構成と読めますね。実際に利用しているデータセンターは以下のドキュメントにあります。 Cloud providerとしてAWSの16個のリージョンを利用しているとのことです。Region IDはIATAの空港コードに見えますが、同様にIATAコードを利用しているAmazo
ISR と オンデマンドISR を Next.js の挙動から完全に理解する
Next.jsを使っている時に ISR や On-demand ISRをを当たり前に使っているのですが、Next.js がどういうふうに動いているのか小さい検証環境を用意して検証しました。 ISR, オンデマンドISRとは はじめに、ISRと On-demand ISR (On-demand revalidate) について軽くおさらいしておきます。 ISR ISR は SSG したページを revalidate で指定した時間を超えてからアクセスがあった時に、更新がないか再検証して、ページを更新する機能です。 オンデマンドISR オンデマンドISR はこの ISR をさらに強化したような機能で、ISR だと revalidate で指定した時間を待たないとページが更新されなかったのに対して、任意のタイミングでページを更新できるようにしたものです。 使い方などはこの記事では触れないので、m
NotionのページIDを利用したGitリポジトリ管理の提案
※この記事は、Luup Advent Calendar の21日目の記事です。 最初に こんにちは、2022年11月からLuupにジョインしたSREチームのにわです。 皆さん素晴らしい技術的な記事を書かれているので、今回はひと休憩ということで、Notionにおけるタスク管理ツールとしての活用方法をアイデアとして共有したいと思います。 経緯 ここで一度、Gitに関する経験談と発想の着眼点について少しお話させてください。 前の職場でJiraとGitHubを併用して使っていました。 そのチームで運用されていたGitブランチ命名規則は例としてfeature/SRE-101というものでした。 この方法に感銘を受けました。 そしてこれは、おそらくJiraを使われている方たちにとって、この手法は定番となっていると思います。Jiraのタスク番号と機能追加・改修を込めたものです。 また、Redmineの場合
ユーザー投稿型サイトのSEO対策
Zennという技術情報共有サービスを運営しています。長期的にZennの流入経路の多くは「検索」になると予想しています。むしろ検索流入が多いサービスであるべきだと考えています。 具体的なソースコードや数式が並ぶ文章は、ソーシャルメディアではあまりシェアされません。ある程度抽象的な内容でないと、読者層が狭く、読み手も労力を必要とするからです。 （具体的な話を盛り込みつつ話題を集める文章を書けるスーパーな方もときどきいますが） しかし、いざ仕事で問題に直面したとき、自分を助けてくれるのは、たいてい具体的なコードを含む記事や実際に問題に直面した人によるニッチな体験談です。すぐに誰かに届くものではないけれど、後から同じ道を通った人は助かる… そんな先人の知恵がたくさん集まる場所になったらいいなと考えています。 SEOに関する情報収集源 本題に入る前に、僕が参考にしているSEO対策の情報源を紹介してお
Redisの25倍のスループットDragonflyを試してみる
インメモリデータストアを現代風に再実装したら? 高速なデータアクセスのためのインメモリデータストアとしては、RedisやMemcachedが有名です。ただし、これらは10年以上前に設計されており、Memcachedに至っては、2003年と約20年前です。 長い年月を経て、機能追加や最適化が進む一方で、どうしても設計の古さも目立ってきます。 その課題を解決すべく開発されたのがDragonfly です。 全ての操作がアトミック 高スループットでもミリ秒未満のスループット を目指し、Redis/Memcached互換なAPIを提供します。 Redisの25倍のスループットを誇り、1インスタンスで百万オーダーのQPSをさばけます。 開発者が実施したAWS EC2上のベンチマークによると、Dragonflyは本家RedisやRedisのマルチスレッドforkであるKeyDBよりも圧倒的なスループット
Vercel Proプランの料金体系の変更とNext.js での対策に関して
Twitterにてタイトルに関して指摘をいただきました。 確かに値上げではなく、「利用上限を超えた場合の従量課金体系の追加」が正しいため、タイトルを変更しました。 ただ、従量課金の金額はベース料金と比較した場合に比率がかなり大きいため、次回の請求サイクルに入る前に、自身の利用状況を確認することをおすすめします。 2021/10/06 Vercel よりメールで、Proプランにおける使用上限を上回った際の追加料金発生に関してアナウンスがあった。 Hi there, Your team, on the Vercel Pro plan is now able to purchase extra usage as needed. This allows greater flexibility for teams who don't need the support and security of
ReactコンポーネントへのPropsの渡し方/受け取り方大全
ReactコンポーネントへPropsを渡す/受け取る方法は色々あり、意外にもまとまったリファレンスがなく説明に困ったのでまとめたいと思います。 なお、公式ドキュメントでもあまり包括的な記述がありませんが、β版のドキュメントには比較的良いページがあります：https://beta.reactjs.org/learn/passing-props-to-a-component Propsの渡しかた 基本の渡し方 propsを渡す基本的な構文は、props名={値}です。どんな値もこの記法で渡すことができます。多くの説明書では文字列に限った渡し方から学びますが、まずはこちらが基本だと覚えたほうがわかりやすいです。 <MyComponent age={25} // 数値 rate={100 * 0.5} // 数値 name={'John'} // 文字列 greeting={`Hi, my nam
React 18 関連の資料を読んでいく
Streaming HTML と Selective Hydration SSR の全体像 データの取得 HTMLのレンダリング JSの読み込み Hydration 画面をインタラクティブにする (イベントハンドラーの登録など) 今までのSSRは、上記の流れを画面全体でする or しないかの2択だった。このため、画面のどこかにJSサイズの大きいライブラリを読み込む必要のあるコンポーネントやデータの取得に時間がかかるコンポーネントがある場合、それは画面全体に悪影響をもたらすという問題点があった。 この問題点を解決するため、React 18 ではコンポーネント単位 (Suspenseで囲った単位) でSSRを可能にする。コンポーネント単位でのSSRを可能にする技術(？)が、Streaming HTMLとSelective Hydrationである。 Streaming HTML データを取得し
Next.js v13 試してみる
モチベーション Next.js v13出ましたね。 RFCで出ていた内容も多いので、アップデート内容が予測していた方もいらっしゃると思いますが、僕自身は詳しくコードをながめたことはなかったのでみていこうと思います やること Turbopack New Next.js Router やらないこと next/image @next/font next/link Turbopack（α） Turbopackとは？ Rustで作られたJavaScript/TypeScriptのバンドラー 圧倒的なビルドスピードとキャッシュ機構が売り
App Routerの落とし穴 HTMLタグ忘れる編 [Next.js]
import Footer from '@/components/Footer'; import Header from '@/components/Header'; import { ReactNode } from 'react'; import '@/styles/globals.css'; export default async function Layout({ children }: { children: ReactNode }) { return ( <> <Header /> <div className="container">{children}</div> <Footer /> </> ); } これは app/layout.tsx なので、何もしなければ全ページで使われるレイアウトである。 v13.4.4現在、ローカルでは表示できるし、ビルドも通ってしまう。 だ
![App Routerの落とし穴 HTMLタグ忘れる編 [Next.js]](https://cdn-ak-scissors.b.st-hatena.com/image/square/1965e5ac9c7652148c8765c5c45dc9c935146fef/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--C1tXEB8D--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3AApp%252520Router%2525E3%252581%2525AE%2525E8%252590%2525BD%2525E3%252581%2525A8%2525E3%252581%252597%2525E7%2525A9%2525B4%252520HTML%2525E3%252582%2525BF%2525E3%252582%2525B0%2525E5%2525BF%252598%2525E3%252582%25258C%2525E3%252582%25258B%2525E7%2525B7%2525A8%252520%25255BNext.js%25255D%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3A%252528%2525E4%2525BD%2525BF%2525E3%252581%252584%2525E3%252581%2525BE%2525E3%252581%25259B%2525E3%252582%252593%252529%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzk0YzZjYmZlMWIuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
個人ブログの Next.js v13 移行でやったことまとめ
Next.js v13 への移行でやったことまとめ 準備 基礎となる記事に目を通した -> https://zenn.dev/link/comments/eefa4975aaedaf マイグレーションガイドを見て一つずつ対応しようかなと思ったけど、記事が長いのでnext devで動かして出てきたエラーを潰していく方法にした。とりあえずビルドできるようになったら、見落としやより良いやり方があるか確認するために読む。 ページコンポーネントに対して pages にあるファイルを app ディレクトリに移動させる 規約 通りに page と layout にコンポーネントを分割する getServerSideProps の処理をasync function getData() に変更する コンポーネントを async 関数にする props ではなくコンポーネントの中でgetData()の返り値を
HTMLのタグちゃんと使おう
初めに Team DELTA の三浦です。 昨年のアドベントカレンダーでweb 制作から開発領域に足を踏み出している話を書きました。 React で書かれたスマートクリニックシステムの UI 調整をメインでやっています。 アドベントカレンダー以降も Team DELTA として情報発信していくぞ！ということで、今週は、自分が UI 調整をする中で気づいた、マークアップで気をつけたいことの記事を書きました。 どんな人に読んでほしいか まずは自分（戒めも込めて） そして、どちらかというとサーバー側をメインで書いていて、あまりマークアップに触れてこなかったという方にも、参考になる部分があれば幸いです。 どんな内容か なるべく適切なタグを使おうというテーマです。WAI-ARIA のようなアクセシビリティには細かく踏み込んでいません。 誤っている内容があれば、（優しめに）ご指摘いただきたいです！ H
ReactのStreaming SSRをエッジでやる
React18のストリーミング機能とCloudflare WorkersやDenoのStreams APIが気になっていたので、それらを組み合わせて遊んでみた。というかこの2つの組み合わせこそがReactのやりたいことだと思います。ところで、Reactよく分かってないので、ツッコミどころあるかもしれませんが、優しくしてください。 やりたいこと SSRしたHTMLをStreamで返却し、コンテンツの準備ができたらSuspenseの内側だけを差し替える。これを全部、HTTP Streamingでやるのがミソ。結果当然ながら、パフォーマンスが上がったりいいことが起こる。 Suspense ReactのSuspenseとはたぶん、Suspenseの外側を先に描画して、Suspenseの内側で投げたPromiseが完了するまでにfallbackを表示するってことだと思います。外部APIのレスポンスを
Reactで複数のchildrenを扱いたい場合の実装パターン
導入：Reactのchildren Reactのchildrenを使うことで、子要素をwrapするような子要素を記述することが出来る。railsのviewで言えばyieldみたいなもの。 const SomeLabel = ({children}) => { return <div>{children}</div> } // 呼び出し側 <SomeLabel> // 子要素の拡張に対して、`SomeLabel`は関心を持たなくて良い。 <SomeDecoration>Hello</SomeDecoration> <SomeLabel> これを覚えるとだいぶReactをきれいに書きやすくなるイメージがある。 本題：複数の子要素を柔軟に扱いたいときにどう考えるか？ 例えば何かtitle, author,bodyを貰って記事を表示するような<Post>を考える。
スケルトンスクリーンを実装してみた
はじめに react-content-loader を使ったスケルトンスクリーンの実装について書いた記事です。Create React Content Loader のページでコードも生成され、すごく便利ツールだったので試したことをまとめました。 スケルトンスクリーンとは 画面に表示するデータが読み込まれるまでの間、そのコンテンツの枠組みだけを事前に表示させるUIのことです。 こういうやつです。 スケルトンスクリーンのメリット 画面に表示するデータが読み込まれるまでの間、ローディングやスピナー、空白の画面を表示することに比べて、スケルトンスクリーンは待機してる体感時間を短く感じるメリットがあります。（それほど大きな差はないらしいですが。） Skeleton screens (as splash screens), when used to indicate that a screen is
Next.jsのSSGで全文検索をする方法
前提 Next.js TypeScript styled-components microCMS AWS S3 Cloud Front Route53 Next.jsのSSGで生成した静的ファイルをS3にアップロードして、静的なメディアサイトを作っています。 CMSはmicroCMSを利用していて、メディアの記事の部分をmicroCMSから配信しています。 やりたいこと Next.jsのSSGで作成した静的なメディアにおいて、全文検索機能を追加したいというのが今回のやりたかったことです。 next devでローカル開発してるときは、getStaticProps内が変更はいるたびに更新され、再buildされるので、うまくいったように見えてましたが、S3にあげてみると、うまくいかなかったので、その対策をしたかったです。 結論 microCMSの全文検索APIをつかう AWSのLambdaでエン
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Next.jsにTailwind CSSを導入する
React Hydrateとは
