フロントエンドが進化するにつれて、ビルド方法やレンダリング方法も多様化したのでまとめてみたいと思います CSR(client side rendering)とは、ユーザーのブラウザで全てレンダリングする方法です。 1. ほぼ空のHTMLとレンダリングするためのjsやCSSを受け取る 2. ブラウザがjsとCSSを読み込む 3. jsで描画のためのCSSとHTMLを生成する 4. HTMLの特定のタグに生成されたHTMLやCSSを展開する 5. 最終的なDOM,CSSMOMをもとにブラウザが描画する またケースによっては、初期描画のための情報をAPIなどで取得するケースもあリます。 メリット 一度読み込めば、あとは都度情報を取得するだけでいいので、ページ遷移なく処理を組める。 都度ページ遷移を挟まないのでサーバーへの負荷は少ない デメリット ページを開いてからHTMLなどの生成を行うので初期
![CSR,SSR,SSG,ISRのまとめ - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/fc89c5f6afb18ce05a2144ddc630317a9d899055/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9Q1NSJTJDU1NSJTJDU1NHJTJDSVNSJUUzJTgxJUFFJUUzJTgxJUJFJUUzJTgxJUE4JUUzJTgyJTgxJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1iMGUxMjg4YjkwMzlkZjg4NDdmMDM4MDY1MTRkN2YxOA%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBzb3VoZWktZXRvdSZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9YTRiMjJkMjMxZjgxNTdkODg1NjNjZmMxZTIyNTUyMzU%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3Dbcf69378d2c5fba56d3a2da5d9c6c08f)