Размер видео: 1280 X 720853 X 480640 X 360
Показать панель управления
Автовоспроизведение
Автоповтор
Next.jsの考え方の著者です。取り上げていただきありがとうございます
あっきーさんですね！！こちらこそ！！執筆していただいて大変ありがとうございます（動画で勝手に紹介してしまって、申し訳ございませんでした...）とても分かりやすくて僕としても大変勉強になりました。今後も随時、参考にさせていただきます🥲🥲
昼休みに1週間かけて拝見しました。有益な動画をありがとうございます！開発する中で再度この動画や参考にあげれたサイトを確認しようと思います！
林さんですね！！先日はご丁寧なDMありがとうございました。そして1週間かけてみてくださいまして、嬉しい限りでございますぜひ、開発の一助になれば幸いです。これからもお互いに開発がんばっていきましょう！
先日は突然のDMに丁寧にお返事をいただきありがとうございました🙇良いアウトプットができましたら、また報告させてください！これからも学ばせていただきます！
天才っす。一生着いていきます。
1時間40分越え！気合い入ってますね。いつも動画を楽しみにしてます！
全ては説明できませんでしたが、いつの間にか長くなっちゃいました😇ありがとうございます！お時間のある時に見ていただけると嬉しいです
app router は便利すぎる page routerにはもう戻れない
今ならapprouter利用率が高そうですよね
ちょうど今、app router入れるかどうか悩んでいた時なので助かる
先月から勉強させていただいてます！ありがとうございます！
神動画ありがたき幸せ🙏🙏
いつもためになる動画をありがとうございます！マインドマップ凄く分かりやすかったので配布して欲しいです！！
こちらこそ、いつもありがとうございます！分かりました！概要欄に記載しておきますね。
@@programming_tutorial_youtube ありがとうございます！
これ素晴らしいー！！
ありがたい
ちょうどリプレイスの設計をしているので非常に有益な動画ありがとうございます！API Handlerでfetchした場合はデフォルトのキャッシュは使えないとのことでしたが、API HandlerをBFFとした構成で、フロントエンドからはAPIHandlerのエンドポイントを呼ぶ場合は、デフォルトのキャッシュが働く認識でいいんでしょうか？現在バックエンドから不要なデータが返りすぎているので、API HandlerをBFFサーバーとして間に挟む構成で進めています。
どうもご視聴ありがとうございます！フロントからAPIHandlerをfetchで呼び出すときにはデフォルトでキャッシュが働きます。なのでご認識の通りです！
いつもありがとうございます。質問失礼します。57:20~で、CacheはVercelにホスティングするのであれば、CDNやEdge Serverに格納されるとおっしゃられております。こちらもしVercel以外にホスティング（AWS, GCP等）した場合、Cacheの格納先を自分たちで構築する必要があるという認識でしょうか。
SSGやISRなどのレンダリングはNext.jsの機能ですので、Vercel以外でも動きます(ISRはVercelで最適化されているのでISRを使う場合はVercelになると思います)。たとえば、SSGで作ったサイトをAWSでデプロイする場合、SSGのレンダリング(ビルド時にデータ取得＆静的化)は行われますが、DataCacheは行われるかどうかは定かではありません(これは僕の知識不足です。)もしもキャッシュされない場合は、SSGで出力した静的ファイルをS3にアップロードし、それをCloudFrontを利用してCDNキャッシュする必要があるかもです。Amplifyでデプロイした場合は、自動でキャッシュを良しなにやってくれるかもですが、、詳細はちょっと分からないですね、、すみません。GCPも同様だと思います。Vercel以外でもキャッシュの基本的な恩恵は受けられるみたいですが、グローバルCDN配信に自動で対応していないホスト先ではCDNキャッシュ設定など手動で行う必要があるかもです。
Que legal.
Tanstack queryでサーバーコンポーネント側でフェッチするときはprefetchしてクライアント側にキー指定で受け渡すみたいな感じであってますでしょうか、、？
いつも拝見させていただいてます。初学者で恐縮ですが質問させてくださいませ。Next.jsだとuseClientを利用することによりCSRは構築可能、SSRも基本的に構築可能です。ReactはCSR(SPA)のみなので、大は小を兼ねる。。。という意味でNext.jsを採用すればどちらでも転ぶことができるのでよいのかな・・・？と思ったのですが安直でしょうか・・？
いいと思いますよ！あまりにもリアルタイム性を要求するアプリであればReactだと思いますが、Next.jsで始めるのは良い選択だと思います。
ありがとうございます！一点質問です、Route Handlerを使わなくてもよいなどと触れてましたが、Next.jsだけでサーバ側も実装する場合、fetchを用いてキャッシュの取り扱いをして恩恵受けるには、Route Handlerに記載したapiを呼ぶのがキャッシュ再検証などもできて便利じゃないかなと思ったのですが、いかがでしょうか？(サーバコンポーネントでそのままPrismaなど用いてデータ呼び出す場合キャッシュが使えなくないですか？)
あっ勘違いしてました。いままでTanStackQueryを使ってクライアント側でフェッチしてユーザーごとにキャッシュを持たせていたのですが、Next.jsのfetchの場合サーバーサイドでのフェッチになるので、全体のキャッシュになるのですね(ユーザーごとではない)この場合って、キャッシュ使わなくてもサーバーサイドでPrismaなど用いてapi叩かなくてもデータをDBから返却できるので、パフォーマンスいいよねって話なのでしょうか？
@@sado4148 そうですね。prismaを利用したデータ取得の場合であればroute handlerを使ってAPIを作る必要はないかなと思っています。サーバーコンポーネントでのフェッチになりますので、ご認識の通りパフォーマンスが良くなります。ですがサーバーサイドでのキャッシュが付かないので、その場合は・メモ化(request memoizationと同等)したいのであればcache()・複数ユーザー間でキャッシュ(Data Cacheと同等だと思います)したいのであればunstable_cache()でprismaを使った関数をラップしてあげるといいですね。unstable_cacheは名前の通り安定ではないバージョンですので、今後名前の変更があると思います。
ありがとうございます！
container presenパターンだと、SEO的に残したいところもクライアントコンポになっちゃうところが悩みどころなんだよな〜分かる同士いる？😊
なるほど、確かにクライアントコンポだとSEO的に弱いですね。RSCPayload削減かのトレードオフになりそうですね...
フロントばっかりしてる人はアプリ開発とかゲーム開発とかしてみると良いと思う。なんたらなんたらオレオレパターンが多すぎてカオスになりすぎ。
Next.jsの考え方の著者です。取り上げていただきありがとうございます
あっきーさんですね！！
こちらこそ！！執筆していただいて大変ありがとうございます
（動画で勝手に紹介してしまって、申し訳ございませんでした...）
とても分かりやすくて僕としても大変勉強になりました。今後も随時、参考にさせていただきます🥲🥲
昼休みに1週間かけて拝見しました。有益な動画をありがとうございます！開発する中で再度この動画や参考にあげれたサイトを確認しようと思います！
林さんですね！！
先日はご丁寧なDMありがとうございました。
そして1週間かけてみてくださいまして、嬉しい限りでございます
ぜひ、開発の一助になれば幸いです。これからもお互いに開発がんばっていきましょう！
先日は突然のDMに丁寧にお返事をいただきありがとうございました🙇
良いアウトプットができましたら、また報告させてください！
これからも学ばせていただきます！
天才っす。
一生着いていきます。
1時間40分越え！気合い入ってますね。いつも動画を楽しみにしてます！
全ては説明できませんでしたが、いつの間にか長くなっちゃいました😇
ありがとうございます！お時間のある時に見ていただけると嬉しいです
app router は便利すぎる page routerにはもう戻れない
今ならapprouter利用率が高そうですよね
ちょうど今、app router入れるかどうか悩んでいた時なので助かる
先月から勉強させていただいてます！
ありがとうございます！
神動画ありがたき幸せ🙏🙏
いつもためになる動画をありがとうございます！
マインドマップ凄く分かりやすかったので配布して欲しいです！！
こちらこそ、いつもありがとうございます！
分かりました！概要欄に記載しておきますね。
@@programming_tutorial_youtube ありがとうございます！
これ素晴らしいー！！
ありがたい
ちょうどリプレイスの設計をしているので非常に有益な動画ありがとうございます！
API Handlerでfetchした場合はデフォルトのキャッシュは使えないとのことでしたが、API HandlerをBFFとした構成で、フロントエンドからはAPIHandlerのエンドポイントを呼ぶ場合は、デフォルトのキャッシュが働く認識でいいんでしょうか？
現在バックエンドから不要なデータが返りすぎているので、API HandlerをBFFサーバーとして間に挟む構成で進めています。
どうもご視聴ありがとうございます！
フロントからAPIHandlerをfetchで呼び出すときにはデフォルトでキャッシュが働きます。なのでご認識の通りです！
いつもありがとうございます。
質問失礼します。
57:20~で、CacheはVercelにホスティングするのであれば、CDNやEdge Serverに格納されるとおっしゃられております。
こちらもしVercel以外にホスティング（AWS, GCP等）した場合、Cacheの格納先を自分たちで構築する必要があるという認識でしょうか。
SSGやISRなどのレンダリングはNext.jsの機能ですので、Vercel以外でも動きます(ISRはVercelで最適化されているのでISRを使う場合はVercelになると思います)。
たとえば、SSGで作ったサイトをAWSでデプロイする場合、SSGのレンダリング(ビルド時にデータ取得＆静的化)は行われますが、DataCacheは行われるかどうかは定かではありません(これは僕の知識不足です。)
もしもキャッシュされない場合は、SSGで出力した静的ファイルをS3にアップロードし、それをCloudFrontを利用してCDNキャッシュする必要があるかもです。
Amplifyでデプロイした場合は、自動でキャッシュを良しなにやってくれるかもですが、、詳細はちょっと分からないですね、、すみません。GCPも同様だと思います。
Vercel以外でもキャッシュの基本的な恩恵は受けられるみたいですが、グローバルCDN配信に自動で対応していないホスト先ではCDNキャッシュ設定など手動で行う必要があるかもです。
Que legal.
Tanstack queryでサーバーコンポーネント側でフェッチするときはprefetchしてクライアント側にキー指定で受け渡すみたいな感じであってますでしょうか、、？
いつも拝見させていただいてます。初学者で恐縮ですが質問させてくださいませ。
Next.jsだとuseClientを利用することによりCSRは構築可能、SSRも基本的に構築可能です。
ReactはCSR(SPA)のみなので、大は小を兼ねる。。。という意味で
Next.jsを採用すればどちらでも転ぶことができるのでよいのかな・・・？と思ったのですが安直でしょうか・・？
いいと思いますよ！
あまりにもリアルタイム性を要求するアプリであればReactだと思いますが、Next.jsで始めるのは良い選択だと思います。
ありがとうございます！
一点質問です、Route Handlerを使わなくてもよいなどと触れてましたが、Next.jsだけでサーバ側も実装する場合、fetchを用いてキャッシュの取り扱いをして恩恵受けるには、Route Handlerに記載したapiを呼ぶのがキャッシュ再検証などもできて便利じゃないかなと思ったのですが、いかがでしょうか？
(サーバコンポーネントでそのままPrismaなど用いてデータ呼び出す場合キャッシュが使えなくないですか？)
あっ勘違いしてました。
いままでTanStackQueryを使ってクライアント側でフェッチしてユーザーごとにキャッシュを持たせていたのですが、Next.jsのfetchの場合サーバーサイドでのフェッチになるので、全体のキャッシュになるのですね(ユーザーごとではない)
この場合って、キャッシュ使わなくてもサーバーサイドでPrismaなど用いてapi叩かなくてもデータをDBから返却できるので、パフォーマンスいいよねって話なのでしょうか？
@@sado4148 そうですね。prismaを利用したデータ取得の場合であればroute handlerを使ってAPIを作る必要はないかなと思っています。
サーバーコンポーネントでのフェッチになりますので、ご認識の通りパフォーマンスが良くなります。ですがサーバーサイドでのキャッシュが付かないので、その場合は
・メモ化(request memoizationと同等)したいのであればcache()
・複数ユーザー間でキャッシュ(Data Cacheと同等だと思います)したいのであればunstable_cache()
でprismaを使った関数をラップしてあげるといいですね。
unstable_cacheは名前の通り安定ではないバージョンですので、今後名前の変更があると思います。
ありがとうございます！
container presenパターンだと、SEO的に残したいところもクライアントコンポになっちゃうところが悩みどころなんだよな〜
分かる同士いる？😊
なるほど、確かにクライアントコンポだとSEO的に弱いですね。
RSCPayload削減かのトレードオフになりそうですね...
フロントばっかりしてる人はアプリ開発とかゲーム開発とかしてみると良いと思う。なんたらなんたらオレオレパターンが多すぎてカオスになりすぎ。