Nuxt.jsにおけるサーバーサイドレンダリングの挙動とライフサイクル - nazolabo
Nuxt.jsというかSSR関係を触る際にまず疑問になるのは「どこまでがサーバーサイドレンダリング (SSR) でどこからがクライアントサイドレンダリング (CSR) なの？」ということだと思います。 基本 サーバーからロードされる時はサーバーサイドレンダリング ロードされた以降はクライアントサイドレンダリング 簡単に言えば、ブラウザでURL直接指定で開けばSSR、それ以降はCSR、ということになります。 当たり前ですが、サーバーサイドレンダリングはサーバーでの実行なので、windowオブジェクトも存在しないし、そこから外部サーバー（APIサーバーなど）にアクセスする際はそこからのアクセスになります。そのままではブラウザのcookieも利用できません。 axios-moduleは何をしているのか 上記の通り、SSRになった場合とCSRになった場合は通信経路も変わるしcookieの取扱も変わ
Nuxt.jsで参考になりそうな事例や実装例を調べてみた - りまりまだんの本拠地
こんにちは。りまりま団のもふもふです。これはNuxt.js Advent Calendar 2018の17日目の記事です。 本当はVue.jsのKUSOアプリをNuxt.jsに書き換えて比較しようと思っていたのですが、スマブラで全キャラクターを出すのに注力しすぎたコミックマーケットの原稿で力尽きたため、予定を変更してお送りします。 なぜこのエントリを書くのかというと、Nuxt.jsはVue.js以上に実装例が少なく、いざプロジェクトを作成しよう！というときに色々参考にできるものがあると嬉しいなと思ったからです。特にディレクトリ構成は気になりますよね。Nuxt.jsはディレクトリ構成を参照してルーティングを行なってくれるためです。 実装例 hackernews github.com ニュースサイトをNuxt.jsで実装したリポジトリです。リンクから実際のサイトを見ることもできます。 nuep
nuxtServerInitを利用して、vuex-persistedstateの情報をCookieの値で更新する | 毒男日記
nuxtServerInitを利用して、vuex-persistedstateの情報をCookieの値で更新する はじめに ローカルストレージはクライアントサイドのデータです。ページ更新時（F5）には内容が失われます。なのでvuex-persistedstateを利用している場合、NuxtでSSRしようとすると、保持しているデータが消失します。こればかりはブラウザの仕様なのでどうにもなりません。 しかし、Nuxtを利用する最大のメリットはSSRですから、これをオフ（ssr: false）にするのはナンセンスです。そこでSSRしていてもvuex-persistedstateのデータにアクセスできるよう、ページ更新時にはCookieからローカルストレージにデータをコピーするようにします。 実装 データのコピーにはnuxtServerInitを利用します。 こちらのhookはSSRが行われる際の
Nuxt + Firebase Authentication | shimar's blog
最近、個人でFirebaseをバックエンドとしたNuxtによるWebアプリケーションの開発をしています。その中で、Firebaseの機能の1つであるFirebase Authenticationを使用してユーザーの認証機能を実装してみました。この記事では、NuxtアプリでFirebase Authenticationによるユーザー認証機能を実装する方法について書いてみたいと思います。 はじめに ここで検討するアプリケーションは、次の仕様を前提としています。 Googleアカウントで利用可能である。 次のページを持つ。 ルートページ (/) ログインページ (/login) 認証されていないユーザーがルートページ(/)にアクセスした場合、ログインページ(/login)にリダイレクトする。 認証済みのユーザーがログインページ(/login)にアクセスした場合、ルートページ(/)にリダイレクトす
Nuxt.js + Firebase Hosting + CloudFunctionsでmspeakerdeckをSSR対応させる - razokulover publog
自分はSpeaker Deckのモバイルクライアントであるmspeakerdeckというwebアプリを作っています。 mspeakerdeckを知らない人のために書いておくと、 これはSpeaker DeckのスライドページのURLドメインにmを付与するだけでモバイル版の見やすいレイアウトになるというものです。 PCからのアクセス時はSpeaker Deckのオリジナルサイトが表示され、スマホからのアクセス時はmspeakerdeckのサイトが表示されるという仕組みになります。 当初はNuxt + Cloud Functions + Nuxt.jsのPWAとしてSSR無しの完全SPAで作成していたのですがしばらく使ってみるといくつか不便な点が見つかりました。 その一つがTwitterでシェアした時やはてぶしたときにうまくスライドの内容を取得してくれないというものです。 自分ははてぶとTwi
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
How to deploy Nuxt.js universal app to now v2 · ZEIT
Nuxt
GitHub - bluebeel/now-nuxt: A Now v2 Nuxt builder