Upgrade to Pro — share decks privately, control downloads, hide ads and more …

SSR+SPA

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Sigma Sigma
October 10, 2022
Programming
0
150

 SSR+SPA

Avatar for Sigma

Sigma

October 10, 2022
Tweet

More Decks by Sigma

See All by Sigma
Proxmox_VE.pdf
Avatar for Sigma seiyasugimoto
0
200
Stable Diffusionで遊んでみた
Avatar for Sigma seiyasugimoto
1
130
EVAフレームワーク
Avatar for Sigma seiyasugimoto
0
110
Nuxtにおける設計
Avatar for Sigma seiyasugimoto
0
91
Atomic Designを ディレクトリ以外で表現
Avatar for Sigma seiyasugimoto
0
82
throttleすげぇぇぇ
Avatar for Sigma seiyasugimoto
0
80
スマホでPythonしたい
Avatar for Sigma seiyasugimoto
0
69
平文で保存するな！
Avatar for Sigma seiyasugimoto
0
89
ソースコードを読もう
Avatar for Sigma seiyasugimoto
0
88

Other Decks in Programming

See All in Programming
Architectural Extensions
Avatar for Denys Poltorak denyspoltorak
0
290
Amazon Bedrockを活用したRAGの品質管理パイプライン構築
Avatar for とすり tosuri13
5
740
Oxlint JS plugins
Avatar for kazupon kazupon
1
970
LLM Observabilityによる 対話型音声AIアプリケーションの安定運用
Avatar for Hiroyuki Moriya gekko0114
2
430
CSC307 Lecture 08
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
670
Rust 製のコードエディタ “Zed” を使ってみた
Avatar for NearMeの技術発表資料です nearme_tech
PRO
0
190
FOSDEM 2026: STUNMESH-go: Building P2P WireGuard Mesh Without Self-Hosted Infrastructure
Avatar for Date Huang tjjh89017
0
170
CSC307 Lecture 01
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
690
2026年 エンジニアリング自己学習法
Avatar for yumechi(Motoki Hirao) yumechi
0
140
The Past, Present, and Future of Enterprise Java
Avatar for ivargrimstad ivargrimstad
0
590
余白を設計しフロントエンド開発を 加速させる
Avatar for karacoro / からころ tsukuha
7
2.1k
[KNOTS 2026登壇資料]AIで拡張‧交差する プロダクト開発のプロセス および携わるメンバーの役割
Avatar for hisatake hisatake
0
290

Featured

See All Featured
Scaling GitHub
Avatar for Zach Holman holman
464
140k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
57
14k
How Fast Is Fast Enough? [PerfNow 2025]
Avatar for Tammy Everts tammyeverts
3
450
The Limits of Empathy - UXLibs8
Avatar for Cassini Nazir cassininazir
1
220
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
Avatar for Kenny Baas-Schwegler baasie
0
450
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
58k
Getting science done with accelerated Python computing platforms
Avatar for Jacob Tomlinson jacobtomlinson
2
120
Exploring anti-patterns in Rails
Avatar for Elle Meredith aemeredith
2
250
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
463
34k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
29
4.1k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
57
6.8k
The Curious Case for Waylosing
Avatar for Cassini Nazir cassininazir
0
240

Transcript

  1. SSR+SPA Nuxt+Vuex

  2. SSR(+SPA) とは • SSR とは ◦ サーバーサイドレンダリングの略。 クライアントサイド（SPA）と サーバーサイ ドの

    HTMLレンダリングを 併用しユーザー体験を向 上させることを指す。

  3. 冷静に考えるととんでもないことをやってる • サービス内の別のページからリンクすると クライアントサイドで レンダリングされる。 • そのページをF5を押して再読み込みすると サーバーサイドでレ ンダリングされる …

    は？

  4. なんでそんなクソ面倒くさいことを？ • サーバーサイドでレンダリングするならテンプレートエンジンを使った昔ながらの 方法でやれば良いじゃない。 • SPAが必要なほど複雑なフロントエンドで、OGPのクローラの面倒を見たりSNS でシェアされた際のファーストビューの速さが問題になる要件そうそう無いで しょ。 つい先日あった

  5. Nuxtで対応 • NuxtにはSSRサポートがある これで勝つる わけなかった

  6. 案件当時の標準的なNuxtプロジェクト • Nuxt + TypeScript を実現するために外部ライブラリを使う ◦ nuxt-property-decorator ( vue-property-decorator

    ) ◦ vuex-module-decorator • vuex-module-decorator の issue にとんでもないコメントを見つけてしまう。 ◦ https://github.com/championswimmer/vuex-module-decorators/issues/146#issuecomm ent-515269904

  7. SSRのバグのソリューションを探った 結果、getModule() に根深い問題が ありそう。 このリポジトリは大規 模なオーバーホール 無しではSSRでは使 えない。

  8. 終わった……

  9. None

  10. Readmeに書いてある おまじないの意味を知る

  11. exportしてるpluginsがキモ getModule()しているのがポイント

  12. I GOT KOTONAKI……