タグ

2019年7月2日のブックマーク (8件)

  • 「それってSPAでやる必要ある?」第1章:パフォーマンスチューニング - Qiita

    SPA、流行ってますね。勢いがありますね。 ただ、最近のフロントエンド界隈を見ていると、 「これからはSPAが主流になっていくぞ!」 「新規サービスをはとにかくSPAで作るべき!」 というような過激(?)な言論を聞くこともしばしばです。 今回は、そんなイケイケな雰囲気にたいしてちょっとだけ「待った」をかけるべく 今のWeb開発において、SPAは当にファーストチョイスなのか? という議題について、 枯れた技術が大好きなサーバーサイドおじさん が、考えをまとめたいと思います。 全体の構成として 【1】パフォーマンスチューニング 【2】SSR 【3】ルーティング の3点について、今のSPAが抱える諸問題や、必要以上に期待されてしまっている点などを示した上で、 SPAが導入しやすいサービス、逆に導入しないほうがいいサービス SPAを導入しない場合のフロント構成の代替案(MPAや限定的なSPA)

    「それってSPAでやる必要ある?」第1章:パフォーマンスチューニング - Qiita
    akatakun
    akatakun 2019/07/02
    わかりみ,JSの非同期処理は並列処理ではないので、APIを分けてもそんなに早くならない,通信回線が4G回線(10〜20Mbps)であれば、転送量1〜2MB程度の削減が、通信時間1秒の短縮に対応
  • Nuxt.jsを使うときに、SPA・SSR・SSGのどれがいいか迷ったら - Qiita

    nuxt generateの機能は、静的サイト生成とか、単に静的生成といわれることが多いですが、文中で多用するのがツラいので、より短く「SSG(Static Site Generation)」で統一しています。 Nuxt.jsにおけるビルドの選択肢 Nuxt.jsでは、SPA・SSR・SSGの中から、好きなものを選んで開発できます。 初期設定ではSSRで動作するようになっていますが、流れとして自然なのでSPAから順に利点と欠点をまとめました。それぞれのビルドを行うため設定は、ドキュメントにわかりやすく書いてあるので、そちらでご確認ください。 サーバーサイドレンダリング - Nuxt.js SPA(Single Page Application) 利点 実装しやすい サーバーの準備が楽 欠点 初期表示が遅い SEOに不安がある OGをページごとに設定できない SPAは、最もシンプルに実装でき

    Nuxt.jsを使うときに、SPA・SSR・SSGのどれがいいか迷ったら - Qiita
    akatakun
    akatakun 2019/07/02
    ビルド選択肢ごとのメリット・デメリットがいい感じにまとまっている
  • 【Google SEO】JSフレームワークを使ったサイトではプリレンダリングを推奨

    [レベル: 上級] ReactAngular などの JavaScript フレームワークを利用したサイトでは、プリレンダリングしたページを配信することを勧める。 Google の John Mueller(ジョン・ミューラー)氏は、英語版のウェブマスター向けオフィスアワーでこのようにコメントしました。 プリレンダリングで高速表示 プリレンダリング (Prerendering) は、コンテンツの大部分を JavaScript で生成するページで利用されます(正しく言えば、JS に限りませんがここでは深入りしません)。 プリレンダリングでは、ブラウザに JavaScript を実行させてページをレンダリングさせるのではなく、サーバー側であらかじめレンダリングした“静的な”HTMLをブラウザに配信します。 ※補足: この記事で言う「プリレンダリング」は「サーバー サイド レンダリング (

    【Google SEO】JSフレームワークを使ったサイトではプリレンダリングを推奨
    akatakun
    akatakun 2019/07/02
    今のGoogleBotはJSを実行できるが100%実行できる保証はない
  • 【JavaScript SEO】サーバーサイドでレンダリングすべき要素: メインコンテンツ、構造化データ、titleタグ、hreflangほか

    [レベル: 上級] DeepCrawl が主催したウェビナーで Google の Martin Splitt(マーティン・スプリット)氏が、JavaScript サイトの SEO に関するさまざまな質問に回答しました。 このなかで、サーバーサイドでレンダリングすべき要素、言い換えると、JavaScript を介してレンダリングさせるべきではない要素をスプリット氏は挙げました。 スプリット氏によると、SEO を考慮するのであれば、次の要素はサーバーサイドでレンダリングしてからクライアント(ユーザーと Googlebot)に配信したほうがいいとのことです。 メインコンテンツ 構造化データ title タグ meta description hreflang 日付に関する記述 メインコンテンツは、ページの評価において最も重要です。 現在の WRS(ウェブ レンダリング サービス)が、古い Chr

    【JavaScript SEO】サーバーサイドでレンダリングすべき要素: メインコンテンツ、構造化データ、titleタグ、hreflangほか
    akatakun
    akatakun 2019/07/02
    メインコンテンツ,構造化データ,title タグ,meta description,hreflang,日付に関する記述はクライアントサイドでレンダリングすべきではない
  • 【JavaScript SEO】AngularとReact、VueはGoogle検索のSEOで利用可能。ただし注意点あり

    [レベル: 上級] メジャーな 2 大 JavaScript フレームワークである AngularReact、そしてこの 2 つには及ばないもののシェアを伸ばしてきている Vue.js を採用したウェブサイトは基的に Google 検索においてうまく機能します。 SEO と相性が悪いフレームワークではありません。 ただしいくつか気をつける点もあります。 Angular/React/VueGoogle SEO に問題なし JavaScript SEO をテーマにした DeepCrawl との Q&A 動画チャットで、Google の Matin Splitt 氏が、メジャーな JavaScript フレームワークの Google 検索での利用について説明しました。 次の 3 つの JS フレームワークは GoogleSEO に害を与えるようには作られていないと自身で詳しく

    【JavaScript SEO】AngularとReact、VueはGoogle検索のSEOで利用可能。ただし注意点あり
    akatakun
    akatakun 2019/07/02
    VueJS: デフォルトの hash モードだと URL に # を使うので SEO に不向きです。historyAPI を適用して一意の URL を割り当てるようにします。
  • Googleモバイルフレンドリーテスト

    The web is being accessed more and more on mobile devices. Designing your websites to be mobile friendly ensures that your pages perform well on all devices.

  • Vue.jsでアプリケーションを開発するときによくある質問集 - Qiita

    概要 Single Page Applicationを実装するにあたって、気になることの質問・回答集。 ここで言う「Single Page Application」とは、画面遷移(リロード)をせず、1ページ内で ajaxなどを使用してページ遷移(のような動き)を実装しているものを指します。 また、Vue.jsを使用して実装することを想定しています。 ※随時更新していきます。 FAQ Google Analyticsの測定はできるの? 可能です。 vue-routerでURLを切り替える際に、手動でGA側にページ遷移を通知することで測定されます。 (ブラウザバックではページカウントが増えません) 任意のイベントを通知することも可能ですが、懸念点としては下記が挙げられます(未検証) GAタグ以外で、手動でページ遷移を通知する方法がない計測タグは対応できない Google Tag Manager

    Vue.jsでアプリケーションを開発するときによくある質問集 - Qiita
    akatakun
    akatakun 2019/07/02
    SPAはすべてClient側でHTMLの描画を行うので、Server側にLogは残らない(HookしてAPIに送ることは可)
  • 美容内服薬ラボットメディカルクリニック【公式】

    オンライン診療とは、自宅にいながら医師に直接毎日のスキンケアを相談したり、医薬品や漢方薬の処方を受けることができたりする診察のこと。お薬が処方された場合は郵送で薬局等にお薬を取りにいかなくても、自宅に届けられます。 普段、病院では発生する診察費用や処方箋費用はもちろん、お薬代以外の費用は一切かかりません。

    美容内服薬ラボットメディカルクリニック【公式】
    akatakun
    akatakun 2019/07/02