【図解】Next.jsで理解するSSRとクライアントルーティングの通信の仕組み
「Next.jsで理解するSSRとクライアントルーティングの違い」という名目で社内にて簡単に勉強会を行いました。本記事は、その内容を適宜編集して公開するものです。 TL;DR 以下の要約を読んで、「なんだその話か」って思った方は引き返していただいて大丈夫です。逆に「えっそうなの・・・？」と思った方は、ぜひ読んでください！ Next.jsアプリケーションにおいて、/hogeと/fugaというページがあり、それぞれgetServerSideProps()が定義されているとします 最初ブラウザで/hogeを開いたとき、Next.jsアプリケーションはブラウザから/hogeへのGETリクエストを受け取り、getServerSideProps()を実行します 次に/hogeから/fugaへrouter.pushで遷移すると、Next.jsアプリケーションはブラウザから/fugaへのGETリクエストを
Next.js における レスポンシブの考察
フロントエンドエンジニアの茶木です。 Next.js におけるレスポンシブ、PC/SPの出し分けについてSSRの観点も含めて考察します。 具体的には、以下の切り替えについて、どのように実現するかについての考察です。 スタイリングの切り替え要素自体の描画を行うかどうかはじめにサーバーサイドレンダリング（SSR）Next.js はサーバーサイドレンダリング（SSR）をサポートしています。 SSRは、サーバー側で HTML を生成し、クライアントに返し表示することで、初期表示の高速化を実現します。 Next.js では、SSRは、クライアントサイドレンダリング（CSR）と混在させられます。基本的には SSRでレンダリングするべきなのですが、サーバーサイドで行えない、クライアントに依存した動的な表示を行う場合が存在します。 PC/SPの出し分け踏まえて、PC/SP の出し分けの判定について考えます
SSR, CSR, SSG, ISG, ISRの違いと使い分け方。それぞれNext.jsでTodoアプリ作ってみた。 - teamlab-frontend
最近初めてNext.jsを触ったのですが、レンダリング方法が色々ありすぎて混乱したので、調べてみました。 似たような3文字の略語多すぎ、、、 WEB+DB PRESS vol.123 でNext.jsのレンダリング方法の使い分け方が特集されていたので、その内容をまとめました。 勉強会の目的はレンダリング方法の違いを理解して、状況によって適切な使い分けができるようになること、です！ 目次 SSR, CSR, SSG, ISG, ISR ってそもそもなんじゃ？ それぞれでNext.jsのTodoアプリ作ってみた 実装、使い分け方、メリットデメリット CSR, SSR, SSG,( ISG, ISR) ってそもそもなんだっけ？ レンダリングを行う場所とタイミングの話です。 サーバー側でレンダリングするか、クライアント側でレンダリングするか。 ユーザーリクエストの前にレンダリングするか、リクエスト
Next.jsのいろいろなレンダリング方法を確認する | DevelopersIO
Introduction 最近Next.jsを少しさわっています。 私がフロント系のフレーワークにさわったのは 数年前にAngular2.0を使ったのが最後でした。 実際にNextをさわり始めたところ、Next.jsは レンダリング方法がいろいろあって 少々混乱したので整理します。 Next.js? Next.jsの基本については、ここに公式チュートリアルの まとめがあるので基本をおさえておきましょう。 Next.jsは基本的にはフロントエンドのフレーワークです。 （Angularはフルスタックのフレーワーク） 小規模なアプリであればAPIルート機能をつかって サーバサイドのエンドポイントを作成し、 ビジネスロジックやDBアクセスなどをさせることも可能です。 しかし通常はバックエンド用のサーバを用意し、 APIで通信を行うというのが推奨されてます。 Next.jsのレンダリング Next.
パフォーマンスの高みを目指せ！ CDNのエッジサーバーでSSR - CloudflareでViteを動かす手順 - ICS MEDIA
パフォーマンスの高みを目指せ！ CDNのエッジサーバーでSSR - CloudflareでViteを動かす手順 ウェブサイトの高速化はあらゆるウェブ制作者の悲願です。1ミリ秒でも早くコンテンツを届けるために、エンジニアたちは血と汗と涙を流します。しかし、ウェブサイトの高速化は、ウェブサイトの構成要素を最適化するだけでは実現できません。 大きな課題として次の2つが挙げられます。 コンテンツの転送量が大きく、表示までに時間がかかる 物理的なクライアント/サーバー間の距離が遠く、転送に時間がかかる これらの課題を解決するため、様々な技術が発展してきました。今回はその中でもSSR（サーバーサイドレンダリング）と、CDN（コンテンツデリバリーネットワーク）に注目します。 本記事ではSSRとCDNの概念について解説し、実際にCloudflareというCDNからコンテンツを配信する方法を紹介します。フレ
「トレンドのVuejs/NuxtをAws ECS, FargateでSSR、詳細解説します🚀」低コストなモダナイズ開発の実践 | Ragate
こんにちは！ ウェブアプリケーションの開発でデファクトスタンダードな VueJS / NuxtJS ですが、SSR 時のデプロイ方法についてはみなさん悩まれることが多いのではないでしょうか？ SPA であれば AWS Cloud Front と S3 のコンビで十分に運用可能ですが、要件に SSR が入ってくると Nodejs のランタイムが必要になりますね。 そんな時に大活躍するのが ECS, Fargate です！ 想定する読者 AWS サーバーレス環境で NuxtJS で SSR したいヒトNuxtJS のデプロイ方法について悩んでいるヒト はじめに Lambda での SSR 時の問題 実は、Lambda と API Gateway のコンビの方がもっと手軽にSSRを構築可能です。しかし、Lambda にはレスポンスボディサイズの制約、デプロイ可能な ZIP サイズの制約などがあり
SSR、SSG、Client Side Renderingの違いをまとめた - Qiita
「Client Side Rendering = SPA」の文脈で使われることが多い気がする。 ブラウザ上でJavaScriptを実行してDOMを生成、マウントし、コンテンツを表示させる。SPAアプリの場合、以下のような中身が空のHTMLファイルを使うことが多い。 <html> <head> <title>sample</title> </head> <body> <div id="app"></div> <script src="/js/bundle.js"></script> </body> </html> 上記のHTMLファイルはルートディレクトリ直下に置くのが普通なため、/以外にリクエストが送られると404となる。開発時はwebpack-dev-serverがよしなに面倒を見てくれるが、ホスティング先ではそうではないので、初めてSPAでアプリを作ってホスティングしたときに戸惑うやつ
Client Side Rendering（SPA）・SSR・SSG を整理してみた - 7839
Next.js で開発しているときに、Client Side Rendering（SPA）・SSR・SSG についてきちんと整理できておらず、自分なりの整理をしてみたので、備忘録として残しておく。（React ベースのフレームワークで SSG といえば、Next.js 。ただし、v9.3から SSG の機能が本格的に導入されたので、Next.js は SSR はもちろんのこと、SSG も対応可能となった。） SSR を理解する上で、Client Side Rendering または SPA と対比しながら整理を行った。 Client Side Rendering SSR SSG まとめ Client Side Rendering Client Side Rendering は、SPA（= Single Page Application）とほぼ同意義である。 ブラウザからリクエストされると、
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Redirecting to: /react/progressive-hydration