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

SSR+SPA

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
210
Stable Diffusionで遊んでみた
Avatar for Sigma seiyasugimoto
1
140
EVAフレームワーク
Avatar for Sigma seiyasugimoto
0
110
Nuxtにおける設計
Avatar for Sigma seiyasugimoto
0
95
Atomic Designを ディレクトリ以外で表現
Avatar for Sigma seiyasugimoto
0
84
throttleすげぇぇぇ
Avatar for Sigma seiyasugimoto
0
82
スマホでPythonしたい
Avatar for Sigma seiyasugimoto
0
71
平文で保存するな！
Avatar for Sigma seiyasugimoto
0
91
ソースコードを読もう
Avatar for Sigma seiyasugimoto
0
91

Other Decks in Programming

See All in Programming
コーディングルールの鮮度を保ちたい / keep-fresh-go-internal-conventions
Avatar for NAGATA Hiroaki handlename
0
220
Agentic AI: Evolution oder Revolution
Avatar for Lars Roewekamp mobilelarson
PRO
0
190
DevinとClaude Code、SREの現場で使い倒してみた件
Avatar for karia/Y.Hisamatsu karia
1
1.1k
new(1.26) ← これすき / kamakura.go #8
Avatar for utagawa kiki utgwkk
0
2.5k
エンジニアの「手元の自動化」を加速するn8n 2026.02.27
Avatar for 西尾義英 symy2co
0
160
モックわからないマン卒業記 ~振る舞いを起点に見直した、フロントエンドテストにおけるモックの使いどころ~
Avatar for Tasuku Watanabe tasukuwatanabe
3
400
Kubernetesでセルフホストが簡単なNewSQLを求めて / Seeking a NewSQL Database That's Simple to Self-Host on Kubernetes
Avatar for nnaka2992 nnaka2992
0
160
モダンOBSプラグイン開発
Avatar for Kaito Udagawa umireon
0
160
条件判定に名前、つけてますか？ #phperkaigi #c
Avatar for Hiromi Hishida 77web
1
390
Go 1.26でのsliceのメモリアロケーション最適化 / Go 1.26 リリースパーティ #go126party
Avatar for mazrean mazrean
1
420
The free-lunch guide to idea circularity
Avatar for Holly Cummins hollycummins
0
270
ロボットのための工場に灯りは要らない
Avatar for watany watany
11
3k

Featured

See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
231
22k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
133
19k
Highjacked: Video Game Concept Design
Avatar for Ryan Kendrick rkendrick25
PRO
1
320
WENDY [Excerpt]
Avatar for Tessa Abrams tessaabrams
9
36k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4.2k
Amusing Abliteration
Avatar for ianozsvald ianozsvald
0
140
Believing is Seeing
Avatar for Spiro Bolos oripsolob
1
86
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
135
9.8k
SEO Brein meetup: CTRL+C is not how to scale international SEO
Avatar for Linda Hogenes lindahogenes
1
2.4k
16th Malabo Montpellier Forum Presentation
Avatar for AKADEMIYA2063 akademiya2063
PRO
0
74
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
39
3.1k
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
75
5.1k

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……